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-feed
Copy 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-feed
Copy 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.xml
Copy the code
Run after configuration:
$ hexo g
Copy 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.js
Copy 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:
<! -- Page click the little red heart --> <scripttype="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 > Thanks for 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 a "end of article" tag to the end of the article
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:
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'); // Compress the public directory CSS gulp.task('minify-css'.function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public')); }); // Compress the public directory 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'))}); // Compress the public/js directory 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:
Here are two statistics codes for different calculation methods:
In pv mode, a single user clicks on n articles continuously and records n visits
<span id="busuanzi_container_site_pv"< p style = "max-width: 100%"busuanzi_value_site_pv"< / span > < / span > time >Copy the code
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"< p style = "max-width: 100%"busuanzi_value_site_uv"< / span > < / span > time >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
### Implement the renderings
Concrete method implementation
Switch to the root directory and run the following code
$ npm install hexo-wordcount --save
Copy 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"</span> </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.md
Copy 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.ico
Copy 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 --save
Copy 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
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; /* Top border color */
border-left-color: #1E92FB; /* Left border color */
}
</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 > <! - JS library sweetalert can modify the path -- -- > < script SRC = "https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js" > < / script > < script SRC = "https://unpkg.com/sweetalert/dist/sweetalert.min.js" > < / script > < 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'); $(".fa-clipboard").click(function(){clipboard. On ('success', function(){swal({title: "", text: 'success', icon: "success", showConfirmButton: true }); }); }); </script> {% endif %}Copy the code
Add my-post-copyright. Styl to next/source/ CSS /_common/ Components /post/ :
<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 are A collection of canvas categories and copyright: Doraemontrue
---
Copy the code
Tip: If you’re having trouble typing copyright: true each time, add the following to the /scaffolds/post.md file:
So every time Hexo New "Your Content"After that, the generated MD file will automatically put copyright:Add to the inside ( Pay attention toIf there is a problem with your original link after parsing it out: http://yoursite.com/ Front-end project: Drawing doraemon with Canvas. HTML, then in the root directory _config.ymlWrite it like this 🙂
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:
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 uid
Copy 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.
Open themes/next/layout/_partials/footer.swig and use “” to hide the code between them, or delete it directly. 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:
Icon library
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.password }}') {if (prompt('Please enter the article password')! = ='{{ page.password }}'){
alert('Wrong password! '); 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:
themes/next/layout/_partials/share/jiathis.swig
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.top && b.top) {// Both articles have definitions of topif(a.top == b.top) returnb.date - a.date; // If the top value is the same, the articles are sorted in descending orderelsereturnb.top - a.top; // If not, use descending order of top value}elseif(a.top && ! {// if there is a definition of top, then there is a definition of top.return- 1; }elseif(! a.top && b.top) {return 1;
}
elsereturnb.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 are a collection of categories and copyright.true
top: 100
---
Copy 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 =16px
Copy 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:
/* Comment the text flash function#wechat: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
// Cursor style * {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-live2d
Copy 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: -30
Copy 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!
