It’s cool to see some oF the next themed sites, so how are they configured? I’m going to talk a little bit about how do you achieve something cool

There are mainly the following 30 kinds:

  • Fork me on Github in the upper-right or upper-left corner
  • Add the RSS
  • Adding a Dynamic Background
  • Click on the heart effect
  • Modify link text styles within articles
  • Modify the hashtag at the bottom of the article
  • Add a uniform “End of article” tag at the end of each article
  • Modify the author’s avatar and rotate it
  • Post compression
  • Modify code block custom styles
  • Sidebar social small icon Settings
  • Add a shadow effect to the home article
  • Add page views at the bottom of the site
  • Add heat
  • Word count at the bottom of the site
  • Add the readme. md file
  • Set the Favicon for the site
  • Statistical function
  • Add a top loader bar
  • Add copyright information at the bottom of the article
  • Added netease Cloud comment (comment closed, invalid, changed to Lai Bi)
  • Hide the bottom of the page powered By Hexo
  • Modify the hearts at the bottom of the page
  • Article encrypted access
  • Add jiathis share
  • Post top
  • Modify font size
  • Modify the tip font does not flash
  • Custom mouse style
  • Add cute pets to the blog

1. Fork me on Github in the upper-right or upper-left corner

Realize the effect drawing





Concrete implementation method

Click here to pick your favorite style and copy the code. For example, I copied the following code:





Then paste the code you just copied into themes/next/layout/_layout.swig (under

) and change href to your Github address




2. Add the RSS

Realize the effect drawing





Concrete implementation method

Switch to your blog (I was named blog, specific to see what is your name) of the path, for example, I am in/Users/chenzekun/Code/Hexo/blog on this path, which is in the root directory of you





Then install the Hexo plugin :(this will be placed in the node_modules folder)

$ npm install --save hexo-generator-feedCopy the code

Next open the redlined file as shown below:





At the end of the inside add :(please make sure to add a space after the colon, otherwise an error will occur!)

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feedCopy the code

Then open _config.yml in the next theme folder and configure it as follows: (add /atom. XML after RSS: with a space after the colon)

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xmlCopy the code

Run after configuration:

$ hexo gCopy the code

Rebuild it and you will see the atom.xml file in the./public folder. Then start the server to see if it works before deploying to Github.

3. Add a dynamic background

Realize the effect drawing





Concrete implementation method

I covered this in an earlier post. For details, check out my blog

4. Achieve the effect of clicking the heart

Realize the effect drawing





Concrete implementation method

Enter the following in the url

http://7u2ss1.com1.z0.glb.clouddn.com/love.jsCopy the code

