NexT主题搭建指南

发表于 阅读次数： 本文字数： 1.4k 阅读时长 ≈ 5 分钟

中文的弯路

Hexo搭建是完成了，后面就是选择主题，我选择的是NexT主题，但是网络上的文档，说实话：很乱。NexT主题经过多次升级，最新版的NexT主题已经是8.16，更新强度差不多1个月一次。所有这边就总结一下自己走过的弯路，还有主题文档是这个，但是如果你用中文搜索出来，大概率是这个，其实两个都是对的，一个是GitHub官网给出的，一个是历史版本好像是5.0时代的中文文档。最新版好像没有人维护中文，两者差距还是有的，如果用最新的版本照着中文文档配置，那是会走弯路。

各种坑

  1. 安装
    根据中文文档，你需要将对应的NexT的主题包git到theme文件夹下，然后对文件夹内的_config.yml进行编辑。然后8.0版本之后只要一行代码搞定
    1
    npm install hexo-theme-next
    随着Hexo的升级，很多东西安装都是方便快捷的。后续的配置在_config.next.yml内配置，这个文件需要自己创建，内容可以直接复制GitHub上
  2. 添加页面|菜单
    按照之前的教程你需要使用
    1
    hexo new page xxx
    增加页面，由于我本地没有环境，我一开始还试着docker内安装执行，后面发现这个命令好像没有了。
    Next增加页面十分简单，以增加分类categories页面为例，再source下增加文件夹categories，然后在categories文件夹内增加index.md文件，内容是：
    1
    2
    3
    4
    5
    6
    ---
    title: categories
    date: 2022-12-22 00:00:00
    type: categories
    comments: false
    ---
    系统就会将他识别为分类页。同理tags标签云也是一样的方法，把type改成tags即可
    然后将_config.next.yml的菜单配置
    1
    2
    3
    4
    5
    6
    7
    8
    9
    menu:
    home: / || fa fa-home
    #about: /about/ || fa fa-user
    categories: /categories/ || fa fa-th
    tags: /tags/ || fa fa-tags
    archives: /archives/ || fa fa-archive
    #schedule: /schedule/ || fa fa-calendar
    #sitemap: /sitemap.xml || fa fa-sitemap
    #commonweal: /404/ || fa fa-heartbeat
    这边主义，如果你只是增加单页或者说是非分类标签，那么你的title字段需要一致，type字段可以不要掉，即：
    1
    2
    3
    4
    5
    6
    ---
    title: 新页面名称
    date: 2022-12-22 00:00:00
    comments: false
    ---
    页面内容，支持html
    然后系统会生成对应title的html文件，直接放在source下即可，访问路径就是xxxx.com/新页面.html。这是单页面的添加方法，由于Hexo是静态文件，所以你可以简单的将他理解为文件路径，只要它在哪个文件路径下，你网址就是哪个。
  3. 搜索功能
    搜索系统支持两种，第一张用的是hexo-algolia，插件，需要到对应网站填写注册。这边推荐第二种自带的搜索功能：安装对应的插件，如果是Github部署的，记得在部署文件内增加：
    1
    npm install hexo-generator-searchdb
    然后到_config.yml即Hexo的配置文件下增加
    1
    2
    3
    4
    5
    search:
    path: search.xml
    field: post
    content: true
    format: html
    最后再去_config.next.yml内打开对应的搜索功能即可
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Local search
    # Dependencies: https://github.com/next-theme/hexo-generator-searchdb
    local_search:
    enable: true
    # If auto, trigger search by changing input.
    # If manual, trigger search by pressing enter key or search button.
    trigger: auto
    # Show top n results per article, show all results by setting to -1
    top_n_per_article: 1
    # Unescape html strings to the readable one.
    unescape: false
    # Preload the search data when the page loads.
    preload: false
    说实话效果很不错
    111-Hexo主题搭建的坑-2023-05-20-22-02-17
  4. 独特的标签插件
    NexT不仅支持markdown，而且还在它的上层拓展了不少，例如突出显示，代码块，画廊，流程图等等。好看是好看，但是如果后续你还想折腾换一个博客系统的话，我的建议，还是一直使用markdown文件格式，系统虽好，但是换系统折磨人。
  5. 评论系统
    至此，你搭建了自定义菜单和搜索功能的插件，如果你还需要评论的话，可以使用Gitalk，这个是使用GitHub的issues进行评论，它会在你每次创建文章之后生成对应的issue来记录评论，需要注意的是，如果你路径变换的话，评论可是会消失的。配置的话也很简单：
    打开链接申请一个登陆验证
    111-Hexo主题搭建的坑-2023-05-21-21-25-14
    名称随意，但是地址需要填写你的博客地址，因为后期它需要回调插件。然后再到_config.next.yml进行配置即可：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    # Gitalk
    # For more information: https://gitalk.github.io
    gitalk:
    enable: false
    github_id: # GitHub repo owner 这个写你的用户名
    repo: # Repository name to store issues 这个写你想要把它放在哪个仓库下
    client_id: # GitHub Application Client ID 这个填写申请之后会有
    client_secret: # GitHub Application Client Secret 这个填写申请之后会有
    admin_user: # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
    distraction_free_mode: true # Facebook-like distraction free mode
    # When the official proxy is not available, you can change it to your own proxy address
    proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token # This is official proxy address
    # Gitalk's display language depends on user's browser or system environment
    # If you want everyone visiting your site to see a uniform language, you can set a force language value
    # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
    language:
    然后就可以了。

总结

虽然是用node安装的，但是很多东西其实系统都已经合在Hexo里面了，无论是搜索，还是技术，甚至分析都有。得益于丰富的js脚本，Hexo博客部署的方便性大大增加，前提是你要找好对应的文档，文档真的很重要。
至于这个会不会是我得最后一个博客，我可说不准。生命在于折腾，学到老活到老。