Hexo 博客之简要美化

写在前面

这是关于 Hexo 博客三篇博文的第二篇。关于 Hexo 博客 NexT 主题的简要美化和一些简单插件的添加使用。后续可能还会继续添加更新其他功能的操作说明。

美化

添加 fork me on github

实现效果

具体实现方法

点击这里或者这里挑选自己喜欢的样式，并复制代码。例如，我是复制如下代码：

然后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中(放在

的下面)，并把href改为你的 github 地址

在每篇文章末尾添加「致谢」

实现效果

具体实现方法

在路径 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：


    {% if not is_index %}
        -------------　　　　本文结束　　感谢您的阅读　　　　-------------
    {% endif %}

接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后， post-footer 之前添加如下画红色部分代码（post-footer之前两个DIV）：

代码如下：


  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}

然后打开主题配置文件（_config.yml)，在末尾添加：

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

完成以上设置之后，在每篇文章之后都会添加如上效果图的样子。

设置侧边栏社交小图标

实现效果

具体实现方法
6.0 NexT版本之后，主题配置文件中的social社交地址后面跟这种格式即可添加小图标，为Font-Awesome，但必须要在前面加fa。需要什么图标在Font-Awesome官网查询对应的class并添加即可。

在网站底部加上访问量

实现效果

具体实现方法
打开\themes\next\layout\_partials\footer.swig文件,在copyright前加上画红线这句话：

代码如下：

然后再合适的位置添加显示统计的代码，如图：

代码如下：



  本站访客数:

在这里有两中不同计算方式的统计代码：

pv的方式，单个用户连续点击n篇文章，记录n次访问量


    本站总访问量次

uv的方式，单个用户连续点击n篇文章，只记录1次访客数


  本站总访问量次

添加之后再执行hexo d -g，然后再刷新页面就能看到效果

网站底部字数统计

实现效果

具体实现方法
切换到根目录下，然后运行如下代码

$ npm install hexo-wordcount --save

然后在/themes/next/layout/_partials/footer.swig开始加上：

代码如下：


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

隐藏网页底部 powered By Hexo

打开themes/next/layout/_partials/footer.swig,使用

隐藏之间的代码即可，或者直接删除。位置如图：

文章加密访问

实现效果

具体实现方法
打开themes->next->layout->_partials->head.swig文件，在以下位置插入这样一段代码：

代码如下：

然后在要加密的文章上添加password属性，后面则是跟想要设置的密码，类似这样：

就可以达到上面 gif 的效果了

为博客添加小狗插件

实现效果

具体实现方法
在终端切换到你的博客的路径里，然后输入如下代码：

npm install -save hexo-helper-live2d

然后在在 hexo 的 _config.yml中添加参数：（具体配置可以看官方文档）

# 小狗插件
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-wanko
  display:
    position: left
    width: 75
    height: 100
  mobile:
    show: true

添加 DaoVoice 在线联系

实现效果

具体实现方法

首先在 daovoice 注册账号,邀请码是0f81ff2f，注册完成后会得到一个 app_id :

记下这个 app_id的值，然后打开/themes/next/layout/_partials/head.swig,写下如下代码：

{% if theme.daovoice %}
  
{% endif %}

接着打开主题配置文件，在最后写下如下代码：

# Online contact 
daovoice: true
daovoice_app_id: 这里填你的刚才获得的 app_id

重新 hexo g ，hexo s 就能看到效果了。

安装成功后可以在DaoVoice 控制台上的聊天设置里设置聊天窗口样式

博文显示缩略

实现效果

具体实现方法
在博文想要开始缩略的地方填入

即可在这个地方分割

修改边栏头像为圆形框

实现效果

具体实现方法
打开位于 themes/next/source/css/_common/components/sidebar/sidebar-author.syl 的文件，修改如下：

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
  opacity: hexo-config('avatar.opacity') is a 'unit' ? hexo-config('avatar.opacity') : 1;
  
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