Then copy the code inside, create a new love.js file and copy the code into it, and save it. Will love. Js file into the path/themes/next/source/js/SRC, then open the/themes/next \ layout \ _layout swig file, at the end (quoted in front and couldn’t find the bugs will appear to add the following code:

<! <script type="text/javascript" SRC ="/js/ SRC /love.js"></script>Copy the code

5. Modify the link text style in the article

Realize the effect drawing





Concrete implementation method

Modify the file themes\next\source\ CSS \_common\ Components \post\post.styl and add the following CSS styles at the end:

// Post -body p a{color: #0593d3; border-bottom: none; border-bottom: 1px solid #0593d3; &:hover { color: #fc6423; border-bottom: none; border-bottom: 1px solid #fc6423; }}Copy the code

“Post-body” is selected to not affect the title, “P” is selected to not affect the display style of “Read full text” on the home page, and the color can be defined by yourself.

6. Change the hashtag at the bottom of the post

Realize the effect drawing





Concrete implementation method

Change the template /themes/next/layout/_macro/post.swig, search rel=”tag”>#, change # to < I class=”fa fa-tag”>

7. Add “End of article” at the end of each article

Realize the effect drawing





Concrete implementation method

Create a new passage-end-tag.swig file in path \themes\next\layout\_macro and add the following contents:

<div> {% if not is_index %} <div style="text-align:center; color: #ccc; font-size:14px;" > -- -- -- -- -- -- -- -- -- -- -- -- -- end of this article < I class = "fa fa - paw" > < / I > thank you for your reading -- -- -- -- -- -- -- -- -- -- -- -- -- < / div > {% endif %} < / div >Copy the code

Open the themes\next\layout\_macro\post.swig file and add the following code after the post-body and before the post-footer:





The code is as follows:

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>Copy the code

Then open the theme configuration file (_config.yml) and add at the end:

# Add the "end of this article" flag passage_end_tag: enabled: trueCopy the code

Once you’ve done that, you’ll add the same image at the end of each post.

8. Modify the author’s avatar and rotate it:

Implementation effect picture:





Concrete implementation method

Open \themes\next\source\ CSS \_common\ Components \sidebar\sidebar-author. Styl and add the following code:

.site-author-image { display: block; margin: 0 auto; padding: $site-author-image-padding; max-width: $site-author-image-width; height: $site-author-image-height; border: $site-author-image-border-width solid $site-author-image-border-color; /* Border -radius: 80px; -webkit-border-radius: 80px; -moz-border-radius: 80px; box-shadow: inset 0 -1px 0 #333sf; /* Set the loop animation [animation: (play) Animation name (2s) Animation playback duration unit of seconds or microseconds (ase-out) Animation playback speed curve is to end at low speed (1s) wait 1 second and then start animation (1) animation playback times (infinite)]*/ /* The mouse over the head rotates 360 degrees */ - its - the transition: 1.0 s ease - out - its - transform; Moz - the transition: 1.0 s ease - out - moz - transform; Transition: transform 1.0 s ease - out; } img:hover {/* hover {webkit-animation-play-state:paused; animation-play-state:paused; */ * Webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); transform: rotateZ(360deg); } / / @-webkit-keyframes play {0% {-webkit-transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(-360deg); } } @-moz-keyframes play { 0% { -moz-transform: rotateZ(0deg); } 100% { -moz-transform: rotateZ(-360deg); } } @keyframes play { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(-360deg); }}Copy the code

9. Blog compression

Execute the following command in the root directory of the site:

$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --saveCopy the code

Create gulpfile.js as shown in the following image and fill in the following:





var gulp = require('gulp'); var minifycss = require('gulp-minify-css'); var uglify = require('gulp-uglify'); var htmlmin = require('gulp-htmlmin'); var htmlclean = require('gulp-htmlclean'); Gulp. task('minify- CSS ', function() { return gulp.src('./public/**/*.css') .pipe(minifycss()) .pipe(gulp.dest('./public')); }); HTML gulp.task('minify- HTML ', function() { return gulp.src('./public/**/*.html') .pipe(htmlclean()) .pipe(htmlmin({ removeComments: true, minifyJS: true, minifyCSS: true, minifyURLs: true, })) .pipe(gulp.dest('./public')) }); Js gulp.task('minify-js', function() { return gulp.src('./public/**/*.js') .pipe(uglify()) .pipe(gulp.dest('./public')); }); Gulp. task('default', ['minify-html','minify-css','minify-js']);Copy the code

To generate a blog post, perform hexo g && gulp, which will compress the static resource files in the public directory according to the configuration in gulpfile.js.

10. Modify the code block custom style

Realize the effect drawing





Concrete implementation method

Open \themes\next\source\ CSS \_custom\custom.styl and add :(colors can be customized)

// Custom styles. code { color: #ff7600; background: #fbf7f8; margin: 2px; } // Custom styles of large code blocks. Highlight, pre {margin: 5px 0; padding: 5px; border-radius: 3px; } .highlight, code, pre { border: 1px solid #d6d6d6; }Copy the code

11. Sidebar social icon Settings

Realize the effect drawing





Concrete implementation method

