1.网站底部字数统计
切换到根目录下,然后运行如下代码
npm install hexo-wordcount --save
然后在/themes/next/layout/_partials/footer.swig
文件尾部加上:
博客全站共{{ totalcount(site) }}字
效果如下:
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
文件,添加红框上的代码
但是,默认的是粉色的,要改变颜色可以在/themes/next/layout/_partials/head.swig
文件中添加如下代码(接在刚才link的后面)
6.在文章底部增加版权信息
在目录 next/layout/_macro/下
添加 my-copyright.swig
:
{% if page.copyright %}本文标题:{ url_for(page.path) }}" _href="{{ url_for(page.path) }}" style="color:#3194d0;">{{ page.title }}文章作者:{{ theme.author }}发布时间:{{ page.date.format("YYYY年MM月DD日 - HH:mm") }}最后更新:{{ page.updated.format("YYYY年MM月DD日 - HH:mm") }}原始链接:{ url_for(page.path) }}" title="{<!-- -->{ page.title }}" _href="{{ url_for(page.path) }}" style="color:#3194d0;">{{ page.permalink }} 许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。{% 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
,在代码
{% if not is_index %} {% include 'wechat-subscriber.swig' %} {% endif %}
之前添加增加如下代码:
{% if not is_index %} {% include 'my-copyright.swig' %} {% endif %}
修改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" %}
将下面这段代码:
{ _p('counter.tag_cloud', site.tags.length) }}
-->
{{ tagcloud({min_font: 16, max_font: 16, amount: 300, color: true, start_color: '#fff', end_color: '#fff'}) }}
换成下面这段代码:
{ _p('counter.tag_cloud', site.tags.length) }}
-->
{{ tagcloud({min_font: 16, max_font: 16, amount: 300, color: true, start_color: '#fff', end_color: '#fff'}) }}
就好啦
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
文件,定位到标签下,插入如下代码:
{% if post.top %} 置顶 | {% 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