Next 使用与配置记录

发表于 更新于 分类于 阅读次数：
本文讲充斥着大量测试使用的突兀代码,比如这个阅读全文

最近重新把博客捡起来了,准备随便写点什么东西,然后照着几个大佬的博客想整一个类似看着比较简洁的
最后主题市场逛了一圈还是用了Next,然后发现是和学校的老旧不更新的ACM校队博客用的同一个风格
主要记录下自己的相关配置啥的

本文讲充斥着大量测试使用的突兀代码,比如这个阅读全文

安装

hexo的安装就不提了,相关教程实在是太多了
只看官方文档也可以很快的上手
我用的还是github page的一键部署,很多都没那么麻烦

Next的仓库里说了对于5.0以上的版本可以直接使用npm install hexo-theme-next安装
记得在自己本地的hexo仓库里安装,大概是需要的

配置

配置也很简单,官方文档里也有只需要把_config.yml下面的theme改成next就可以了

然后再hexo s就会发现你本地启动的不再是默认的landscape主题了(虽然那个头图超级好看的)
同时next官方推荐使用备用配置来进行基础的next主题配置,而不是修改node_modules中的next相关配置
Next的相关文档
粽子如果是使用npm的直接执行对应的指令就好了,这样的话你的博客仓库文件夹的最外面就会多出来一个_config.next.yml
里面也塞了很多的next默认配置,只需要对里面的东西进行修改就会对next的全局配置产生影响了

修改默认的首页

一般hexo的默认标题就是hexo,相关作者是一个叫John Doe的人(搜了下才知道是无名氏的意思,大概类似于小明?)
修改这个只需要在_config.yml下面的site部分进行修改 

1
2
3
4
5
6
7
8
# Site
title: FrenchPicnic's Nothing Life  # 主标题
subtitle: ''                        # 副标题
description: ''                     # 描述
keywords:                           # 一些关键词
author: FrenchPicnic                # 作者
language: zh-CN                     # 翻译的语言
timezone: ''                        # 使用的时区,不填默认是根据部署的服务器确定的

说一下language,默认是en,结果修改为zh后发现变成了个奇怪的语言
最后发现是要改成zh-CN,和其他地方的配置有点出入

修改next的主题

next一共提供了4种风格的页面,可以进行切换,在_config.next.yml中进行修改
之后对于next部分的修改,都在_config.next.yml中进行修改,懒得打字了
找到Schemes 

1
2
3
4
5
# Schemes
# scheme: Muse
# scheme: Mist
# scheme: Pisces
scheme: Gemini

想要切换到哪个类型的主题,只需要注释当前的主题然后把想要改为的主题取消注释就好了,我比较喜欢最后一个Gemini

修改next的菜单栏

找到menu的部分进行修改就好了 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-sensitive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# External url should start with http:// or https://
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat
  友链: /links/ || fa fa-link

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: false

menu一共支持三个参数,Key: /link/ || icon

  • key是你的菜单项的名字,如果翻译存在,则使用翻译,否则使用key,key是大小写敏感的
  • value是菜单项的链接,代表了点击后跳转的位置,如果是本地跳转的话需要在source文件夹下创建对应的文件夹与对应的index.md文件,如果是外部跳转的话,需要以http://或者https://开头
  • value后面的||跟着的是菜单项的图标,图标可以不写,不写则使用默认的图标,图标的使用可以参考Font Awesome

默认给了一些配置,例如about/tags/categories/archives
默认的所有文章都会被分到archives里面去,对于其他的文件,需要在每一个的开头加上type:"xxxx"指明是一个对应菜单类型的文件
特别地,对于tags/categories,我们里面不需要写东西,只需要在每篇自己写的文章——即source/_posts下面的文章的开头加入下面的样式就可以了 

1
2
3
4
5
6
7
8
9
10
11
12

---
title: Hello World
abbrlink: 4a17b156
tags: 
- 学习
- xxx
categories:
- 杂项
- xxx
- xxx
---

官方也给出了json的写法,不过感觉yml更方便点
只需要在tags/categories的后面加一个- xxx就好了,注意是大小写敏感的,在建立好这些之后,你的标签/分类页面就会自动生成对应的标签,点击跳转后会是一个时间轴的形式
不过不知道其他主题是怎么实现的

