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

前言

文|芒果浩明

博客预览

相关文章

Hexo+Pages静态博客-搭建部署篇(同时部署github和coding)

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

  1. 安装插件

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

$ npm install --save hexo-generator-feed
2. 修改主题配置文件 打开**主题配置**_config.yml文件,在末尾处添加如下配置
#插件配置
plugins: hexo-generator-feed 
3. 修改**站点配置**_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
4. 重新生成检测 重新执行hexo g命令后,会发现在 ./public 文件夹中看到 atom.xml 文件。然后启动服务器查看是否有效,之后再部署到 Github 中 ## 添加「标签」页面 1. 新建页面 在终端窗口下,定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面,命名为 tags :
$ cd your-hexo-site
$ hexo new page tags
2. 设置页面类型 输入上述命令后,在blog\source\tags目录产生一个index.md页面。编辑刚新建的页面,将页面的类型设置为 tags ,主题将自动为这个页面显示标签云。页面内容如下:
title: tags
date: 2017-10-06 19:29:21
type: "tags"
layout: "tags"
3. 修改主题配置 在菜单中添加链接。编辑 主题配置文件 , 添加 tags 到 menu 中,如下:
menu:
  home: /
  archives: /archives
  tags: /tags
![next_tags](https://github.com/IHaoMing/MarkdownImage/blob/master/next/next_tags.png?raw=true) ## 添加「分类」页面 分类页面的添加与标签页步骤相同 1. 新建页面 在终端窗口下,定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面,命名为 tags :
$ cd your-hexo-site
$ hexo new page categories
2. 设置页面类型 输入上述命令后,在blog\source\categories目录产生一个index.md页面。编辑刚新建的页面,将页面的类型设置为 tags ,主题将自动为这个页面显示标签云。页面内容如下:
title: categories
date: 2017-10-06 19:29:21
type: "categories"
layout: "categories"
3. 修改主题配置 在菜单中添加链接。编辑 主题配置文件 , 添加 categories 到 menu 中,如下:
menu:
  home: /
  archives: /archives
  categories: /categories
4. 新建文章分类和标签的写法
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>

站点建立时间

这个时间将在站点的底部显示,例如 © 2013 - 2015。 编辑 主题配置文件,新增字段 since。

配置示例

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 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清一下缓存再重新生成
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/mango_haoming/article/details/78207534
个人分类: web
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