安装并优化 next 主题

最新推荐文章于 2021-11-06 20:12:57 发布

日月忽其不淹兮

最新推荐文章于 2021-11-06 20:12:57 发布

阅读量759

点赞数 4

文章标签： Hexo NexT

本文链接：https://blog.csdn.net/forever_008/article/details/113524039

版权

前面已经搭建好了个人博客，接下来就是装饰一下自己的网站，毕竟是属于自己的地盘，还是想让它精美一些，一方面自己能看着舒服，给自己坚持写博客添加一些动力；另一方面，精美的博客界面是给读者的第一印象，好的界面可以吸引更多的人访问，下面介绍 NexT 主题（GitHub 评分最高）

本文博客地址

一、安装 NexT 主题

有两种方式可以进行安装，一种是安装稳定版本（已经不再维护），一种是安装最新版本，这里我们安装最新版本，执行下面的命令：
```
$ cd your-local-blog-site
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
```
完成以后，打开 /themes 文件夹，可以看到其中有 next 文件夹，这样主题就安装成功了

二、启用主题

首先说明，现在有两个配置文件，名称都是 _config.yml ；其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。

为了描述方便，在以下说明中，将前者称为 站点配置文件，后者称为 主题配置文件。

打开 站点配置文件，找到 theme 字段，并将其值更改为 next

验证：

hexo clean # 清除缓存
hexo g
hexo s
# 可以看到： Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
# 打开对应的网址，就可以看到主题已经变成 next 了

推送到远程：【后面的操作，只要是推送到远程仓库，都可以执行下面的命令】
```
hexo clean # 清除缓存，选做
hexo g -d
```
这样就可以在自己的站点看到安装好的 next 主题了【有可能需要登上半分钟，并清除浏览器缓存】

三、远程仓库上备份本地文件【可选】

因为站点实际上是部署在本地的，现在在 GitHub 上只有一些静态文件，一旦本地文件丢失挥着损坏，就要重新搭建网站，甚至文章也会丢失，为了在这种情况发生的情况下能够快速恢复本地站点，可以在 GitHub 上新建分支，用于备份本地文件
假设之前我们的本地站点文件夹为 blog ，在其他合适的位置新建文件夹 hexo，将GitHub远程仓库复制到本地
```
git clone your-repo hexo 
```
- 删除除了版本控制 .git 之外的所有文件
```
cd hexo
rm -r *
```
- 将 blog 文件夹下的所有文件复制到 hexo 文件夹
- 如果使用的主题是从Github克隆的，那么使用命令删除它的Git文件（以next主题为例）,否则无法将主题文件push
```
rm -r themes/next/.git*
```
- 配置 GitHub
  1. 创建新分支 hexo
```
git checkout -b hexo
```
  2. 推送到 hexo 分支
```
git add . # 保存到暂存区
git commit -m "创建 hexo 分支"
git push --set-upstream origin hexo
```
- 现在原来的 blog 文件夹就可以删除了，当然最好先修改名字备份一下，否则出现意外就不好了
以后的更新操作：
- 更新到 master/main 分支，用来更新站点
```
hexo g -d
```
- 备份到 hexo 分支，更新远程仓库的本地备份
```
git add .
git commit -m "备注"
git push
```

四、优化 NexT 主题

首先说一下调试问题，可以使用下面的命令查看本地修改的效果
```
hexo clean
hexo g
hexo s
```
其次，下面的修改都是修改主题配置文件

1) 修改 `Schemes`

有四种可以选择，选择自己喜欢的即可

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

2) 设置站点 icon

下载地址：iconfont
将下载的 icon 放置在 /themes/next/source/img/ 文件夹中
修改主题配置文件中 favicon 中的内容，如果是直接替换原来的文件则不需要修改

3) 设置菜单栏

编辑主题配置文件，修改 menu 中的内容，将想要展示的内容取消注释

menu:
  home: /
  archives: /archives
  #about: /about
  categories: /categories
  tags: /tags
  #commonweal: /404.html

手动创建页面

# 在站点的根目录
# 下面分别创建 about categories tags 页面
hexo new page about
hexo new page categories
hexo new page tags

修改 type
- 创建页面之后，在 source/ 目录中可以看到新创建的页面
- 修改其中的 index.md 文件，增加：
```
# 下面是 tags 页面的，categories 页面则是 categories
type: tags
```
这样修改之后，可以在本地运行并验证一下，可以看到本地的博客菜单栏中，可以显示添加的页面

添加公益404，方法跟上面一样，只不过在 index.md 文件中添加下面的代码：

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

4) 配置回到顶部按钮

修改主题配置文件，将back2top的enable设置为true即可，边栏和滚动百分比可以按照需求自行添加。

5) 设置已读进度条

将 reading_progress 的enable设置为true即可，位置颜色和高度都可以调整

6) 边角的 GitHub banner

在主题配置文件中修改 github_banner 字段

github_banner:
  enable: true
  permalink: https://github.com/code-wd
  title: Follow me on GitHub

7) 设置头像

编辑主题配置文件，修改字段 avatar ，值设置成头像的地址；通常图片放在 /themes/source/images/ 中
其中可以设置头像的形状，以及旋转动画

8）设置社交界面

编辑主题配置文件，修改social 字段，将想要展示的部分去除注释
在 social_icons中可以进行相关设置

9) 设置语言

打开 themes/next/languages/ 可以看到支持的语言
编辑站点配置文件，填入 language 字段，注意官网上给的简体中文是 zh-Hans 但是，实际上，需要按照自己 languages 文件夹中的方式命名

10) 打赏

首先，要将支付宝或者微信打赏的二维码下载下来，可以修剪一下，放在 /themes/next/source/images 文件夹中

修改主题配置文件：

