Hexo+Pages静态博客-Next主题篇

2017-10-11 本文已影响305人芒果浩明

前言

文|芒果浩明

Hexo+Pages搭建好博客之后，如果你不喜欢Hexo默认的主题，可以更换不同的主题，主题传送门：Themes 我自己使用的是Next主题，可以在blog目录中的themes文件夹中查看你自己主题是什么。现在把默认主题更改成Next主题，在blog目录中（就是命令行的位置处于blog目录）打开命令行输入：

git clone https://github.com/iissnan/hexo-theme-next themes/next

这是将Next主题下载到blog目录的themes主题下的next文件夹中。打开站点的_config.yml配置文件，修改主题为next

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

主题的基本配置

设置「RSS」

rss

安装插件

在站点的目录下执行下面的命令安装

$ npm install --save hexo-generator-feed

修改主题配置文件

打开主题配置_config.yml文件,在末尾处添加如下配置

#插件配置
plugins: hexo-generator-feed

修改站点配置_config.yml文件

# 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 g命令后，会发现在 ./public 文件夹中看到 atom.xml 文件。然后启动服务器查看是否有效，之后再部署到 Github 中

添加「标签」页面

新建页面

在终端窗口下，定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面，命名为 tags ：

$ cd your-hexo-site
$ hexo new page tags

设置页面类型

输入上述命令后，在blog\source\tags目录产生一个index.md页面。编辑刚新建的页面，将页面的类型设置为 tags ，主题将自动为这个页面显示标签云。页面内容如下：

title: tags
date: 2017-10-06 19:29:21
type: "tags"
layout: "tags"

修改主题配置

在菜单中添加链接。编辑主题配置文件，添加 tags 到 menu 中，如下:

menu:
  home: /
  archives: /archives
  tags: /tags

next_tags

添加「分类」页面

分类页面的添加与标签页步骤相同

新建页面

在终端窗口下，定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面，命名为 tags ：

$ cd your-hexo-site
$ hexo new page categories

设置页面类型

输入上述命令后，在blog\source\categories目录产生一个index.md页面。编辑刚新建的页面，将页面的类型设置为 tags ，主题将自动为这个页面显示标签云。页面内容如下：

title: categories
date: 2017-10-06 19:29:21
type: "categories"
layout: "categories"

修改主题配置

在菜单中添加链接。编辑主题配置文件，添加 categories 到 menu 中，如下:

menu:
  home: /
  archives: /archives
  categories: /categories

新建文章分类和标签的写法

title: Hexo+Pages静态博客-搭建部署篇（同时部署github和coding)
date: 2017-10-09 21:32:21
tags: [hexo,github,coding,博客]#多个标签用英文逗号隔开
categories: web

next_categories

设置「字体」

打开\themes\next\source\css\ _variables\base.styl文件，将$font-size-base改成16px，如下所示：

$font-size-base =16px

设置「代码高亮主题」

NexT 使用 Tomorrow Theme 作为代码高亮，共有5款主题供你选择。 NexT 默认使用的是白色的 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties：

更改 highlight_theme 字段，将其值设定成你所喜爱的高亮主题，例如：

# Code Highlight theme
# Available value: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

侧边栏社交链接

侧栏社交链接的修改包含两个部分，第一是链接，第二是链接图标。两者配置均在主题配置文件中。

链接放置在 social 字段下，一行一个链接。其键值格式是显示文本: 链接地址。

配置示例

# Social links
social:
  GitHub: https://github.com/your-user-name
  Twitter: https://twitter.com/your-user-name
  微博: http://weibo.com/your-user-name
  豆瓣: http://douban.com/people/your-user-name
  知乎: http://www.zhihu.com/people/your-user-name
  # 等等

设定链接的图标，对应的字段是 social_icons。其键值格式是匹配键: Font Awesome 图标名称，匹配键与上一步所配置的链接的显示文本相同（大小写严格匹配），图标名称是 Font Awesome 图标的名字（不必带 fa- 前缀）。 enable 选项用于控制是否显示图标，你可以设置成 false 来去掉图标。