about页面则不会自动生成,需要你自己写一点东西进去,一般随便写点话就好了
Next在菜单栏提供了一定的友链,但很明显一般友链都会超多菜单栏很明显放不下
这时候就需要自定义菜单栏了
例如我给出的例子里的最后面的友链,指定好名字后(一般都不会翻译,所以直接写中文就好了)就可以按照其他的配置方式写了
在source文件夹下新建一个links的文件夹,里面是index.md
然后和about一样随便塞点东西进去
友联相关的模板挺多的,可以自己去看点好看的

标题的配置

hexo默认的路径就是文章的时间加标题,这样阅读你的文章的时候的导航栏看起来就会超级冗杂
hexo的插件市场里有一个叫做abbrlink的插件,可以帮你生成一个字段来指向你的文章,这样看起来文章就很舒服了
执行这个命令之后npm install hexo-abbrlink --save
然后在hexo的config中找到permalink把对应的改成下面的

1
2
3
4
5
6

# permalink: :year/:month/:day/:title/
permalink: posts/:abbrlink/
abbrlink:
	alg: crc32   #算法： crc16(default) and crc32
	rep: hex     #进制： dec(default) and hex

先把原先的注释掉,你也可以直接在原有的基础上改
下面的是加密算法和进制表现形式,总之最后是以一个字符串的形式指向你的文章
然后hexo d之后你的对应文章的开头都会多出来一个abbrlink之类的东西,这样就可以指向你的文章里

阅读更多

next默认的文章的预览是全部显示的,这对于一些超级长的文章来说会非常麻烦
加上默认就是显示的全部文章之类的
总之只需要在你的文章md里面加上一段这样的话就好了

<!-- more -->

这样的话next就会自动帮你把文章的预览部分给截断,然后加上一个阅读更多按钮,点击之后就会跳转到文章的详情页
阅读更多的按钮也是可以修改配置的,不过我比较懒

或者正常的在页首那一堆东西里使用description来描述,不过大部分时候都会忘记要写这个了

页尾的小东西

页尾有很多奇奇怪怪的东西,比如默认的一个很突兀的红心❤️
介个也是可以修改的
在next的config里找到footer 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

footer:
  # Specify the year when the site was setup. If not defined, current year will be used.
  #since: 2021

  # Icon between year and copyright info.
  icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/icons
    name: fa-solid fa-meteor
    # If you want to animate the icon, set it to true.
    animated: true
    # Change the color of icon, using Hex Code.
    color: "#808080"

  # If not defined, `author` from Hexo `_config.yml` will be used.
  # Set to `false` to disable the copyright statement.
  copyright:

  # Powered by Hexo & NexT
  powered: true

在这个的后面还有个icp备案相关的,不过我扔github page上完全不用管这个
icon就是对应的那个红心了,我这里修改为了一个陨石,可以在fontawsome里去找自己喜欢的样式
然后animated就是字面意思的动画效果,表现得大概就是会是不是抖一下
color就是字面的颜色

底下还有个powered,就是by hexo的那个,你也可以注释掉什么的

头像

头像在next的配置设置就好了,就是图像对应的地址是在source下面新建一个images的文件夹,然后塞进去就好 

1
2
3
4
5
6
7
8
9

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/kawa.jpg
  # If true, the avatar will be displayed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false

rounded就是把你的头像设置成圆的,rotated就是鼠标移上去之后你的头像会转一圈,还蛮好玩的

还有自己的description啥的,需要换行的话用<br>

文章置顶

被一些博客骗了(其实也不算,搜索引擎的锅)
按照教程装了下hexo-generator-index-pin-top然后把hexo自带的hexo-generator-index给卸载了
瞅了下这仓库居然是6年前更新的了,对于一个置顶的需求hexo不可能搁置这么久不放的
3年前自带的就支持使用sticky来实现置顶的功能了,还有个自带的订书针图标
和top的用法一样,在文章首页那一堆东西里加上sticky:xx就可以了,xx越大越靠前
top还是能使用,只是太老了不维护了,一些官方的新特性都没有了

加密插件

