1.网站底部字数统计

切换到根目录下,然后运行如下代码

npm install hexo-wordcount --save

然后在/themes/next/layout/_partials/footer.swig文件尾部加上:

博客全站共{{ totalcount(site) }}字

效果如下:

使用 Github 空间搭建 Hexo 技术博客——Hexo NexT主题内添加小优化(十二)_git

2.添加 README.md 文件

每个项目下一般都有一个 README.md 文件,但是使用 hexo 部署到仓库后,项目下是没有 README.md文件的。

在 Hexo 目录下的 source 根目录下添加一个 README.md 文件,修改站点配置文件 _config.yml,将 skip_render 参数的值设置为

skip_render: README.md

保存退出即可。再次使用 hexo d 命令部署博客的时候就不会在渲染 README.md 这个文件了。

使用 Github 空间搭建 Hexo 技术博客——Hexo NexT主题内添加小优化(十二)_hexo_02

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 %}

使用 Github 空间搭建 Hexo 技术博客——Hexo NexT主题内添加小优化(十二)_博客_03

修改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,直接上代码:

使用 Github 空间搭建 Hexo 技术博客——Hexo NexT主题内添加小优化(十二)_git_04

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);
  });
}

修改后效果:

使用 Github 空间搭建 Hexo 技术博客——Hexo NexT主题内添加小优化(十二)_hexo_05

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'}) }}
 




 


就好啦

 

使用 Github 空间搭建 Hexo 技术博客——Hexo NexT主题内添加小优化(十二)_hexo_06

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 %}

使用 Github 空间搭建 Hexo 技术博客——Hexo NexT主题内添加小优化(十二)_git_07

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

使用 Github 空间搭建 Hexo 技术博客——Hexo NexT主题内添加小优化(十二)_hexo_08

12.设置网站ico

  • 比特虫只做icon图标
  • 把图片放到next/source/images文件夹下面,在其它地方用/images/图片名引用就可
  • 并且修改主题配置文件:

使用 Github 空间搭建 Hexo 技术博客——Hexo NexT主题内添加小优化(十二)_git_09

ok