Next主题安装与优化

个性化设置

基本信息

在根目录下的_config.yml文件中,可以修改标题,作者等信息。打开编辑该文件,注意:每一个值的冒号后面都有一个半角空格!

  • 能生效的写法:title:[空格]nMask的博客

主题美化

写在最前面:
1.在修改时请注意博客配置文件主题配置文件的区别:博客配置文件是指博客根目录下的_config.yml文件,
主题配置文件是指/themes/主题名/路径下的_config.yml文件,例如我使用的主题为next主题,主题配置文件/themes/next/_config.yml
2.文内所有命令行命令全部是在博客根目录打开命令行下输入的。根目录下目录结构为:

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

Next主题安装

目前Next主题的项目分成了两个项目,一个是5.1.4版本以下的,一个是一直更新的,现在已经更新到了6.7(2019.01.10),建议直接用最新的,最新版本的主题已经把很多常用的功能集成了,用起来很方便。本篇文章是基于Next 6.7进行的修改与展示。
Next主题项目页面(v5.1.4)
v6.7版本页面

  • 博客根目录打开命令行,用6.7版本输入命令
1
git clone https://github.com/theme-next/hexo-theme-next themes/next
  • 安装完成后,打开博客配置文件修改最上方的theme项为next
  • 修改完成后命令行输入hexo s本地运行一下看是否生效

