Also published in Levi.Blog and OSChina
Middle text (when writing a blog)
_In your blog article, you need to add the following code in the middle, and change the middle text into the text you need.
<blockquote class="blockquote-center">Excellent people are not out of group, but people who are in group do not have you </blockquote>
Add Fork me on GitHub ribbon to your blog
If it's Next theme (similar to other themes), add GitHub ribbon: add relevant code to themes next layout layout. swig, and remember to modify your link.
- The code is available on GitHub's official website. GitHub Ribbons Select from above.
Add a circular rotation animation to the Next theme author's Avatar
_will themes next source css common components sidebar sidebar-author. style all the code in the following code override.
.site-author-image {
display: block;
margin: 0 auto;
max-width: 96px;
height: auto;
border: 2px solid #333;
padding: 2px;
/* start*/
border-radius: 50%
webkit-transition: 1.4s all;
moz-transition: 1.4s all;
ms-transition: 1.4s all;
transition: 1.4s all;
/* end */
}
/* start */
.site-author-image:hover {
background-color: #55DAE1;
webkit-transform: rotate(360deg) scale(1.1);
moz-transform: rotate(360deg) scale(1.1);
ms-transform: rotate(360deg) scale(1.1);
transform: rotate(360deg) scale(1.1);
}
/* end */
Add Author Copyright Information
We can add copyright information for blog articles.
For example, the address of this article is http://blog.dingxuewen.com/2017/02/07/front-end learning notes 15/reprint, please indicate the source, thank you! Wait.
For Next topics, first find / themes/next/layout/_macro/post.swig, and then find the Wechat Subscription section, as follows:
<div>
{% if not is_index %}
{% include 'wechat-subscriber.swig' %}
{% endif %}
</div>Then add the following code snippet directly to it:
<div align="center">
{% if not is_index %}
<div class="copyright">
<p><span>
<b>This article addresses:</b><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a><br/><b>Reprinted please indicate the source, thank you!</b>
</span></p>
</div>
{% endif %}
</div>Of course, in the above code, you can do some personalized writing, you can show your own personalized copyright information.
Add Dynamic Background to Blogs
Firstly, find themes next layout layout. swig and add the following sentence before the end: (Here are two styles, of course you can change them freely).
- Default grey line
<script type="text/javascript" src="/js/src/particle.js"></script>- Light blue lines
<script type="text/javascript" src="/js/src/particle.js" count="50" zindex="-2" opacity="1" color="0,104,183"></script>Then write the following code in the new file particle.js under themes source js src\:
!function(){function n(n,e,t){return n.getAttribute(e)||t}function e(n){return document.g
Add mouse click to display Xiaohongxin for blog
Mouse click on Little Red Heart to add love.js file in themes next source js SRC file directory. The contents are:
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);Find the file themes next layout layout. swing. After the file, add the following code before the tag:
<!-- Little heart -->
<script type="text/javascript" src="/js/src/love.js"></script>
Add LICENSE to your blog (sidebar)
_Add the following code to the theme profile (before adding it, take a good look at whether your theme profile already contains this code, and don't need to repeat it, because repetition will cause errors).
# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
creative_commons: by-nc-sa
#creative_commons:
Add Local Search functionality
Install hexo-generator-searchdb
$ npm install hexo-generator-searchdb --save
Edit the site profile to add the following fields
search:
path: search.xml
field: post
format: html
limit: 10000Edit Theme Profile to Enable Local Search
# Local search
local_search:
enable: true
Modify font size
_Open themes next source css variables base. style file and change $font-size-base to 16px, as follows:
$font-size-base = 16pxModify page color matching and add custom color
Color selection
_Colour can be picked up by QQ, open QQ and press Ctrl+Alt+A to start the screenshot, move the mouse to the text, hold down the Ctrl key to see the color of the hexadecimal code. You can also use chrome browser's development tool to select the color you like.
Modify_themes next source css variables base. style file, find the colors at the beginning of the file for use across theme, add a custom color, and add the following code under $orange = fc64:
// Here's my custom color
$my-link-blue = #0593d3 //Link color
$my-link-hover-blue = #0477ab //Mouse hover color
Modify hyperlink color
Open the file themes next source css variables base. style and change these lines as follows:
// Global link color.
$link-color = $my-link-blue
$link-hover-color = $my-link-hover-blue
$link-decoration-color = $gray-lighter
$link-decoration-hover-color = $my-link-hover-blue
Modify the color of small code blocks
_I modified the < code > style because I turned on highlight, which rendered the < code > label as well as the < pre > < code > label, and had high priority, so the problem of not opening the < code > style in method 1 would not work. In method one, important makes the style of < code > the highest priority here, so the setup is successful.
Method 1
_Open themes next source css variables base. style file, and modify it as follows:
In the following code:
// Code & Code Blocks
// --------------------------------------------------
$code-font-family = $font-family-monospace
$code-font-size = 14px
$code-font-size = unit(hexo-config('font.codes.size'), px) if hexo-config('font.codes.size') is a 'unit'
$code-border-radius = 4pxAdd the following code below ______________
code {
color:#dd0055 !important;
background:#eee !important;
}
Method two
_You can also set the values of $code-foreground and $code-background in the source/css/_variables/custom.styl e file instead of Method 1 (recommend using Method 1, because the second may fail and be overwritten by other style definitions).
$code-foreground = #fc6423
$code-background = #fc6423
#Here the color is just an example, you set it yourself.
Modify other colors
Modification: themes next source css variables base. style file:
$grey-dim = #666 >>> $grey-dim = #353535
$black-light = #555 >>> $black-light = #353535
$blue-bright = #87daff >>> $blue-bright = #45c5ff
Adding statistics and improving indexing
Add sitemap plug-ins
The site maps of Google and Baidu, which are suitable for other search engines, are manually submitted to increase inclusion.
sitemap installation:
npm install hexo-generator-sitemap@1 --save
npm install hexo-generator-baidu-sitemap@0.1.1 --saveAdd code to the site configuration file:
# hexo sitemap Site Map
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml- When the configuration is successful, the hexo compiler generates sitemap.xml and baidusitemap.xml in the root directory of the hexo site. sitemap.xml is suitable for submitting to Google Search Engine, Baidu sitemap.xml is suitable for submitting to Baidu Search Engine.
- Secondly, create a new robots.txt file in the site root directory, which adds the following code (the specific website is changed to your own address):
# hexo robots.txt
User-agent: *
Allow: /
Allow: /archives/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/
Sitemap: http://blog.dingxuewen.com/sitemap.xml
Sitemap: https://blog.dingxuewen.com/sitemap.xml
Label non-friendship links
_Through the friendship link detection of chinaz stationmaster tool, we found that there is unnecessary PR value output. For the PR value output of non-friendship link, we can add nofollownote to avoid unnecessary PR output. The method is to add the rel="external nofollow" attribute to the link. For example:
Find the file_themes next layout partials footer. swig and code the following:
{{ __('footer.powered', '<a class="theme-link" href="http://hexo.io">Hexo</a>') }}Change from_to ___________
{{ __('footer.powered', '<a class="theme-link" href="http://hexo.io" rel="external nofollow">Hexo</a>') }}_will be the following code:
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">Change from_to ___________
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next" rel="external nofollow">
Join Baidu Station Master Statistics
Prepare some code first. Station master statistics, registration and acquisition of statistical code:
|
<script type="text/javascript">
var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' type='text/javascript'%3E%3C/script%3E"));
</script>Modify the bottom column: Find the file themes next layout partials footer. Swig and add the above code. For privacy reasons, I edited out some key codes and copied them directly. Note that the above xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxx is replaced by your own statistic code.
Add Baidu Map and Google Map Links in the footer
Find the file themes next layout partials footer. swig, Baidu and Google site maps, which have been installed. This is the code inserted in the bottom column:
| <span><a href="/sitemap.xml">Google Website map</a></span>
| <span><a href="/baidusitemap.xml">Baidu Website Map<
Add Baidu Auto Push (improve index)
Baidu automatically pushes the code. When the page is visited, the page URL will be pushed immediately to Baidu. You can add Baidu to Baidu: find\themes\\\Next\layout\\u partials\\\\\\\\\\\\\\du-push.swig) Add the following code.
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https'){
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else{
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
Garlic seed Statistics
Find the file themes next layout partials footer. swig and add the following non-garlic statistics code:
| Click on this page <span id="busuanzi_value_page_pv"></span> second
| Total Click on this Site <span id="busuanzi_value_site_pv"></span> second
| You are number one. <span id="busuanzi_value_site_uv"></span> Guest visitor
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
Examples of the above settings
<div class="copyright" >
{% set current = date(Date.now(), "YYYY") %}
© {% if theme.since and theme.since != current %} {{ theme.since }} - {% endif %}
<span itemprop="copyrightYear">{{ current }}</span>
<span class="with-love">
<i class="icon-next-heart fa fa-heart"></i>
</span>
<span class="author" itemprop="copyrightHolder">{{ config.author }}
|
<script type="text/javascript">
var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' type='text/javascript'%3E%3C/script%3E"));
</script>
| <span><a href="/sitemap.xml">Google Website map</a></span>
| <span><a href="/baidusitemap.xml">Baidu Website Map</a></span>
</span>
</div>
<div class="powered-by">
{{ __('footer.powered', '<a class="theme-link" href="http://hexo.io">Hexo</a>') }}
</div>
<div class="theme-info">
{{ __('footer.theme') }} -
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
NexT{% if theme.scheme %}.{{ theme.scheme }}{% endif %}
</a>
</div>
| Total Click on this Site <span id="busuanzi_value_site_pv"></span> second
| You are number one. <span id="busuanzi_value_site_uv"></span> Guest visitor
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
<script>
(function(){
var bp = document.createElement('script');
bp.src = '//push.zhanzhang.baidu.com/push.js';
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
{% block footer %}{% endblock %}Where the heart goes, where the body goes!
This article is my original, using Knowledge Sharing "Signature-Noncommercial Use-Sharing in the Same Way" 4.0 (CC BY-NC-SA 4.0) License Agreement License.
This work can be freely copied, disseminated and deduced based on this work. If you have the above needs, please inform us by E-mail and so on, and add your signature at the beginning of the article.[ Ding Xuewen. Blog ] Links to the original text and licensing agreement information, and specifies that modifications (if any) shall not be used for commercial purposes. Thank You for Your Cooperation.
For more information, please click to see license agreement and Copyright notice Specific content.
Blogger contact information:
E-mail: xuewending1995@gmail.com [Please indicate your intention]
GitHub: Levi.GitHub