reward_settings:
  # If true, reward will be displayed in every article by default.
  enable: true
  animation: false
  #comment: Donate comment here.

reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.jpg
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

11）代码样式

编辑主题配置文件，搜索 codeblock ，选择自己想要的代码样式即可

12) 评论功能

注册 LeanCloud 账号，创建一个应用，在这个应用的设置中可以看到关键信息
编辑主题配置文件，修改 valine 字段：

13) 添加背景动画

安装依赖，在 themes/next/ 文件夹下，执行：

git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

编辑主题配置文件，在文件的动画位置（找到 canvas_ribbon 就可以）添加下面的字段：

canvas_nest:
  enable: true    #开启canvas
  onmobile: true # 是否在移动站开启canvas
  color: '34,34,34' # 颜色值
  opacity: 0.5 # 数值 0~1 ，线条透明度
  zIndex: -1 # 背景叠层大小，-1代表放在文章的后面
  count: 200 # 线条数量

14) 添加本地搜索

在站点根目录中执行下面的命令：

npm install hexo-generator-searchdb --save

编辑站点配置文件，新增下面的内容

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

编辑主题配置文件，启动本地搜索功能
```
# Local search
local_search:
  enable: true
```

15) 添加本文结束标记

在 /themes/next/layout/_macro/ 文件夹中新建文件 passage-end-tag.swig，文件中写入：

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

在/themes/next/layout/_macro/ 中打开文件 post.swig ，在 post-body之后，post-footer 之前添加下面的代码：

<div>
      {% if not is_index %}
        {% include 'passage-end-tag.swig' %}
      {% endif %}
</div>

修改主题配置文件，在最后添加：
```
passage_end_tag:
  enabled: true
```
最终效果：

16) 修改背景图片以及博客整体样式

修改主题配置文件，找到 custom_file_path 字段，如下修改：

custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

在站点根目录的 source 文件夹下新建 _data 文件夹，并在其中新建 styles.styl 文件，配置如下：

//全局布局美化代码
body {
    background-image:url(/images/Background.jpg); //背景图片地址
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}


//博客内容透明化
//文章内容的透明度设置
.content-wrap {
  opacity: 0.85;
}

//侧边框的透明度设置
.sidebar {
  transition-duration: 0.4s;  
  opacity: 0.85;  // 透明度
  border-radius: 30px 30px 30px 30px; //边框圆角
}

// 侧边头像框内部
.sidebar-inner {
  background: var(--content-bg-color);
  border-radius: 30px 30px 30px 30px; //边框圆角
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12), 0 -1px 0.5px 0 rgba(0,0,0,0.09);
  box-sizing: border-box;
  color: var(--text-color);
  width: 240px;
  opacity: 0;
  box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
}

//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.85);
  border-radius: 0px 0px 30px 30px; //边框圆角
  box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
}

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.85;
}

//第一篇博客样式
.post-block {
  background-color: rgba(255, 255, 255, 1);
  margin-bottom: 24px;
  padding: 20px;
  border-radius: 0px 0px 30px 30px;
  box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
}

//除第一篇博客之外的博客样式
.post-block + .post-block {
  background-color: rgba(255, 255, 255, 1);
  //margin-top: 24px;
  margin-bottom: 24px;
  padding: 20px;
  border-radius: 30px 30px 30px 30px;
  box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
}

最终效果：

17) 增加字数统计

请参考这篇文章

18) 标签设置

修改文章底部的 # 标签：修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将其中的 # 换成<i class="fa fa-tag"></i>
标签云设置：
1. 安装插件：
```
npm install hexo-tag-cloud@^2.0.* --save
```
2. 配置插件

19) 添加 RSS

请参考文章，地址

20) 博文压缩

.md 文件转化为 html 文件之后会有很多空格，这个可以防止这些空格带来的性能的损失
安装 hexo-neat
```
npm install hexo-neat --save
```

配置：编辑 站点配置文件 ，在末尾加上下面的代码：

# hexo-neat
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
  enable: true
  exclude:
# 压缩css
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
# 压缩js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'
    - '**/clicklove.js'
    - '**/firework.js'

注意：可能会有部分插件压缩后报错，在exclude里面添加对应的文件就可以取消压缩了
感谢大佬：Next主题美化

21) 标签云

请看大佬博文

22) 修改 back2top 样式

安装依赖：
```
npm install hexo-cake-moon-menu --save
```

修改站点配置文件，添加下面的内容：

moon_menu:
  back2top:
    enable: true
    icon: fa fa-chevron-up
    func: back2top
    order: -1
  back2bottom:
    enable: true
    icon: fa fa-chevron-down
    func: back2bottom
    order: -2

修改主题配置文件，将其中的back2top 修改为 false
感谢大佬

23）加密功能

安装依赖
```
npm install hexo-blog-encrypt --save
```

使用方法：【文章开头添加】

---
title: your-blog-title
declare: true
toc: true
tags:
  - xxx
categories:
  - xxx
mathjax: true
+password: 
+abstract: 有东西被加密了，请输入密码查看
+message: 请输入密码
---

Reference

日月忽其不淹兮

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
安装并优化 next 主题

前面已经搭建好了个人博客，接下来就是装饰一下自己的网站，毕竟是属于自己的地盘，还是想让它精美一些，一方面自己能看着舒服，给自己坚持写博客添加一些动力；另一方面，精美的博客界面是给读者的第一印象，好的界面可以吸引更多的人访问，下面介绍 NexT 主题（GitHub 评分最高）本问博客地址一、安装 NexT 主题有两种方式可以进行安装，一种是安装稳定版本（已经不再维护），一种是安装最新版本，这里我们安装最新版本，执行下面的命令：$ cd your-local-blog-site$ git.
复制链接

扫一扫