扩展：
继续添加如下代码可以让鼠标指向头像的时候，让头像框旋转

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
  opacity: hexo-config('avatar.opacity') is a 'unit' ? hexo-config('avatar.opacity') : 1;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  transition: 1.4s all; 
}
.site-author-image:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -transform: rotate(360deg);
}

右下角显示当前浏览百分比

实现效果

具体实现方法
打开 themes/next/_config.yml ，搜索关键字 scrollpercent 。把 false 改为 true。

边栏添加背景图和推荐阅读

实现效果

具体实现方法

背景图实现方法：
找到themes\next\source\css\_custom\custom.styl文件
添加如下代码：

.sidebar {
 background: url([https://ws2.sinaimg.cn/large/006tKfTcly1fq2wrm6g3cj309i0hq749.jpg](https://ws2.sinaimg.cn/large/006tKfTcly1fq2wrm6g3cj309i0hq749.jpg "https://ws2.sinaimg.cn/large/006tKfTcly1fq2wrm6g3cj309i0hq749.jpg")) no-repeat !important;
 background-size: cover !important;
 position: fixed !important;
 right: 0 !important;
 top: 0 !important;
 bottom: 0 !important;
}

推荐阅读实现方法：
在主题配置文件中将# Blog rolls做如下配置即可

# Blog rolls
links_icon: link
links_title: 推荐阅读
#links_layout: block
links_layout: inline
links:
  #Title: http://example.com/
  MDN web docs: https://developer.mozilla.org/zh-CN/
  Web前端导航: http://www.alloyteam.com/nav/
  Vue.js 文档: https://cn.vuejs.org/v2/guide/
  Google 前端开发基础: http://wf.uisdc.com/cn/

添加网易云音乐播放器

实现效果

具体实现方法
在网易云音乐网页版中登录并创建歌单，然后选择生成外联播放器

找到下面的HTML代码，复制到next\.layout\_custom\sidebar.swig里面，并细微的进行修改代码即可

我的播放器代码如下：
只需要修改auto=1之前的地址即可

添加来必力评论模块

实现效果

具体实现方法
先到来 必力官网 注册账户
经过一系列设置之后，在代码管理里面找到自己的uid

然后在主题配置文件中设置来必力的uid即可

livere_uid: "MTAyxxxxxxNDk1Ng=="  //填写来必力注册之后的uid即可

设置博文置顶

实现效果

具体实现方法
卸载原有的插件，安装另一个版本

$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

然后在需要置顶的文章的标题栏中加上top: true即可。比如下面这篇文章：

这个时候置顶功能已经实现了，我们再编辑next/layout/_macro 目录下的post.swig文件，定位到

标签下，插入如下代码即可达到之前图中的效果

代码

          {% if post.top %}
            
            置顶
            |
          {% endif %}

添加 JavaScript 3D library 背景效果

实现效果

具体实现方法
参考 JavaScript 3D library - Github

$ cd themes/next
$ ls

$ git clone https://github.com/theme-next/theme-next-three source/lib/three

在 NexT _config.yml当中设置即可

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: false
# canvas_lines
canvas_lines: true
# canvas_sphere
canvas_sphere: false

参考

NexT 主题个性化教程：打造炫酷网站

Hexo 博客 之 简要美化

写在前面

美化

添加 fork me on github

在每篇文章末尾添加「致谢」

设置侧边栏社交小图标

在网站底部加上访问量

网站底部字数统计

隐藏网页底部 powered By Hexo

文章加密访问

为博客添加小狗插件

添加 DaoVoice 在线联系

博文显示缩略

修改边栏头像为圆形框

右下角显示当前浏览百分比

边栏添加背景图 和 推荐阅读

添加网易云音乐播放器

添加来必力评论模块

设置博文置顶

添加 JavaScript 3D library 背景效果

参考

你可能感兴趣的:(Hexo 博客 之 简要美化)

Hexo 博客之简要美化

边栏添加背景图和推荐阅读

你可能感兴趣的:(Hexo 博客之简要美化)