搭建一样的博客

本文最后更新于：2023年9月16日 晚上

前言

以下详细记录着搭建过程，如果想要快速的获得一个一样的博客，可以直接从给git获取，同步更新：https://github.com/Xin-FAS/FAS-Blog-Template，好用请点个`star`

初始化Hexo

官网：https://hexo.io/zh-cn/index.html

1
2
3
4
5
6
7
8
# 全局安装hexo
npm install hexo-cli -g
# 创建一个叫做init-blog的文件夹（名字任意）并初始化
hexo init init-blog
# 进入文件夹后启动
cd init-blog
npm install
hexo s

这里个人博客就搭建好了，下面使用主题

使用fluid主题

github下载源码并放入

地址：https://github.com/fluid-dev/hexo-theme-fluid/releases

下载完成后解压，修改名称为fluid放入博客目录的theme文件夹下，然后复制主题的_config.yml到博客目录，并改名为_config.fluid.yml

指定主题

找到并修改博客目录中的_config.yml

1
2
3
theme: fluid  # 指定主题

language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

tips：注意是修改不是添加

基础配置

以下配置都在博客目录/_config.fluid.yml中进行

基础页面配置

  1. 配置关于页：https://fluid-dev.github.io/hexo-fluid-docs/guide/#%E5%85%B3%E4%BA%8E%E9%A1%B5
  2. 配置友链页：https://fluid-dev.github.io/hexo-fluid-docs/guide/#%E5%8F%8B%E6%83%85%E9%93%BE%E6%8E%A5%E9%A1%B5

评论功能

详情见：https://fluid-dev.github.io/hexo-fluid-docs/guide/#%E8%AF%84%E8%AE%BA

个人使用valine，官网：https://valine.js.org/

使用流程：

  1. 登录/注册LeanCloud国际版，创建应用
  2. 进入设置，记录下应用的appid，appkey
  3. 进入配置文件，将appid和appkey填入valine中，其他跟着fluid文档配置就可以了

设置页面顶部大图

详见：https://fluid-dev.github.io/hexo-fluid-docs/guide/#%E9%A1%B5%E9%9D%A2%E9%A1%B6%E9%83%A8%E5%A4%A7%E5%9B%BE

设置副标题

搜索slogan:，修改text

设置导航左侧标题

搜索navbar:，修改blog_title

修改页脚

搜索footer:，修改content

添加自定义css文件路径

搜索custom_css:，添加一个博客目录下的source的路径，如

1
custom_css: css/f-index.css

这里用的就是博客目录/source/css/f-index.css

文章默认封面

配置default_index_img:

配置代码高亮

搜索highlightjs:

更多个性配置（个人）

前置说明：

  • 博客配置：_config.yml
  • 主题配置：_config.fluid.yml

修改文章末尾地址

在博客配置中找到permalink:，修改它的上一个，也就是url，如

1
url: https://xin-fas.github.io

网站基础信息

在博客配置中修改# Site区域

详情见：https://hexo.io/zh-cn/docs/configuration.html#%E7%BD%91%E7%AB%99

顶部菜单背景色

1
2
navbar_bg_color: #f2f2f2
navbar_bg_color_dark: #323232

顶部菜单不透明度

1
2
navbar:
	alpha: .9

亮色主题下拉导航栏文字颜色

在之前配置过的自定义css文件中，写入：

1
2
3
4
/* 配置亮色模式下滑时导航栏文字颜色 */
html[data-user-color-scheme="light"] :is(.navbar-col-show, .top-nav-collapse) {
    --navbar-text-color: #222;
}

代码块使用mac边框

自定义css文件中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* mac代码样式 */
figure.highlight {
    transition: background .2s ease-in-out;
    background: var(--highlight-bg-color);
    border-radius: 5px;
    box-shadow: 0 4px 7px 0 rgba(0, 0, 0, .4);
    padding-top: 30px
}
figure.highlight::before {
    content: ' ';
    position: absolute;
    left: 12px;
    top: 9px;
    background: #fc625d;
    border-radius: 50%;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    height: 12px;
    width: 12px;
}
figure.highlight > table {
    border-top-style: solid;
    border-top-width: 1px;
    transition: border-top-color .3s;
}
/* 亮色 */
html[data-user-color-scheme="light"] figure.highlight > table {
    border-top-color: #eee;
}
/* 暗色 */
html[data-user-color-scheme="dark"] figure.highlight > table {
    border-top-color: #444;
}

超链接背景色

主题配置文件中：

1
2
3
4
5
post_link_color: "#42b983"
post_link_color_dark: "#3eaf7c"

link_hover_color: "#42b983d9"
link_hover_color_dark: "#3eaf7cd9"

文字块的颜色配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* `` 的样式配置 */
/* 亮色 */
html[data-user-color-scheme="light"] {
    --inlinecode-bg-color: #fef0f0
}
html[data-user-color-scheme="light"] .markdown-body p code,
html[data-user-color-scheme="light"] li code{
    color: #c7254e;
}
/* 暗色 */
html[data-user-color-scheme="dark"] {
    --inlinecode-bg-color: rgba(254, 240, 240, 0.1);
}
html[data-user-color-scheme="dark"] .markdown-body p code,
html[data-user-color-scheme="dark"] li code{
    color: #f3b37f;
}

修改编译时控制台输出字符

在线制作字符码：http://patorjk.com/software/taag

全局搜索hexo.log.info，修改输出内容，如：

1
2
3
4
5
6
7
    hexo.log.info(`
   _  __   _               ____   ___    ____
  | |/_/  (_)  ___  ____  / __/  / _ |  / __/
 _>  <   / /  / _ \\/___/ / _/   / __ | _\\ \\
/_/|_|  /_/  /_//_/     /_/    /_/ |_|/___/
    `);
  }

修改运行时控制台输出

全局搜索billboard:，修改console.log

修改浏览器图标

主题配置中修改favicon:和apple_touch_icon:

修改首页和归档中一页显示数

博客配置中搜索per_page:，前面为index就是首页展示数，建议首页显示15，归档页面显示20

显示更新日期

  1. 文章头部显示，主题配置中搜索updated:，开启enable，并将下方标签类型改为success
  2. 文章底部显示，主题配置中搜索update_date:，开启enable

关闭图片显示标题

主题配置中搜索image_caption:，关闭

开启三级标题以上不折叠

主题配置中搜索collapseDepth:，修改为3

关闭阅读时长

主题配置中搜索min2read:

修改iframe样式

在自定的css文件中，添加如下：

1
2
3
4
5
6
/* 加入iframe默认样式 */
iframe {
    border: none;
    background-color: white;
    width: 100%;
}

note中超链接文字样式问题

fuild主题使用note功能时，里面的超链接会跟着全局文字颜色，所以在自定的css文件中添加如下：

1
2
3
4
/* 修改note中的超链接样式 */
.note a {
    color: var(--link-hover-color);
}

最后

至此，你就已经建成了一个和我一模一样的博客系统，快去更新吧，添加友链可以发邮件到xin.fas@outlook.com中，内容请包含一个昵称，博客地址，简介和头像，后续博客有更多自定义修改会同步到这篇文章中

教程
#Hexo #Fluid
搭建一样的博客
https://xin-fas.github.io/2023/08/17/搭建一样的博客/
作者
Xin-FAS
发布于
2023年8月17日
更新于
2023年9月16日
许可协议