Hexo+Next 小白搭建简易博客问题集

发表于 更新于 分类于 阅读次数： 本文字数： 2.9k 阅读时长 ≈ 3 分钟

前言

  博客搭建大概有个雏形了，思索着从现在开始给博客搭建过程中遇到的问题记录一下，搭建初期遇到了许多问题，主要原因出在Hexo或Next版本更新，所用版本和网上大家用的版本不一致，自己又是电脑小白，只好多花时间摸索尝试。下面给出本博客采用的Hexo和Next的版本信息。 

1
2
Hexo：7.3.0
Next: 8.22.0

  后面的问题都将基于上述版本展开。

alt text
这是创建此问题集时的博客状况。

1 修改代码块样式

  • 设置代码块高亮颜色
      在主题配置_confg.yml中ctrl+F搜索codeblock,定位到代码块主题设定处，访问注释中的链接，挑选喜欢的样式，替换即可。
  • 添加代码复制按钮
      在下方将copy_button的enable值设为true，在底下还可以选择按钮的样式，注意此处若将按钮样式设置为mac，还可顺带将代码块边框设置为mac样式，更加美观。
  • 设置代码折叠
      同理，继续在下方将fold的enable值设为true，即可实现代码过长折叠，设置height的值还可以设定代码开始折叠的长度。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: a11y-dark
    dark: a11y-dark
  prism:
    light: prism
    dark: prism-dark
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: mac
  # Fold code block
  fold:
    enable: true
    height: 500

2 调整博客字体大小

  之前博客在添加完背景图片之后，会导致侧边栏、目录上的文字看不清楚，这里对此做出调整。

  • 调整侧边栏字体以及背景
      首先修改一下背景图片的透明白色蒙版，将其修改为从下到上不透明度由0.9-0.3的白色蒙版。具体修改在MyBlog\source\_data\styles.styl（没有此路径自行创建即可）中将原本的背景代码部分修改为：
1
2
3
4
5
6
7
8
9
.sidebar-inner {
  background: 
     linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255,255, 255, 0.3)), /* 从下到上的渐变透明白色背景 */
      url(/images/sidebar-background.png); /* 背景图片 */
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
  • 调整博客默认字体
      在网上挑选一款喜欢的字体下载，将字体的ttf文件保存在MyBlog\themes\next\source\fonts（没有此路径还是自行创建即可），也是在上述文件styles.styl中导入此字体：
1
2
3
4
@font-face {
  font-family: "Yozai-Medium";
  src: url("/fonts/Yozai-Medium.ttf") format("truetype");
}

  注意这里字体族可以添加多款字体，规则是优先使用前面的字体，如果字体不包含当前字符，则往下考虑使用下一个字体。所以一般情况下，我们可以考虑将英文字体放前面，中文字体放后面，避免中文字体中的英文影响英文字体的使用。
  将字体添加于博客的body块，即可将其设置为全局默认字体，修改也是在此文件中：（注：这里还可以设置博客全局很多的信息，根据变量揣测意思即可）

1
2
3
4
body {
  //全局字体设置
  font-family: "Yozai-Medium", sans-serif;
}

  到这一步，博客的大部分字应用的都是全局默认字体，但是也有一些例外，如文章、文章标题等。这是因为在博客的配置文件中，存在额外的对它们单独的配置文件，只要找到将里面的相关配置注释掉就可以了。这里以文章为例，文章的配置文件在MyBlog\themes\next\source\css\_common\components\post\post-body.styl中，将里面font-family:所在的一行注释即可，刷新页面，成功。至于文章标题等其他的配置文件，可以先通过检查页面来查看文本具体是受什么哪个文件影响，然后在本地文件中去定位修改。

  • 调整博客字体大小
      具体方法就是检查页面，查看元素所在的选择器，然后在一直说的styles.styl中配置修改即可。以修改菜单的字体大小为例：
1
2
3
.menu{
  font-size: 20px;
}

  字体的其他信息也可以这样修改，例如要单独修改字的颜色等。

3 修改文章目录交互

  Next主题自带的文章目录交互有点丑，网上大佬的文章目录好好看，怒改之。浏览了一下官方给定的配置文件，发现似乎没有可以供选择更改的选项，基本确定是要直接修改css样式。因为本人实乃前端小白，在文件夹里翻了半天，最后在病急乱投医的精神状况下，求助chatgpt，结果还真给找到了。
alt text
  修改目录如下：MyBlog\themes\next\source\css\_common\outline\sidebar\sidebar-toc.styl找到文件后就看个人需要进行修改了。例如，这里想使得当鼠标悬停于目录上方，或选中时，有圆角矩形作为背景标注突出。修改即用下面代码段，替换对应的选择器即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.active > a {
  //border-bottom-color: $sidebar-highlight;
  color: $sidebar-highlight;
  padding: 2px 10px;
  background-color: rgba(100, 157, 173, 0.9);
  border-radius: 12px;
}
.active-current > a {
  color: $sidebar-highlight;
  padding: 2px 10px;
  background-color: rgba(100, 157, 173, 0.9);
  border-radius: 12px;
  &:hover {
    color: $sidebar-highlight;
  }
}