Open the theme configuration file (_config.yml), search for Social_icons :, find your favorite small ICONS in the icon library, and copy the names in the following locations





12. Add a shadow effect to the homepage post

Realize the effect drawing





Concrete implementation method

Open themes\next\source\ CSS \_custom\custom.styl and add:

Post {margin-top: 60px; margin-top: 60px; margin-bottom: 60px; padding: 25px; -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5); -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5); }Copy the code

13. Add page views at the bottom of your site

Realize the effect drawing





Concrete implementation method

Open themes\next\layout_partials\footer.swig and underline copyright:





The code is as follows:

< script async SRC = "https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js" > < / script >Copy the code

Then add the code to display the statistics where appropriate, as shown in the figure below:





The code is as follows:

<div class="powered-by"> < I class="fa fa-user-md"></ I ><span id="busuanzi_container_site_uv" id="busuanzi_value_site_uv"></span> </span> </div>Copy the code

Here are two statistics codes for different calculation methods:

  1. In pv mode, a single user clicks on n articles continuously and records n visits
<span id="busuanzi_container_site_pv"> Total number of visits to this site <span ID ="busuanzi_value_site_pv"></span> Times </span>Copy the code
  1. In uv mode, a single user continuously clicks on n articles and only records the number of visitors for 1 time
<span id="busuanzi_container_site_uv"> Total number of visits to this site <span id="busuanzi_value_site_uv">Copy the code

Once added, execute hexo D-G and refresh the page to see the effect

14. Add heat

Implementation effect picture:





Concrete implementation method

Go to /themes/ Next /layout/_macro/post.swig and add ° C to the area marked in red:





Then open the/themes/next/languages/useful – Hans. Yml, will draw the red box instead of the heat





15. Word count at the bottom of the website

Realize the effect drawing





Concrete method implementation

Switch to the root directory and run the following code

$ npm install hexo-wordcount --saveCopy the code

Then add the following to the end of the /themes/next/layout/_partials/footer.swig file:

<div class="theme-info"> <div class="powered-by"></div> <span class="post-count"> </div>Copy the code

16. Add the readme. md file

There is usually a readme. md file under each project, but there is no readme. md file under a project after deploying to the repository using hexo.

Add a readme. md file to the source root in the Hexo directory, modify the site configuration file _config.yml, and set the value of the skip_render parameter to

skip_render: README.mdCopy the code

Save and exit. The readme. md file will no longer be rendered when the blog is deployed again using the hexo d command.

17. Set the Favicon for your website

Realize the effect drawing





Concrete method implementation

Find a (32 * 32) in EasyIcon ico icon, or to other sites to download or production, and change the name of the icon to the favicon. Ico, then put the icon/themes/next/source/images, and modify the theme configuration file:

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.icoCopy the code

18. Realize statistical function

Realize the effect drawing





Concrete implementation method

Install hexo-Wordcount in the root directory and run:

$ npm install hexo-wordcount --saveCopy the code

Then in the theme configuration file, configure the following:

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: trueCopy the code

19. Add a top loader bar

Realize the effect drawing





Concrete implementation method

Open the /themes/next/layout/_partials/head.swig file and add the code on the red box





The code is as follows:

< script SRC = "/ / cdn.bootcss.com/pace/1.0.2/pace.min.js" > < / script > < link Href = "/ / cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel = "stylesheet" >Copy the code

To change the color, add the following code to the /themes/next/layout/_partials/head.swig file.