配置示例
# Social Icons
social_icons:
  enable: true
  # Icon Mappings
  GitHub: github
  Twitter: twitter
  微博: weibo

设置友情链接

编辑主题配置文件添加：

友情链接配置示例

# title
links_title: Links
links:
  MacTalk: http://macshuo.com/
  Title: http://example.com/

腾讯公益404页面

腾讯公益404页面，寻找丢失儿童，让大家一起关注此项公益事业！效果如下 http://www.ixirong.com/404.html

使用方法，新建 404.html 页面，放到主题的 source 目录下，内容如下：

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到我的主页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

站点建立时间

配置示例

since: 2013

订阅微信公众号

在每篇文章的末尾显示微信公众号二维码，扫一扫，轻松订阅博客。

在微信公众号平台下载您的二维码，并将它存放于博客source/uploads/目录下。

然后编辑主题配置文件，如下：

配置示例

# Wechat Subscriber
wechat_subscriber:
  enabled: true
  qcode: /uploads/wechat-qcode.jpg
  description: 欢迎您扫一扫上面的微信公众号，订阅我的博客！

设置「动画效果」

NexT 默认开启动画效果，效果使用 JavaScript 编写，因此需要等待 JavaScript 脚本完全加载完毕后才会显示内容。如果您比较在乎速度，可以将设置此字段的值为 false 来关闭动画。

编辑主题配置文件，搜索 use_motion，根据您的需求设置值为 true 或者 false 即可：

use_motion: true  # 开启动画效果
use_motion: false # 关闭动画效果

设置「背景动画」

next_bj

NexT 自带两种背景动画效果

编辑主题配置文件，搜索 canvas_nest 或 three_waves，根据您的需求设置值为 true 或者 false 即可：

注意： three_waves 在版本 5.1.1 中引入。只能同时开启一种背景动画效果。

canvas_nest 配置示例
# canvas_nest
canvas_nest: true //开启动画
canvas_nest: false //关闭动画

three_waves 配置示例

# three_waves
three_waves: true //开启动画
three_waves: false //关闭动画

主题的个性化配置

实现点击出现桃心效果

next_mouse

在网址输入如下

http://7u2ss1.com1.z0.glb.clouddn.com/love.js

然后将里面的代码copy一下，新建love.js文件并且将代码复制进去，然后保存。将love.js文件放到路径/themes/next/source/js/src里面，然后打开\themes\next\layout_layout.swig文件,在末尾（在前面引用会出现找不到的bug）添加以下代码：

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

修改文章内链接文本样式

修改文件 themes\next\source\css_common\components\post\post.styl ，在末尾添加如下css样式，：

// 文章内链接文本样式
.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;
  }
}
其中选择 .post-body 是为了不影响标题，选择 p 是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。

修改文章底部的那个带#号的标签

修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成

<i class="fa fa-tag"></i>

在每篇文章末尾统一添加“本文结束”标记

next_post_end

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

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

接着打开\themes\next\layout_macro\post.swig文件，在post-body 之后， post-footer 之前添加如下横线中代码

