我的 hexo next 博客搭建

[TOC]

参考链接

3.9 教程
Next主题美化：https://siriusq.top/Next%E4%B8%BB%E9%A2%98%E7%BE%8E%E5%8C%96
好评: https://me.idealli.com/post/e8d13fc.html

hexo 安装

npm install -g hexo-cli

# 检查安装是否成功：
hexo version

初始化 hexo

hexo init
npm install eslint@4.x babel-eslint@8 --save-dev

npm install

启动本地服务器

hexo s

浏览器访问网址：

http://localhost:4000/

部署到远端 github

安装 hexo-deployer-git 插件

1	npm install hexo-deployer-git --save

需要设置文件：特别关键
修改 _config.yml（在站点目录下）。文件末尾修改为

# 部署到 github 远端
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/qliugithub/qliugithub.github.io.git
  branch: master

推送到GithubPages

1 2	hexo g hexo d

至此框架就搭好了

`next` 主题

主题下载

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

更改站点配置文件`_config.yml` 的 `theme` 字段，为主题文件夹的名称：

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

更新到远端

1	hexo clean & hexo g & hexo d

设置语言

编辑站点配置文件，将 language 设置成你所需要的语言。建议明确设置你所需要的语言，例如选用简体中文，配置如下：

1	language: zh-Hans

设置菜单

编辑主题配置文件，修改以下内容：
- 设定菜单内容，对应的字段是 menu。菜单内容的设置格式是：item name: link。其中 item name 是一个名称，这个名称并不直接显示在页面上，她将用于匹配图标以及翻译

下载

1 2	hexo init npm install --save core-js@^3

设置语言

更改站点配置文件`_config.yml` 的 `theme` 字段，为主题文件夹的名称：

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

设置名称与语言

# Site
title: qliu's blog
subtitle: 二货潜不学习
description: 就是不学习
keywords:
author: 不学生物的二货潜
language: zh-CN
timezone:

1563440780399

设置菜单

编辑 主题配置文件
设置菜单项的显示文本。在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用这个名称查找对应的语言翻译，并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml（{language} 为你所使用的语言）。

以简体中文为例，若你需要添加一个菜单项，比如 something。那么就需要修改对应的翻译文件languages/zh-CN.yml，在 menu 字段下添加一项：

menu:
  home: / || home # 第二个home 表示对应的图标
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

设置头像

把图片放入 themes/next/source/images 下
打开themes/next/_config.yml文件，搜索 Sidebar Avatar 关键字
设置为 url: /images/epigenetics.png

1563441918651

友情链接

打开 themes/next/_config.yml 文件,搜索关键字social ,然后添加社交站点名称与地址即可。

social:
  GitHub: https://github.com/qliugithub || github
  #E-Mail: mailto:yourname@gmail.com || envelope
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  Twitter: https://twitter.com/BioQliu || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype
  简书: https://www.jianshu.com/u/ab6dcc5b9d97 ||  car

友情链接图标

参考链接：https://www.jianshu.com/p/efbeddc5eb19
图标库：http://fontawesome.dashgame.com/

# 打开主题配置文件themes/next/_config.yml，搜索social_icons:,在图标库找自己喜欢的小图标，并将名字复制在如下位置，保存即可
# http://fontawesome.dashgame.com/

social_icons:
  enable: true
  icons_only: false
  transition: false
  Github: github
  简书: car
  Twitter: twitter

点击页面浮出文字

①、鼠标特效很简单，打开\themes\next\layout\_layout.swig文件,在末尾< /body>前添加如下代码：

  <script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
   $("body").click(function(e) {
       var a = new Array("我", "真的", "不", "不喜欢", "生物", "不做实验", "不当咸鱼");
       var $i = $("<span/>").text(a[a_idx]);
       a_idx = (a_idx + 1) % a.length;
       var x = e.pageX,
       y = e.pageY;
       $i.css({
           "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
           "top": y - 20,
           "left": x,
           "position": "absolute",
           "font-weight": "bold",
           "color": "#ff6651"
       });
       $("body").append($i);
       $i.animate({
           "top": y - 180,
           "opacity": 0
       },
       1500,
       function() {
           $i.remove();
       });
   });
});
    </script>