<style> .pace .pace-progress { background: #1E92FB; /* Progress bar color */ height: 3px; } .pace .pace-progress-inner { box-shadow: 0 0 10px #1E92FB, 0 0 5px #1E92FB; /* Shadow color */}.pace. pace-activity {border-top-color: #1E92FB; */ border-left-color: #1E92FB; </style>Copy the code

Update next theme (_config.yml) change the theme configuration file (_config.yml) to change pace: false to pace: True will do the trick, and you can change the style of the bar, as shown below:





20. Add copyright information at the bottom of the article

Realize the effect drawing





In the next/layout/_macro/ directory, add my-copyright. Swig:

{% if page.copyright %} <div class="my_post_copyright"> <script SRC = "/ / cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js" > < / script > <! Sweetalert --> <script type="text/javascript" SRC = "http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js" > < / script > < script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script> <link rel="stylesheet" type="text/css" Href = "http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css" > < p > < span > title: < / span > < a href = "{{url_for (page. The path) }} "> {{page. The title}} < / a > < / p > < p > < span > author: < / span > < a href ="/" title = "visit {{theme. The author}} personal blog" > {{theme. The author }} < / a > < / p > < p > < span > release date: < / span > {{page. The date. The format (" on DD MM YYYY years - HH: MM ")}} < / p > < p > < span > last updated: < / span > {{ Page. Updated. The format (" on DD MM YYYY years - HH: MM ")}} < / p > < p > < span > original link: < / span > < a href = "{{url_for (page. The path)}}" title = "{{ Page. Title}}">{{page. Permalink}}</a> <span class="copy-path" title=" copy ">< I class="fa fa-clipboard" Data-clipboard -text="{{page. Permalink}}" aria-label=" Copy succeeded!" > < / I > < / span > < / p > < p > < span > license agreement: < / span > < I class = "fa fa - creative - Commons" > < / I > < a rel = "license" Href = "https://creativecommons.org/licenses/by-nc-nd/4.0/" target = "_blank" title = "appears - NonCommercial - NoDerivatives 4.0 International (CC BY-NC-nd 4.0)"> </ A > </p> </div> <script> var clipboard = new Clipboard('.fa-clipboard'); On ('success', $(function(){$(".fa-clipboard").click(function(){title: "", text: 'success', HTML: false, timer: 500, showConfirmButton: false }); }); })); </script> {% endif %}Copy the code

Add my-post-copyright. Styl to next/source/ CSS /_common/ Components /post/ :