hexo没有wordpress那些简单的加密方式,之前搜的时候也看到直接加一段js实现对文章的加密,不过过于暴力加上是明文写在代码里判断加密的,所以没啥用
然后有一个加密的插件hexo-blog-encrypt可以更好地实现对文章的加密
因为用了多种方式来确保安全性(去看README吧),总之除非愿意花很长时间一般是解密不了的
同时我的一键github deploy扔到的github page上的源码里也是加密的,因此不太需要担心托管到静态页面的时候因为源代码需要公开导致加密没用
使用的话先npm install --save hexo-blog-encrypt
然后在_config.yml里加上下面的东西 

1
2
3
4
5
6
7
8
9
10
11
12

# Security
encrypt: # hexo-blog-encrypt
  abstract: 有东西被加密了, 请输入密码查看. # 这里可以自定义提示信息,就是外面看的预览啥的
  message: 您好, 这里需要密码. # 输入密码部分的自定义消息
  tags:
  - {name: tagName, password: 密码A} # 对于指定的tag,都会使用对应的密码进行加密
  - {name: tagName, password: 密码B} # 测试了下是按照tag顺序进行加密的,因此不会有多个tag导致加密冲突的情况
  theme: xray # 主题  
  wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试. # 错误密码的时候的报错
  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容. # 官方说这是很极端的情况下才会出现的报错,希腊奶了

当然你的文章头也可以加这些东西,官方说了文章头的优先级大于config里的配置
然后就不是用tags来指定哪些tag的时候才加密了,而是直接使用password

abrstract会被自己写的description覆盖掉
然后加密后的文章是不支持重新显示toc(侧边栏目录)了,一些数学公式也不太支持,对于依赖这部分的博客不太友好

上面的config里还有一个theme的选项,可以自己去找喜欢的加密条

同时官方说了解密后是吧密码直接塞本地的,所以后台更改密码后进入原来的加密文章会先报一次错误然后回到输入密码的部分

Note

找官方的特性找的东西,就这个https://theme-next.js.org/docs/tag-plugins/note
大概效果可以参考收藏页面 

1
2
3
4
5
6
7
8
9
10
11
note:
  # Note tag style values:
  #  - simple    bootstrap callout old alert style. Default.
  #  - modern    bootstrap callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: flat
  icons: false
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 1

style默认是simple,默认带图标,modern和flat都是不带图标的,flat的背景色浅一些,modern的背景色深一些
把icons设成true的话这两个也会带了
最后的light_bg_offset是背景色的偏移量,默认是0,看喜好了

comments

评论官方内置只有那么几种disqus | disqusjs | changyan | livere | gitalk | utterances
其中几种又是不支持githubpage的,所以只能用gitalk和utterances
怎么还有国内的评论站啊楽

这两个都是基于github issue实现的,所以可能会对部分不太友好
gitalk参考官方用法,主要就是先新建一个OAuth application,然后callback url填博客地址
生成好之后就拿client_id和client_secret丢到config.next.yml里对应的部分就好了
如果不是githubpage的话就新建个仓库来对应

不过根据官方说法gitalk是基于文章的md5来对应的,所以一旦更改了文章之类的就会对不上,但issue还在
另一个问题就是gitalk会在你认证之后每个页面打开的时候就创建一个issue,很烦
然后就是权限问题,要的比较多,这个是搜别人博客提到的

utterances就是一个lite版本的了,不需要太多的权限也是专门由他的机器人来发第一个issue
配置很简单,只需要吧它装到对应仓库里就好了https://github.com/apps/utterances
也是在配置yml里填上对应的仓库啥的

其他的话,在不需要comment的页面的Front-matter部分加上下面的就好了

1
2
3
4
---
title: 404
comments: false # 这一个
---

另一个问题是它的issue是以describe或者more前面的内容来创建的,所以对那些友链之类的页面可能需要写一个describe来简略一下

END

大概就这些了,自己也没想法去整花活啥的
下面放一些参考链接
Hexo-Next 主题博客个性化配置
Hexo+Next主题搭建个人博客+优化全过程（完整详细版） - Yuleo的文章 - 知乎
Hexo+Next博客背景图片+界面优化 - Yuleo的文章 - 知乎