- Some time ago, I worked hard for a week to build my own personal technical blog . Of course, it is also a variety of mining pits and jumps. If you encounter any problems during the construction process, you can refer to Building a personal blog based on GitHub and Hexo
- After the blog is set up, it is a matter of choosing a blog theme. At the beginning, I used the Yelee theme . The theme is generally good, the animation effect is still very cool, and the star rating has reached 1107.
- In the past two days, I have seen that many people are using the NexT theme , and there are many personalized configurations shared on the Internet, which are still highly recommended, so I tried to configure them.
- This is the NexT theme Chinese configuration provided by the author
- Next, I will summarize and share the pits encountered when integrating the NexT theme configuration.
- The optimization aspects mainly introduced in this article mainly include the following 34 configurations
- Integrated Mob social sharing
- Implement fork me on github in the upper right or upper left corner
- Add RSS
- Add dynamic background
- Realize the effect of click to appear peach heart
- Modify the text style of the link in the article
- Modify the tag with # at the bottom of the article
- Add "end of article" tag to the end of each article uniformly
- Modify author avatar and rotate
- Blog post compression
- Modify the "Code block custom style"
- Sidebar social small icon settings
- Homepage article add shadow effect
- Add traffic to the bottom of the website
- add heat
- Word count at the bottom of the website
- Add README.md file
- Set the website favicon
- Implement statistical functions
- Add top loading bar
- Add copyright information at the bottom of the article
- Add NetEase Cloud thread (the thread is closed, it has expired, and it is changed to Laibili)
- Hide the bottom of the page powered By Hexo / Powered by
- Modify the heart at the bottom of the page
- Article Encrypted Access
- add jiathis to share
- blog post on top
- Modify font size
- Modify the reward font not to flash
- Sidebar Recommended Reading
- custom mouse style
- Add cute pets to your blog
- DaoVoice Online Contact
- click explosion effect
1. https technical blog configuration social sharing
Everyone should know that some JiaThissharing and Baidu sharing are not supported https, here is one recommended for you, supported httpssocial sharing-Mob
1-1. Get the App Key
blog integration Mod sharing component, refer to the official Mob documentation , get theApp Key
1-2. Add configuration in theme configuration file:
mob_share:
enable: true
appkey: ********1-3. next/layout/_partials/share/Add mob_share.swiga file in it, mob_share.swigand enter the following content:
- A point to note here:
- The following code only supports
httpthe URL at the beginning,httpsand clicking the share button will have no response - If you need to support
httpsthe URL, in the last linesrc=http://f1.webshare.mob.com, you need to change thehttpsame herehttps, so that you can achieve the sharing function
- The following code only supports
<!--MOB SHARE BEGIN-->
<div class="-hoofoo-share-title">分享到：</div>
<div class="-hoofoo-share-buttons">
<div class="-mob-share-weibo -hoofoo-share-weibo -hoofoo-share-ui-button"><i class="fa fa-weibo" aria-hidden="true"></i></div>
<div class="-mob-share-weixin -hoofoo-share-weixin -hoofoo-share-ui-button"><i class="fa fa-weixin" aria-hidden="true"></i></div>
<div class="-mob-share-qq -hoofoo-share-qq -hoofoo-share-ui-button"><i class="fa fa-qq" aria-hidden="true"></i></div>
<div class="-mob-share-twitter -hoofoo-share-twitter -hoofoo-share-ui-button"><i class="fa fa-twitter" aria-hidden="true"></i></div>
<div class="-hoofoo-share-more -hoofoo-share-ui-button -mob-share-open"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></div>
</div>
<div class="-mob-share-ui" style="display: none">
<ul class="-mob-share-list">
<li class="-mob-share-weibo"><p>新浪微博</p></li>
<li class="-mob-share-weixin"><p>微信</p></li>
<li class="-mob-share-qzone"><p>QQ空间</p></li>
<li class="-mob-share-qq"><p>QQ好友</p></li>
<li class="-mob-share-tencentweibo"><p>腾讯微博</p></li>
<li class="-mob-share-renren"><p>人人网</p></li>
<li class="-mob-share-kaixin"><p>开心网</p></li>
<li class="-mob-share-douban"><p>豆瓣</p></li>
<li class="-mob-share-youdao"><p>有道云笔记</p></li>
<li class="-mob-share-mingdao"><p>明道</p></li>
<li class="-mob-share-pengyou"><p>朋友网</p></li>
<li class="-mob-share-facebook"><p>Facebook</p></li>
<li class="-mob-share-twitter"><p>Twitter</p></li>
<li class="-mob-share-pocket"><p>Pocket</p></li>
<li class="-mob-share-google"><p>Google+</p></li>
<li class="-mob-share-tumblr"><p>Tumblr</p></li>
<li class="-mob-share-instapaper"><p>Instapaper</p></li>
<li class="-mob-share-linkedin"><p>Linkedin</p></li>
</ul>
<div class="-mob-share-close">取消</div>
</div>
<div class="-mob-share-ui-bg"></div>
<script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey={{theme.mob_share.appkey}}"></script>
<!--MOB SHARE END-->1-4. next/layout/post.swigAdd a conditional branch in:
{% if theme.jiathis %}
{% include '_partials/share/jiathis.swig' %}
{% elseif theme.baidushare %}
{% include '_partials/share/baidushare.swig' %}
{% elseif theme.add_this_id %}
{% include '_partials/share/add-this.swig' %}
{% elseif theme.duoshuo_shortname and theme.duoshuo_share %}
{% include '_partials/share/duoshuo_share.swig' %}
{% elseif theme.mob_share.enable %}
{% include '_partials/share/mob_share.swig' %}
{% endif %}1-5. next/source/css/_common/components/third-party/Add style files in mob_share.styl:
.-hoofoo-share-buttons{
display: inline-block;
}
.-hoofoo-share-title{
font-size: 1.1em;
font-weight: 200;
}
.-hoofoo-share-ui-button{
cursor: pointer;
background-color: #555;
color: #fff;
font-size: 24px;
line-height: 40px;
width: 40px;
height: 40px;
margin: 10px;
border-radius: 25px;
float: left;
transition: background 0.4s;
-moz-transition: background 0.4s; /* Firefox 4 */
-webkit-transition: background 0.4s; /* Safari 和 Chrome */
-o-transition: background 0.4s;
}
.-hoofoo-share-weibo:hover{
background-color: #cf3f41;
}
.-hoofoo-share-weixin:hover{
background-color: #18a01a;
}
.-hoofoo-share-qq:hover{
background-color: #950c0c;
}
.-hoofoo-share-twitter:hover{
background-color: #2ab3e6;
}
.-hoofoo-share-more:hover{
background-color: #777;
}
.-mob-share-weixin-qrcode-content{
border-radius: 4px;
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.-mob-share-weixin-qrcode{
margin: 5% !important;
width: 90% !important;
height: auto !important;
}
.-mob-share-weixin-qrcode-close {
background-image: url('/lib/fancybox/source/fancybox_sprite.png') !important;//因为兼容问题把vendor改成了lib，根据自己的路径修改
}
.-mob-share-weixin-qrcode-close {
overflow: hidden;
line-height: 100px !important;
position: absolute !important;
top: -18px !important;
right: -18px !important;
width: 36px !important;
height: 36px !important;
cursor: pointer !important;
z-index: 8040 !important;
}
/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
.-mob-share-weixin-qrcode-close {
background-image: url('/lib/fancybox/source/[email protected]') !important;//因为兼容问题把vendor改成了lib，根据自己的路径修改
background-size: 44px 152px !important; /*The size of the normal image, half the size of the hi-res image*/
}
}
.-mob-share-close{
height: 4em !important;
font-size: 0.8em !important;
line-height: 4em !important;
background: #555 !important;
color: #fff !important;
}1-6. In the same directory third-party.styl, add:
@import "mob_share";1-7. next/layout/_scripts/third-party/Add the script file in mob_share.swig:
{% if theme.mob_share.enable %}
<script type="text/javascript">
//微信二维码点击背景关闭
$('body').delegate('.-mob-share-weixin-qrcode-bg','click', function(){
$(".-mob-share-weixin-qrcode-close").trigger("click");
});
</script>
{% endif %}1-8. next/layout/_layout.swig的bodyAdd before the end of the tag:
{% include '_scripts/third-party/mob_share.swig' %}For the rest of the optimized configuration, you can refer to the following blog
2. About the personalized configuration of the next theme
Here is a recommendation for everyone, providing 33 articles with cool effects
- hexo's next theme personalized configuration tutorial
3. leanCloudStatistics
Count article readings on your website through leanCloud
- leanCloud, implement article reading statistics
4. Using CloudFlareconfigurationhttps
References
- Implementing HTTPS for hexo blogs with CloudFlare
- Using cloudflare to add a free CDN to your website and get free SSL services
- Adding SSL to GitHub Pages for custom domains Complete solution