Hexo-NexT配置超炫网页效果

发表于 | 分类于 | 阅读次数:

添加添加RSS

在博客根目录下，打开命令窗口，并安装Hexo插件

1
npm install --save hexo-generator-feed

安装成功之后，编辑Blog/_config.yml文件，在文件末尾添加

1
2
3
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

配置主题_config.yml文件，搜索rss，在后面加上/atom.xml

1
2
3
4
# 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 //注意：有一个空格

之后，终端输入hexo s查看效果

右上角添加GitHub挂件

在GitHub Corners选择一款你喜欢的挂饰，拷贝方框内的代码

在目录中找到Blog/themes/next/layout/_layout.swig文件并打开，将刚刚复制的挂饰代码添加在<div class="headband"></div>中

找到刚复制进去代码的<a></a>标签，将跳转地址改成自己的GitHub地址

修改底部标签样式

修改Blog\themes\next\layout\_macro\post.swig中文件，command+f搜索rel="tag">#，将#替换成<i class="fa fa-tag"></i>

输入以下命令，查看效果

1
2
hexo clean
hexo s

在文章末尾添加“文章结束”标记

在路径Blog\themes\next\layout\_macro文件夹中新建passage-end-tag.swig文件

1
2
3
4
5
//切换到路径_macro
cd [_macro路径]

//创建passage-end-tag.swig文件
touch passage-end-tag.swig

在passage-end-tag.swig添加以下内容，直接用文本编辑器打开，粘贴以下内容后保存

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

打开Blog\themes\next\layout\_macro\post.swig，在post-body之后，post-footer之前（post-footer之前两个DIV），添加以下代码：

1
2
3
4
5
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

位置如下：

修改主题配置文件_config.yml，在末尾添加：

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

配置完成之后，效果如下：

侧边栏社交小图标设置

打开主题配置文件_config.yml，搜索Social，将你有的社交账号前面的#号去掉。格式为：

1
[社交平台名]: [社交地址] || [图标名称]

效果图如下：

图标可以去Font Awesome Icon网站去找，找到后复制名字到相应的位置即可

Hexo博客添加站内搜索（Local Search）

安装 hexo-generator-search

1
npm install hexo-generator-search --save

安装 hexo-generator-searchdb

1
npm install hexo-generator-searchdb --save

编辑站点配置文件，添加以下内容

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑主题配置文件，设置Local searchenable为ture

效果如下图所示：

添加网页顶部进度加载条

编辑主题配置文件，搜索pace，将其值改为ture就可以了，选择一款你喜欢的样式，如图：

修改文章内链接文本样式

修改Blog/themes/next/source/css/_common/components/post/post.styl，在末尾添加CSS样式：

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.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; //底部分割线颜色
  }
}

设置后，效果如下：

设置网站的图标Favicon

在图标网站（easyicon或者阿里巴巴矢量图标库）找一张你喜欢的图标（大：32x32 小：16x16）并下载下来，将下载好的小图和中图命名成默认图标的名字，并放在Blog/themes/next/source/images中替换掉。

如果你自定义了图片名字，需要修改主题配置文件，如下图：

底部隐藏由Hexo强力驱动、主题

打开主题配置文件_config.yml，搜索footer，将相关配置设置为false，如下图：

添加侧栏推荐阅读

编辑主题配置文件，如下配置即可：

1
2
3
4
5
6
7
# Blog rolls
links_icon: link
links_title: 推荐阅读
#links_layout: block
links_layout: inline
links:
 ECMAScript6入门: http://es6.ruanyifeng.com/

效果如下图所示：

网站底部加上访问量

打开主题配置文件_config.yml，搜索footer，加入一个配置counter，并设置为true,如下：

1
2
footer:
  counter: true

修改``Blog/theme/next/layout/_partials/footer.swig`，在末尾添加如下代码：

1
2
3
4
5
6
{% if theme.footer.counter %}
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <i class="fa fa-user-md"></i> <span id="busuanzi_container_site_pv">总访问量<span id="busuanzi_value_site_pv">		</span>次</span>
    <span class="post-meta-divider">|</span>
    <span id="busuanzi_container_site_uv">总访客<span id="busuanzi_value_site_uv"></span>人</span>
{% endif %}

效果如下图：

````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````

参考文章：Hexo-NexT配置超炫网页效果

-------------本文结束感谢您的阅读-------------