主题修改

  • 修改语言

    修改博客配置文件下的language项为zh-CN

    这里要注意一下,看一下主题文件夹内的languange文件夹中中文的配置文件叫什么名字,Next主题有些版本的叫zh-Hans那这里就填zh-Hans,Next最新版本中用的是zh-CN,故这里填写zh-CN

  • 修改菜单及创建分类页

    修改主题配置文件下的menu项,按需要打开菜单。例如我需要把标签页面打开,就把tags项前面的#去掉就行了。随后根据标签页或者分类页输入:

    1
    2
    3
    hexo new page categories    // 来新建出分类页
    hexo new page tags // 新建出标签页。
    hexo new page about // 新建出关于页

    menu

  • 修改主题风格

    Next自带四种主题风格,可以在主题配置文件搜索Scheme项,将需要的风格前的#去掉,注意只能开启一个风格。我是用的是Gemini主题

  • 设置作者头像

    编辑主题配置文件,搜索修改字段 avatar, 值设置成头像的链接地址。可以设置成在线的图片地址。也可以把图片放在本地。

    方法1:
    在线图片设置:假设现在有一张网络图片:
    avatar它的链接是https://shawnlin.cc/images/avatar.png, 那么修改url即可:

    avatar

    方法2:
    本地设置:放置在source/images目录下,设置为url: /images/avatar.jpg
    avatar

    这个rounded项可以设置头像为圆形,设置为ture后会自动根据头像的尺寸将头像变化为圆形或者椭圆,头像图片为正方形的话则为圆形。长方形的话长宽相差越大,椭圆越明显。
    设置opacity的值控制头像的透明度,值为0 - 1。
    rotated项为头像旋转,设置为true,则鼠标指到头像时头像会旋转。

  • 设置代码高亮主题

    NexT 使用 Tomorrow Theme作为代码高亮,共有5款主题供你选择。 NexT 默认使用的是 白色的 normal 主题,可选的值有 normalnightnight bluenight brightnight eighties
    更改 主题配置文件中的highlight_theme 字段,将其值设定成你所喜爱的高亮主题即可。

  • 侧边栏社交链接

    侧栏社交链接的修改包含两个部分, 配置在 主题配置文件 中。social字段为连接,格式为显示文本: 链接地址 || Font Awesome图标名称

    图标名称 是 Font Awesome 图标的名字(不必带 fa- 前缀)。enable 选项用于控制是否显示图标,你可以设置成 false 来去掉图标。例如: 百度: https://baidu.com || firefox
    Font Awesome图标可以到Font Awesome查看

  • 设置RSS

    NexT 中 RSS 有三个设置选项,满足特定的使用场景。 更改主题配置文件,设定 rss 字段的值:
    false:禁用 RSS,不在页面上显示 RSS 连接。
    留空:默认就是留空的,使用 Hexo 生成的 Feed 链接。 你可以需要先安装 hexo-generator-feed 插件。
    安装方法:根目录下命令行输入

    1
    npm install hexo-generator-feed --save
  • 设置网站图标

    EasyIcon中分别找一张(16 16与32 32)的ico图标,或者去别的网站下载或者制作,并将图标名称改为favicon16.icofavicon32.ico,然后把图标放在/themes/next/source/images或者放在根目录的/source/images文件夹里。
    主题配置文件内搜索favicon字段,把 smallmedium字段的地址修改为/images/favicon16.ico/images/favicon32.ico

  • 实现全站/文章数字统计/阅读时长

    根目录命令运行

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

    博客配置文件底部添加如下内容,保存。

    1
    2
    3
    4
    5
    symbols_count_time:
    symbols: true
    time: true
    total_symbols: true
    total_time: true
  • 添加顶部加载条

    最新版本的Next主题是内置了加载条功能的。
    根目录打开命令行,输入如下命令:

    1
    git clone https://github.com/theme-next/theme-next-pace themes/next/source/lib/pace

    然后主题配置文件搜索pace字段,修改pace: falsepace: true即可开启加载条功能,修改下方的pace-theme字段还可以修改加载条的样式。

  • 修改网页底部的小图标

    主题配置文件搜索footer字段,修改下方的icon字段下的name字段。name字段后的名字是 Font Awesome 图标的名字(不必带 fa- 前缀)。

    animated自动为闪动开关,设置为true后图标会闪动。
    以及可以设置图标颜色,color处填入16进制颜色代码即可。注意保留原来的双引号。

  • 去掉页面底部的强力驱动信息及设置备案信息

    主题配置文件搜索copyright字段,修改powered下的enable字段的truefalse即可去掉强力驱动部分的内容。

    同样的theme下的enable设置为false的话可以去掉页面底部的主题信息。

    如果博客有备案的话,下方beian字段设置为trueicp后填写备案号。

  • 添加动态背景

    根目录打开命令行,输入:

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

    主题配置文件搜索canvas-nest字段,enable项设置为true

  • 增加回到顶部按钮及显示当前浏览进度

    主题配置文件搜索b2t字段,将b2t字段的false修改为true即可,(注意此功能只能用于Pisces和Gemini主题)。

    将下方的scrollpercent字段设置为true即可实现当前浏览进度的显示。

  • 为博客加上萌萌的宠物

    首先安装插件,根目录命令行输入

    1
    npm install --save hexo-helper-live2d

    主题配置文件最下方添加如下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    # Live2D
    ## https://github.com/xiazeyu/live2d-widget.js
    ## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
    live2d:
    model:
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
    display:
    superSample: 2
    width: 150
    height: 300
    position: right
    hOffset: 0
    vOffset: -20
    mobile:
    show: true
    scale: 0.5
    react:
    opacityDefault: 0.7
    opacityOnHover: 0.2
  • 增加本地搜索功能

    首先安装插件,根目录命令行输入

    1
    npm install hexo-generator-searchdb --save

    编辑博客配置文件,新增以下内容到任意位置:

    1
    2
    3
    4
    5
    search:
    path: search.xml
    field: post
    format: html
    limit: 10000

    主题配置文件搜索local_search字段,设置enabletrue

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

    修改模板/themes/next/layout/_macro/post.swig,搜索 rel="tag">#,将 # 换成<i class="fa fa-tag"></i>,此处的图标用的是Font-Awesome,可以根据需要换成其他的图标。

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

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

    1
    2
    3
    4
    5
    <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 之前添加如下代码:

    1
    2
    3
    4
    5
    <div>
    {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
    {% endif %}
    </div>
  • 增加网站访问量统计

    主题设置文件中搜索busuanzi, 设置:

    busuanzi