hexo-next主题配置css

发表于 2024-05-09 分类于 Test 阅读次数：本文字数： 1.9k 阅读时长 ≈ 2 分钟

本文介绍了如何在hexo-next主题下客制化css，例如：

修改字体，更改字体大小，行间距。

73477506

正文

1. 修改博客的字体

使用谷歌的字体库

在主题配置文件themes/next/_config.yml中使用Ctrl+F搜索“font settings”，按照需要修改。我的博客修改了以下部分：

font:
  enable: true
  host: https://fonts.googleapis.com

  # 正文使用：思源宋体
  posts:
    external: true
    family: Noto Serif SC

  # 代码块使用：Console
  codes:
    external: true
    family: Console

2. 修改博客的css

控制本地预览的css文件路径为：public/css/main.css

但是每次都修改这个文件就显得太麻烦，next主题是一个成熟的项目，应该有相应的修改方案。在冲浪搜索两分半后，找到了以下文章，解决了这个问题：

参考链接：完美解决：Hexo Next主题本地可预览CSS，但部署到网站CSS失效问题！

2.1 添加客制化css

虽然在css目录下任意.styl下添加css样式代码可以生效，但是为了方便以后修改，最好创建一个新的.styl文件记录自己的修改。

在themes/next/source/css/main.styl最后加上：
1
@import "_custom/custom"
在themes/next/source/css目录下创建_custom文件夹；
在目录themes/next/source/css/_custom下新建文件custom.styl。
在custom.styl中添加css样式修改博客的css。

2.2 此博客的`custom.styl`

// 行距和首行缩进
p {
  margin-top: 15px;
  margin-bottom: 15px;
  text-indent: 4ex;
  line-height: 1.6;
}
// 字体大小
@media (min-width: 1200px) {
  .post-body {
    font-size: 1em;
  }
}
// 网站标题
.site-title {
  text-indent: 0;
}
// 昵称的缩进
.site-author-name {
  text-indent: 0;
}
// 按钮的margin
.post-button {
  margin-top: 10px;
}
// header的margin
.posts-expand .post-header {
  margin-bottom: 10px;
}
// 主题颜色
:root {
  --theme-color: #6495ed;
  --btn-default-color: #87CEFA;
  --btn-default-border-color: #87CEFA;
  --btn-default-hover-bg: #87CEFA;
  --btn-default-hover-border-color: #87CEFA;
}
// markdown引用块的首行缩进
blockquote > p {
  text-indent: 0;
}
// 序号块的首行缩进
ol > li > p {
  text-indent: 0;
}

3. 部署到网站

当修改完css，发现在本地运行一切正常，但是部署之后网站的样式完全没有变化，具体原因请参考以下文章（还是刚才的文章），以下给出解决方案。

参考链接：完美解决：Hexo Next主题本地可预览CSS，但部署到网站CSS失效问题！

我的hexo版本和next版本和上述文章的不同，因此解决方案也有所不同。

问题复现方法

本地修改css后使用hexo s指令预览，网站样式被成功修改。
使用指令hexo c && hexo g && hexo d部署后，网站样式没有被修改。

解决方案

经过尝试，发现只要每次删除public/css/main.css文件后再使用hexo g命令生成，便可成功修改main.css。于是只需使用以下命令部署，在博客的根目录下Git Bash：

1 2	rm ./public/css/main.css hexo c && hexo g && hexo d

正文