.my_post_copyright { width: 85%; max-width: 45em; Margin: 2.8 em auto 0; Padding: 0.5 1.0 em em; border: 1px solid #d3d3d3; The font - size: 0.93 rem; The line - height: 1.6 em. word-break: break-all; Background: rgba (255255255,0.4); } .my_post_copyright p{margin:0; } .my_post_copyright span { display: inline-block; Width: 5.2 em. color: #b5b5b5; font-weight: bold; } .my_post_copyright .raw { margin-left: 1em; width: 5em; } .my_post_copyright a { color: #808080; border-bottom:0; } .my_post_copyright a:hover { color: #a3d2a3; text-decoration: underline; } .my_post_copyright:hover .fa-clipboard { color: #000; } .my_post_copyright .post-url:hover { font-weight: normal; } .my_post_copyright .copy-path { margin-left: 1em; width: 1em; +mobile(){display:none; } } .my_post_copyright .copy-path:hover { color: #808080; cursor: pointer; }Copy the code

Modify next/layout/_macro/post.swig in the code

<div>
      {% if not is_index %}
        {% include 'wechat-subscriber.swig' %}
      {% endif %}
</div>Copy the code

Add the following code before:

<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>Copy the code

As follows:





Modify the next/source/CSS / _common/components/post/post. Styl file, increased in the last line of code:

@import "my-post-copyright"Copy the code

Save and rebuild. To add a display of copyright information under this blog post, add a setting like copyright: true in Markdown:

-- Canvas Categories: Copyright: True -- Doraemon -- Canvas Categories: Copyright: TrueCopy the code

Tip: If you’re having trouble typing copyright: true each time, add the following to the /scaffolds/post.md file:





After each hexo new “your content”, the generated MD file will automatically add copyright: to it (note: if your original link has a problem after parsing: http://yoursite.com/). Using Canvas to draw Doraemon.html, write something like this in _config.yml





Will do.

21. Added netease Cloud comment (comment closed, invalid, changed to Lai Bi)

Realize the effect drawing





There are two ways to implement this: ① Update the next theme, because the latest version of the theme already supports this comment. Add the following configuration directly to the topic configuration file _config.yml:

gentie_productKey: #your-gentie-product-keyCopy the code

② If you don’t want to update the theme, then follow the steps below: First, add the following configuration to the theme configuration file _config.yml:

gentie_productKey: #your-gentie-product-keyCopy the code

Your productKey is the red line at the bottom





Then add gentie. Swig to layout/_scripts/third-party/comments/.

{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not theme.disqus_shortname and  not theme.hypercomments_id %} {% if theme.gentie_productKey %} {% set gentie_productKey = theme.gentie_productKey %} <script> var cloudTieConfig = { url: document.location.href, sourceId: "", productKey: "{{gentie_productKey}}", target: "cloud-tie-wrapper" }; </script> <script src="https://img1.ws.126.net/f2e/tie/yun/sdk/loader.js"></script> {% endif %} {% endif %}Copy the code

Append to layout/_scripts/third-party/comments.swig:

{% include './comments/gentie.swig' %}Copy the code

Finally, the judgment logic referenced by netease Cloud comment plug-in was added to layout/_partials/comments.swig:

{% elseif theme.gentie_productKey %}
      <div id="cloud-tie-wrapper" class="cloud-tie-wrapper">
      </div>Copy the code

The specific location is as follows:





You may not see it when you hexo S, but you can see it when you hexo D

Recently, my friend sent a message that netease cloud comment will be closed, I checked online, sure enough





All tears, last time I used a lot of words, the result was a lot of words closed, followed by netease cloud comment, this time I directly used the foreign To biili, should not be so easy to close

In fact, the method is similar to the above

First add the following configuration to the _config.yml file:

# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: your uidCopy the code

Where livere_uid is the red line





Add livere.swig to layout/_scripts/third-party/comments/.

{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not theme.disqus_shortname and  not theme.hypercomments_id and not theme.gentie_productKey %} {% if theme.livere_uid %} <script type="text/javascript">  (function(d, s) { var j, e = d.getElementsByTagName(s)[0]; if (typeof LivereTower === 'function') { return; } j = d.createElement(s); j.src = 'https://cdn-city.livere.com/js/embed.dist.js'; j.async = true; e.parentNode.insertBefore(j, e); })(document, 'script'); </script> {% endif %} {% endif %}Copy the code

Append to layout/_scripts/third-party/comments.swig:

{% include './comments/livere.swig' %}Copy the code

In layout/_partials/comments.swig, the LiveRe plugin should be referenced or not.

{% elseif theme.livere_uid %}
      <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
{% endif %}Copy the code

After the

22. Hide the bottom of the page powered By Hexo

Open themes/next/layout/_partials/footer.swig and use ”
“hidden between the code can be, or directly delete. The position is shown as follows:





23. Modify the hearts at the bottom of the page

Again open themes/next/layout/_partials/footer.swig and find:





“, and then find your favorite icon in the icon library, and then modify the underlined part.

24. Encrypted access to articles

Realize the effect drawing





Concrete implementation method

Open themes->next-> Layout ->_partials->head.swig and insert this code in the following location:





The code is as follows:

< script > (function () {if (' {{page. The password}} ') {if (prompt (' enter the password for the article ')! == '{{page.password}}'){alert(' password error! '); history.back(); }}}) (); </script>Copy the code

Then write something like this:





25. Add jiathis share

In the theme configuration file, jiathis is true and it will do, as shown below





The default looks like this:





If you want to custom, open the themes/next/layout / _partials/share/jiathis swig modify picture red line part is ok





26. Blog posts top the list

Modify hero-generator-index to replace the code in node_modules/hexo-generator-index/lib/generator.js with:

'use strict'; var pagination = require('hexo-pagination'); module.exports = function(locals){ var config = this.config; var posts = locals.posts; posts.data = posts.data.sort(function(a, B) {if(a.table &&b.table) {// if(a.table == b.table) return b.table - a.table; Else return b.pop - a.pop; } else if(a.top&&! Return -1; return -1; return -1; return -1; return -1; return -1; } else if(! a.top && b.top) { return 1; } else return b.date - a.date; }); var paginationDir = config.pagination_dir || 'page'; return pagination('', posts, { perPage: config.index_generator.per_page, layout: ['index', 'archive'], format: paginationDir + '/%d/', data: { __index: true } }); };Copy the code

Add top value in the article, the larger the value, the more advanced the article, such as

Categories: Copyright: True Top: 100Copy the code

27. Change the font size

Open the \themes\next\source\ CSS \ _variables\base.styl file and change $font-size-base to 16px, as shown below:

$font-size-base            =16pxCopy the code

28. Modify the font not flashing

Modify the file next/source/CSS / _common/components/post/post – reward. Styl, then comment function of wechat: hover and alipay: hover, as follows:

Hover p{animation: roll 0.1s infinite linear; -webkit-animation: roll 0.1s infinite linear; -moz-animation: roll 0.1s infinite linear; } #alipay:hover p{animation: roll 0.1s infinite linear; -webkit-animation: roll 0.1s infinite linear; -moz-animation: roll 0.1s infinite linear; } * /Copy the code

29. Customize mouse styles

Open themes/next/source/ CSS /_custom/custom.styl and write the following code in it

Style * {/ / mouse cursor: url (" http://om8u46rmb.bkt.clouddn.com/sword2.ico "), auto! important } :active { cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto! important }Copy the code

The URL inside must be ICO pictures, ICO pictures can be uploaded to the Internet (I am using seven cattle yuntu bed), and then get the chain, copy to the URL on the line

30. Add cute pets to your blog

Realize the effect drawing





To do this, switch to the path of your blog and enter the following code:

npm install -save hexo-helper-live2dCopy the code

Then open the Hexo/blog/themes/next/layout _layout. Swig, put the following code in the < / body > before:

{{ live2d() }}Copy the code

Then add the parameter to _config.yml of hexo:

live2d:
  model: wanko
  bottom: -30Copy the code

And then hexo clean, hexo G, hexo D you can see.

Here are some models that can be exchanged for different pets

  • Model Model name Default value: Z16
    • Gantzert_Felixander
    • Epsilon2.1
    • haru
    • miku
    • ni-j
    • nico
    • nito
    • nipsilon
    • nietzsche
    • shizuku
    • tsumiki
    • wanko
    • z16
    • hibiki
    • koharu
    • haruto
    • Unitychan
    • tororo
    • hijiki
  • Width Default value: 150
  • Height Height Default value: 300
  • className <canvas>The class name of the element defaults to live2d
  • id <canvas>The default id of the element is Live2dCanvas
  • bottom <canvas>The base offset of the element defaults to -20. This parameter can be adjusted if the model position is not correct

There are downsides to using this, it doesn’t feel very good on a phone, pets are blocking the text, and it’s a bit slow to load





Attention! If you have the following question in hexo D





You can do this by first deleting the.deploy_git folder under Hexo and running it

git config --global core.autocrlf falseCopy the code

Re-hexo clean,hexo G,hexo D

Thank you

Thanks a lot of great gods of the article, really learned a lot, some forgot to record down, here heartfelt thanks. Road Endless its long and far, I will seek up and down!

Welcome to my blog

Reference articles:

  1. Blog.csdn.net/MasterAnt_D…
  2. Zidingyi4qh.com/2017/04/27/…
  3. Fuyis. Me / 2017/01/25 /…
  4. www.vitah.net/posts/20f30…
  5. Thief. One / 2017/03/03 /…