添加萌萌哒

# 安装插件
# https://juejin.im/post/5bebfe51e51d45332a456de0#heading-27
npm install --save hexo-helper-live2d

# 我选择 hijiki

# 将以下代码添加到根目录站点配置文件`_config.yml，修改<你喜欢的模型名字>
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-hijiki
  display:
    position: right
    width: 15
    height: 30
  mobile:
    show: true

炫酷动态背景

参考链接：https://blog.csdn.net/sunshine940326/article/details/69933696
添加修改代码next/layout/_layout.swig在</body>之前加上

1
2
3

{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

在菜单中添加链接。编辑next\_config.yml文件
主题配置文件中找到canvas_nest，设置成ture

1	canvas_nest: ture

在网站底部加上访问量

参考链接：https://chrischen0405.github.io/2018/09/11/post20180911/

打开themes/next/layout/_partial/footer.swig文件,在copyright前加入以下代码：

1	<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

一般显示站点访问量在页脚，所以我们选择在footer.swig中添加标签，同时我们还可以通过修改主题配置来方便选择是否显示访问量，步骤如下：首先，我们在next主题下的_config.yml中加入以下配置：
1
2
# visitors count
counter: true

之后可以更改counter的值为false来隐藏页脚的访问量统计，然后，我们在themes/next/layout/_partial/footer.swig中添加以下代码：

{% if theme.footer.counter %}
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <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 3.9以前报废：新链接 https://github.com/theme-next/hexo-symbols-count-time
3.9 版本

1	npm install hexo-symbols-count-time --save

站点下 _config.yml 添加
- Activate this plugin in hexo’s _config.yml (which locates in the root dir of your blog) by enabled any option:
1
2
3
4
5
6
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true
exclude_codeblock: false

next 主题下 _config.yml 添加

symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275
  suffix: mins.

RSS

参考链接：https://juejin.im/post/5c6d20b151882562934c9962#heading-42
在Hexo根目录，安装插件运行如下命令：

1	npm install --save hexo-generator-feed

在站点配置文件_config.yml中，添加如下内容：

1
2
3

# Extensions
## Plugins: https://hexo.io/plugins/
plugins: hexo-generate-feed

然后再主题配置文件中配置rss
1
rss: /atom.xml

添加评论模块

来必利 https://www.livere.com/my_Livere

参考链接：
点击上方的安装，选择免费的city版本。
打开主题目录下的/themes/next/_config.yml配置文件，定位到livere_uid字段，粘贴上刚刚复制的UID

打开 next 主题下 _config.yml文件，定位到 livere_uid，添加下列信息

MTAyMC80NTM4OS8yMTkwMQ


#### 显示当前浏览进度

- 修改`themes/*/_config.yml`，把 false 改为` true：`

  ```shell
  # Back to top in sidebar
  b2t: true

  # Scroll percent label in b2t button
  scrollpercent: true

链接：https://juejin.im/post/5bebfe51e51d45332a456de0

添加网站底部跳动的心

1.在主题配置文件中（themes/*/_config.yml）,更改footer;
1
垃圾功能毁我重来。

页脚统计信息

NexT 6.x.x 直接添加了统计的信息，直接将next主题文件夹中的 _config.yml 中 busuanzi 统计打开即可。

搜索功能

安装插件hexo-generator-searchdb，如下：
1
npm install hexo-generator-searchdb --save
编辑 站点配置文件，新增以下内容到任意位置，如下：

1	search: path: search.xml field: post format: html limit: 10000

编辑 主题配置文件，启用本地搜索功能，如下：

1	# Local searchlocal_search: enable: true

添加标签页面

新建页面

1 2	hexo new page tags # INFO Created: D:\swRJ\hexo_1\source\tags\index.md

设置页面类型，编辑刚新建的页面，将页面的类型设置为 tags ，主题将自动为这个页面显示标签云
1
2
3
4
title: 标签
date: 2019-07-18 20:46:32
type: "tags"
---
如果有集成评论服务，页面也会带有评论。若需要关闭的话，请添加字段 comments 并将值设置为 false，如：
1
2
3
4
5
title: 标签
date: 2019-07-18 20:46:32
type: "tags
comments: false
---

添加分类

hexo new page categories
# INFO  Created: D:\swRJ\hexo_1\source\categories\index.md

# 设置页面类型，编辑刚新建的页面，将页面的类型设置为 categories
title: 分类
date: 2019-07-18 20:51:49
type: "categories"
---

新建页面的模板

参考链接：https://linlif.github.io/2017/05/27/Hexo%E4%BD%BF%E7%94%A8%E6%94%BB%E7%95%A5-%E6%B7%BB%E5%8A%A0%E5%88%86%E7%B1%BB%E5%8F%8A%E6%A0%87%E7%AD%BE/
主目录的 scaffolds目录下，是新建页面的模板，执行新建命令时，是根据这里的模板页来完成的，所以可以在这里根据你自己的需求添加一些默认值。
所以我们可以打开scaffolds/post.md文件，在tages:上面加入categories:,保存后，之后执行hexo new 文章名命令生成的文件，页面里就有categories:项了

---
title: {{ title }}
date: {{ date }}
categories:
tags:
---

翻页设置

共有两处，用于控制每一页显示多少篇博文

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 12
  order_by: -date

# Pagination
## Set per_page to 0 to disable pagination
per_page: 12
pagination_dir: page

per_page:后设置博文数量，0代表不翻页全部平铺显示

代码块高亮主题

Next主题内置了tomorrow代码高亮主题，一共有五个，可以去Tomorrow查看预览效果，在下面的highlight_theme:中改成自己想要的即可

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

博文压缩

参考来源：https://www.jianshu.com/p/393d067dba8d

打开themes/next/_config.yml文件, 搜索 auto_excerpt, 将 false 改为 true

# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true
  length: 150

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

# 编辑 themes/next/layout/_macro/post.swig，搜索rel="tag">#，将 # 换成<i class="fa fa-tag"></i>

# 修改下面为
        <div class="post-tags">
          {% for tag in post.tags %}
            <a href="{{ url_for(tag.path) }}" rel="tag">{{ tag_indicate }} {{ tag.name }}</a>
          {% endfor %}
        </div>
a

<div class="post-tags">
    {% for tag in post.tags %}
       <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
    {% endfor %}
</div>

分类页面添加年分类卡

找到 next 主题下的\layout\category.swig文件，查找for post in page.posts可以看到如下代码：

1
2
3

{% for post in page.posts %}
  {{ post_template.render(post) }}
{% endfor %}

选中这三行，修改为:

{% for post in page.posts %}

{# Show year #}
{% set year %}
{% set post.year = date(post.date, 'YYYY') %}

{% if post.year !== year %}
  {% set year = post.year %}
  <div class="collection-title">
    <h2 class="archive-year motion-element" id="archive-year-{{ year }}">{{ year }}</h2>
  </div>
{% endif %}
{# endshow #}

  {{ post_template.render(post) }}
{% endfor %}

然后在文件末尾加上如下代码：
1
2

写文

1
hexo new post "my first post"

---
title: {{ title }}
date: {{ date }}
categories:
tags:
---

参考链接

hexo 安装

初始化 hexo

启动本地服务器

浏览器访问网址：

部署到远端 github

至此框架就搭好了

next 主题

主题下载

更改站点配置文件_config.yml 的 theme 字段，为主题文件夹的名称：

更新到远端

设置 语言

设置 菜单

下载

设置 语言

更改站点配置文件_config.yml 的 theme 字段，为主题文件夹的名称：

设置名称 与语言

设置 菜单

设置 头像

友情链接

点击页面浮出文字

添加萌萌哒

炫酷动态背景

在网站底部加上访问量

统计功能

RSS

添加评论模块

添加网站底部跳动的心

页脚统计信息

搜索功能

添加标签页面

添加分类

新建页面的模板

翻页设置

代码块高亮主题

博文压缩

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

分类页面添加年分类卡

写文

`next` 主题

更改站点配置文件`_config.yml` 的 `theme` 字段，为主题文件夹的名称：

设置语言

设置菜单

设置语言

更改站点配置文件`_config.yml` 的 `theme` 字段，为主题文件夹的名称：

设置名称与语言

设置菜单

设置头像

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