打造属于你的专属博客,Hexo,Next主题

打造属于你的专属博客,Hexo,NexT主题

一、安装NexT主题

  1. 安装

    1
    2
    cd <your-hexo-site>
    git clone https://github.com/iissnan/hexo-theme-next themes/next
  2. 检查版本

    1
    2
    cd themes/next/
    grep version _config.yml

二、配置NexT

参考NexT的官方文档:

https://theme-next.iissnan.com/third-party-services.html

注意:以下配置就要重新生成后生效(hexo g)

1) 修改一些基础配置

  1. 编辑 themes/next/_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    # Site
    title: 无趣的小帕
    subtitle:
    description: Just do it!
    keywords: IT
    author: pandaomeng
    language: zh-Hans
    timezone:
    1
    seo: true
    1
    2
    menu:
    tags: /tags/ || tags
    1
    2
    Schemes
    scheme: Gemini
    1
    2
    motion:
    enable: false

2)接入百度统计

  1. 登录百度站长统计,点击新建站点

    1. 查看统计代码,获取 Baidu Analytics ID

  1. 编辑 themes/next/_config.yml

3)接入busuanzi访问统计

  1. 编辑 themes/next/_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    busuanzi_count:
    # count values only if the other configs are false
    enable: true
    # custom uv span for the whole site
    site_uv: true
    site_uv_header: <i class="fa fa-user"></i> 访问人数
    site_uv_footer:
    # custom pv span for the whole site
    site_pv: true
    site_pv_header: <i class="fa fa-eye"></i> 总访问量
    site_pv_footer: 次
    # custom pv span for one page only
    page_pv: true
    page_pv_header: <i class="fa fa-file-o"></i> 浏览
    page_pv_footer: 次
  2. busuanzi 的域名失效问题解决,见issue

    https://github.com/iissnan/hexo-theme-next/issues/2174

4)接入搜索功能

  1. 在博客根目录下执行以下命令:

    1
    npm install hexo-generator-searchdb --save
  2. 编辑根目录的配置文件 _config.yml

    可以加在文件最后

    1
    2
    3
    4
    5
    search:
    path: search.xml
    field: post
    format: html
    limit: 10000
  3. 编辑主题配置文件 themes/next/_config.yml

    1
    2
    3
    # Local search
    local_search:
    enable: true
  4. 效果图

5)接入上图的萌妹子看板娘

github仓库:https://github.com/EYHN/hexo-helper-live2d

model预览:https://huaji8.top/post/live2d-plugin-2.0/

  1. 往根目录的配置文件中加入

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    live2d:
    enable: true
    scriptFrom: local
    pluginRootPath: live2dw/
    pluginJsPath: lib/
    pluginModelPath: assets/
    tagMode: false
    log: false
    model:
    use: live2d-widget-model-shizuku
    display:
    position: right
    width: 150
    height: 300
    mobile:
    show: true

    注:上面用的model是live2d-widget-model-shizuku,所以我们要install她

  2. 载入model

    在根目录:

    1
    2
    npm install --save hexo-helper-live2d
    npm install --save live2d-widget-model-shizuku

6)接入动态评论系统gitalk

​ 篇幅较长,链接到另一篇文章:

https://www.pandaomeng.com/2019/01-04-gitalk-comment/

7)侧边栏设置返回顶部,并且显示百分比

  1. 修改主题配置文件

    sidebar 配置下:

    1
    2
    # Scroll percent label in b2t button.
    scrollpercent: true

8)头像设置

打开 主题配置文件 找到Sidebar Avatar字段

1
2
# Sidebar Avatar
avatar: /images/header.jpg

这是头像的路径,只需把你的头像命名为header.jpg(随便命名)放入themes/next/source/images中,将avatar的路径名改成你的头像名就OK啦!

9)设置”阅读全文”

无需修改配置,你只需要在你的文章想要分隔的地方加上

1
<!--more-->

就可以了

10)去掉文章目录标题的自动编号

打开 主题配置文件 找到 toc 字段,将number改为false

1
2
3
4
5
6
7
8
toc:
enable: true

# Automatically add list number to toc.
number: false

# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false

效果图:

0%