1.网站底部字数统计
切换到根目录下,然后运行如下代码
npm install hexo-wordcount --save
然后在/themes/next/layout/_partials/footer.swig
文件尾部加上:
<div class="theme-info">
<div class="powered-by"></div>
<span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>
效果如下:
2.添加 README.md 文件
每个项目下一般都有一个 README.md
文件,但是使用 hexo 部署到仓库后,项目下是没有 README.md
文件的。
在 Hexo 目录下的 source
根目录下添加一个 README.md
文件,修改站点配置文件 _config.yml
,将 skip_render
参数的值设置为
skip_render: README.md
保存退出即可。再次使用 hexo d
命令部署博客的时候就不会在渲染 README.md 这个文件了。
3.设置网站的图标Favicon
在EasyIcon中找一张(32*32)的ico
图标,或者去别的网站下载或者制作,并将图标名称改为favicon.ico
,然后把图标放在/themes/next/source/images
里,并且修改主题配置文件:
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico
4.实现统计功能
在根目录下安装 hexo-wordcount
,运行:
npm install hexo-wordcount --save
然后在主题的配置文件中,配置如下:
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: true
5.添加顶部加载条
打开/themes/next/layout/_partials/head.swig
文件,添加红框上的代码
<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">
但是,默认的是粉色的,要改变颜色可以在/themes/next/layout/_partials/head.swig
文件中添加如下代码(接在刚才link的后面)
<style>
.pace .pace-progress {
background: #1E92FB; /*进度条颜色*/
height: 3px;
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px #1E92FB, 0 0 5px #1E92FB; /*阴影颜色*/
}
.pace .pace-activity {
border-top-color: #1E92FB; /*上边框颜色*/
border-left-color: #1E92FB; /*左边框颜色*/
}
</style>
6.在文章底部增加版权信息
在目录 next/layout/_macro/下
添加 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库 sweetalert 可修改路径 -->
<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>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
<p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
<p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm") }}</p>
<p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm") }}</p>
<p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
<span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功!"></i></span>
</p>
<p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
$(".fa-clipboard").click(function(){
clipboard.on('success', function(){
swal({
title: "",
text: '复制成功',
icon: "success",
showConfirmButton: true
});
});
});
</script>
{% endif %}
在目录next/source/css/_common/components/post/
下添加my-post-copyright.styl
:
.my_post_copyright {
width: 85%;
max-width: 45em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 0.93rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
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;
}
修改next/layout/_macro/post.swig
,在代码
<div>
{% if not is_index %}
{% include 'wechat-subscriber.swig' %}
{% endif %}
</div>
之前添加增加如下代码:
<div>
{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}
</div>
修改next/source/css/_common/components/post/post.styl
文件,在最后一行增加代码:
@import "my-post-copyright"
7.添加共享按钮
安装
npm install --save hexo-helper-qrcode
配置
shareto: true
8.去除valine的Powered By
我喜欢简洁一点,所以想去掉这个提示。查看Elements可以看到这个div,那么我只要移除这个div下的所有子节点,就可以去掉这个Powered By了。修改对应的文件valine.swig,直接上代码:
new Valine({
...
pageSize:'{{ theme.valine.pageSize }}' || 10,
});
//新增以下代码即可,可以移除.info下所有子节点。
var infoEle = document.querySelector('#comments .info');
if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0){
infoEle.childNodes.forEach(function(item) {
item.parentNode.removeChild(item);
});
}
修改后效果:
9.增加词云
方法比较简单,加个js脚本就好了,至于加载哪里都无所谓了,就放在标签云的页面。
就加在标签的那个页面好了。
打开`themes\next\layout\page.swig`找到:
{% if page.type === "tags" %}
将下面这段代码:
<div class="tag-cloud">
<!-- <div class="tag-cloud-title">
{{ _p('counter.tag_cloud', site.tags.length) }}
</div> -->
<div class="tag-cloud-tags" id="tags">
{{ tagcloud({min_font: 16, max_font: 16, amount: 300, color: true, start_color: '#fff', end_color: '#fff'}) }}
</div>
</div>
换成下面这段代码:
<div class="tag-cloud">
<!-- <div class="tag-cloud-title">
{{ _p('counter.tag_cloud', site.tags.length) }}
</div> -->
<div class="tag-cloud-tags" id="tags">
{{ tagcloud({min_font: 16, max_font: 16, amount: 300, color: true, start_color: '#fff', end_color: '#fff'}) }}
</div>
</div>
<br>
<script type="text/javascript">
var alltags=document.getElementById('tags');
var tags=alltags.getElementsByTagName('a');
for (var i = tags.length - 1; i >= 0; i--) {
var r=Math.floor(Math.random()*75+130);
var g=Math.floor(Math.random()*75+100);
var b=Math.floor(Math.random()*75+80);
tags[i].style.background = "rgb("+r+","+g+","+b+")";
}
</script>
<style type="text/css">
div#posts.posts-expand .tag-cloud a{
background-color: #f5f7f1;
border-radius: 6px;
padding-left: 10px;
padding-right: 10px;
margin-top: 18px;
}
.tag-cloud a{
background-color: #f5f7f1;
border-radius: 4px;
padding-right: 5px;
padding-left: 5px;
margin-right: 5px;
margin-left: 0px;
margin-top: 8px;
margin-bottom: 0px;
}
.tag-cloud a:before{
content: "?";
}
.tag-cloud-tags{
text-align: left;
counter-reset: tags;
}
</style>
就好啦
10.文章置顶+置顶标签
下载:
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save
然后在需要置顶的文章的Front-matter
中加上top: true
即可。比如下面这篇文章:
---
title: 数学笔记
date: 2019-03-10 20:07:12
tags:
- 数学
- 考研
top: true
categories: 考研数学
---
到目前为止,置顶功能已经可以实现了。所有相关博文到这边就结束了。
不过置顶的文章显示在最上面之后,如果没有明确的置顶标志,是不是感觉有点怪怪的呢?
设置置顶标志
打开:/blog/themes/next/layout/_macro
目录下的post.swig
文件,定位到<div class="post-meta">
标签下,插入如下代码:
{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}
11.添加RSS
在主题配置文件中有NexT默认的RSS设置,默认为留空,这时使用 Hexo 生成的 Feed 链接,需要先安装 hexo-generator-feed插件。
在站点根目录打开git bash,安装插件:
$ npm install --save hexo-generator-feed
修改站点配置文件,在最后添加以下代码:
feed: # RSS订阅插件
type: atom
path: atom.xml
limit: 0
plugins: hexo-generate-feed
12.设置网站ico
- 去比特虫只做icon图标
- 把图片放到next/source/images文件夹下面,在其它地方用/images/图片名引用就可
- 并且修改主题配置文件:
ok