{#####################}
{### END POST BODY ###}
{#####################}

-------------------------------------------------
    <div>
      {% if not is_index %}
        {% include 'passage-end-tag.swig' %}
      {% endif %}
    </div>
-------------------------------------------------   
    
    {% if theme.wechat_subscriber.enabled and not is_index %}
      <div>
        {% include 'wechat-subscriber.swig' %}
      </div>
    {% endif %}

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

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

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

修改作者头像并旋转

默认头像是方正的

next_favator

打开\themes\next\source\css_common\components\sidebar\sidebar-author.styl，在里面添加如下代码：

.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;

  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
 

  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}

img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

主页文章添加阴影效果

next_shadow

打开\themes\next\source\css_custom\custom.styl,向里面加入：

// 主页文章添加阴影效果
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

在网站底部加上访问量

next_cpyright

打开\themes\next\layout_partials\footer.swig文件,在copyright前加上画红线这句话：

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

再添加横线中的代码

<span title="{{ __('post.totalcount') }}">{#
    #}{{ totalcount(site, '0,0.0a') }}{#
  #}</span>
  {% endif %}
  -->
</div>


{% if theme.footer.powered %}

--------------------------------------------------------
<div class="powered-by">
<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
</div>
--------------------------------------------------------

<!--
  <div class="powered-by">{#
  #}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{#
#}</div>
{% endif %}

{% if theme.footer.powered and theme.footer.theme.enable %}

网站底部字数统计

next_cpyright

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

$ 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>

同时把下面的注释掉

<!--
  {% if theme.post_wordcount.totalcount %}
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    {% if theme.post_wordcount.item_text %}
      <span class="post-meta-item-text">{{ __('post.totalcount') }}:</span>
    {% endif %}
    <span title="{{ __('post.totalcount') }}">{#
    #}{{ totalcount(site, '0,0.0a') }}{#
  #}</span>
  {% endif %}
  -->

添加 README.md 文件

github上项目下一般都有一个 README.md 文件，但是使用 hexo 部署到仓库后，项目下是没有 README.md 文件的，或者说自己添加玩之后会发现里面的内容乱码，这是因为hexo渲染了。

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

skip_render: README.md

这样设置后README.md就能正常显示了。

实现统计功能

next_count

在根目录下安装 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

添加顶部加载条

打开/themes/next/layout/_partials/head.swig文件，添加横线框上的代码

<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="{{ theme.android_chrome_color }}">

-------------------------------------------------------------------
<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">
-------------------------------------------------------------------

隐藏网页底部powered By Hexo / 强力驱动和Next版本信息

next_cpyright

打开themes/next/layout/_partials/footer.swig,使用””隐藏之间的代码即可

<!--
  <div class="powered-by">{#
  #}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{#
#}</div>
{% endif %}

{% if theme.footer.powered and theme.footer.theme.enable %}
  <span class="post-meta-divider">|</span>
{% endif %}

{% if theme.footer.theme.enable %}
  <div class="theme-info">{#
  #}{{ __('footer.theme') }} — {#
  #}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">{#
    #}NexT.{{ theme.scheme }}{#
  #}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}</div>
{% endif %}

{% if theme.footer.custom_text %}
  <div class="footer-custom">{#
  #}{{ theme.footer.custom_text }}{#
#}</div>
{% endif %}
-->

添加jiathis分享

编辑主题配置文件，添加/修改字段 jiathis，值为 true。

JiaThis 内容分享服务配置示例

# JiaThis 分享服务
jiathis: true

注意的点

冒号后面一定要有空格
添加分类和标签可能不显示,需要添加layout: "tags"设置

title: tags
date: 2017-10-06 19:29:21
type: "tags"
layout: "tags"

rss订阅功能安装浏览器rss订阅插件测试
测试发现不生效可以执行hexo clean清一下缓存再重新生成

Hexo+Pages静态博客-Next主题篇

前言

主题的基本配置

设置「RSS」

添加「标签」页面

添加「分类」页面

设置「字体」

设置「代码高亮主题」

侧边栏社交链接

设置友情链接

腾讯公益404页面

站点建立时间

订阅微信公众号

设置「动画效果」

设置「背景动画」

主题的个性化配置

实现点击出现桃心效果

修改文章内链接文本样式

修改文章底部的那个带#号的标签

在每篇文章末尾统一添加“本文结束”标记

修改作者头像并旋转

主页文章添加阴影效果

在网站底部加上访问量

网站底部字数统计

添加 README.md 文件

实现统计功能

添加顶部加载条

隐藏网页底部powered By Hexo / 强力驱动和Next版本信息

添加jiathis分享

注意的点

猜你喜欢

热点阅读