Hexo+Fluid博客搭建以及美化(一文写全)

一、准备工作

首先准备一个 Github 账号（用户名.github.io留空），没有就去注册一个新账号。
安装 Git，链接: https://git-scm.com/downloads。
安装 Node.js ，官网链接： Node.js — Download Node.js

安装这两个，一般都会自动配置环境，配置这个目的是可以在任何路径下使用 Git 和 Node.js，如果没有配置环境变量，可以去配置一下。

接下来，测试安装是否成功。

打开终端（Win + R，输入 cmd ，再回车），输入 node -v 如果返回了 x.x.x，说明安装成功。再输入 npm -v 如果返回了 x.x.x，说明安装成功。

这里会有一个 npm 没有 Node.js 却有的解决方案，还没写。

接着，打开 Git Bash，配置 Git 用户信息。先输入：

1	`git config --global user.name "<YourName>"`

其中 <YourName> 就是你的 Github 用户名。再输入：

1	`git config --global user.name "<YourEmail>"`

其中 <YourEmail> 就是你的 Github 绑定的邮箱。

注意：带引号！

二、开始！

注：全局使用 Git Bash。

全局安装 Hexo
1
npm i -g hexo-cli
需要一点时间，莫急。
创建博客项目

先创建一个文件夹（或直接用磁盘），右键文件夹，找 Open Git Bash Here ，没有请检查 显示更多选项 或安装情况。

再输入：
1
2
3
hexo init myblog cd myblog npm install
1. 创建文件夹并初始化，名字自拟，推荐用这个名字，后面有问题方便查错
2. 索引至文件夹
3. 安装依赖
本地预览

输入：
1
hexo s
如果无法访问，尝试切换端口。
1
hexo s -p 5000
其中的 5000 可以切换，默认 4000。

此时就可以看到 Hexo 自带主题了。
部署
1. 修改文件
修改 ~/myblog/_config.yml，在底部放上如下代码：
1
2
3
4
5
deploy: type: git repo: git@github.com:<YourName>/<YourName>.github.io.git branch: main
注意：注意空行与缩进，还有冒号与内容间的空格。
1. 安装部署插件
  
  在 Git Bash 里输入：
  1
  npm i hexo-deployer-git --save
  需要一点时间，莫急。等出现 ``
2. 部署
  1. 创建仓库
    
    在 Github 上创建一个名为 <YourName>.github.io 的仓库。
  2. 部署
    
    在 Git Bash 里输入：
    1
    hexo clean && hexo g -d
    需要一点时间，莫急。
    
    这时有些人就会出现一些问题了，但我还没开始写。

三、添加数学公式渲染

首先，删除渲染器，太菜了。

1	`npm un hexo-renderer-marked --save`

接下来就看你用什么渲染方式了。

用 mathjax：（不推荐）
1
npm i hexo-renderer-kramed --save

用 Katex：（强烈推荐）

1	`npm i hexo-renderer-markdown-it-katex --save`

那个 @upupming/hexo-renderer-markdown-it-plus 不好用，hexo-renderer-markdown-it-plus 已经停止维护了。

四、安装主题

Hexo 自带的主题丑死了，可以使用其他的主题，这里推荐 Beautify 和 Fluid 和 Next。

这里以 Fluid 为例，推荐直接主题覆盖，方便修改，请保证 Hexo 版本 5.0.0 以上。

首先：

1	`npm install --save hexo-theme-fluid`

然后在博客目录下创建 _config.fluid.yml，将主题的 _config.yml 的内容复制过去。

如果打不开，尝试用 bgithub.com 访问，实在不行复制下面的。

▶

_config.yml

#---------------------------
# Hexo Theme Fluid
# Author: Fluid-dev
# Github: https://github.com/fluid-dev/hexo-theme-fluid
#
# 配置指南: https://hexo.fluid-dev.com/docs/guide/
# 你可以从指南中获得更详细的说明
#
# Guide: https://hexo.fluid-dev.com/docs/en/guide/
# You can get more detailed help from the guide
#---------------------------


#---------------------------
# 全局
# Global
#---------------------------

# 用于浏览器标签的图标
# Icon for browser tab
favicon: /img/fluid.png

# 用于苹果设备的图标
# Icon for Apple touch
apple_touch_icon: /img/fluid.png

# 浏览器标签页中的标题分隔符，效果：文章名 - 站点名
# Title separator in browser tab, eg: article - site
tab_title_separator: " - "

# 强制所有链接升级为 HTTPS（适用于图片等资源出现 HTTP 混入报错）
# Force all links to be HTTPS (applicable to HTTP mixed error)
force_https: false

# 代码块的增强配置
# Enhancements to code blocks
code:
  # 是否开启复制代码的按钮
  # Enable copy code button
  copy_btn: true

  # 代码语言
  # Code language
  language:
    enable: true
    default: "TEXT"

  # 代码高亮
  # Code highlight
  highlight:
    enable: true

    # 代码块是否显示行号
    # If true, the code block display line numbers
    line_number: true

    # 实现高亮的库，对应下面的设置
    # Highlight library
    # Options: highlightjs | prismjs
    lib: "highlightjs"

    highlightjs:
      # 在链接中挑选 style 填入
      # Select a style in the link
      # See: https://highlightjs.org/demo/
      style: "github gist"
      style_dark: "dark"

    prismjs:
      # 在下方链接页面右侧的圆形按钮挑选 style 填入，也可以直接填入 css 链接
      # Select the style button on the right side of the link page, you can also set the CSS link
      # See: https://prismjs.com/
      style: "default"
      style_dark: "tomorrow night"

      # 设为 true 高亮将本地静态生成（但只支持部分 prismjs 插件），设为 false 高亮将在浏览器通过 js 生成
      # If true, it will be generated locally (but some prismjs plugins are not supported). If false, it will be generated via JS in the browser
      preprocess: true

# 一些好玩的功能
# Some fun features
fun_features:
  # 为 subtitle 添加打字机效果
  # Typing animation for subtitle
  typing:
    enable: true

    # 打印速度，数字越大越慢
    # Typing speed, the larger the number, the slower
    typeSpeed: 70

    # 游标字符
    # Cursor character
    cursorChar: "_"

    # 是否循环播放效果
    # If true, loop animation
    loop: false

    # 在指定页面开启，不填则在所有页面开启
    # Enable in specified page, all pages by default
    # Options: home | post | tag | category | about | links | page | 404
    scope: []

  # 为文章内容中的标题添加锚图标
  # Add an anchor icon to the title on the post page
  anchorjs:
    enable: true
    element: h1,h2,h3,h4,h5,h6
    # Options: left | right
    placement: left

    # Options: hover | always
    visible: hover

    # Options: § | # | ❡
    icon: ""

  # 加载进度条
  # Progress bar when loading
  progressbar:
    enable: true
    height_px: 3
    color: "#29d"
    # See: https://github.com/rstacruz/nprogress
    options: { showSpinner: false, trickleSpeed: 100 }

# 主题暗色模式，开启后菜单中会出现切换按钮，用户浏览器会存储切换选项，并且会遵循 prefers-color-scheme 自动切换
# Theme dark mode. If enable, a switch button will appear on the menu, each of the visitor's browser will store his switch option
dark_mode:
  enable: true
  # 默认的选项（当用户手动切换后则不再按照默认模式），选择 `auto` 会优先遵循 prefers-color-scheme，其次按用户本地时间 18 点到次日 6 点之间进入暗色模式
  # Default option (when the visitor switches manually, the default mode is no longer followed), choosing `auto` will give priority to prefers-color-scheme, and then enter the dark mode from 18:00 to 6:00 in the visitor's local time
  # Options: auto | light | dark
  default: auto

# 主题颜色配置，其他不生效的地方请使用自定义 css 解决，配色可以在下方链接中获得启发
# Theme color, please use custom CSS to solve other colors, color schema can be inspired by the links below
# See: https://www.webdesignrankings.com/resources/lolcolors/
color:
  # body 背景色
  # Color of body background
  body_bg_color: "#eee"
  # 暗色模式下的 body 背景色，下同
  # Color in dark mode, the same below
  body_bg_color_dark: "#181c27"

  # 顶部菜单背景色
  # Color of navigation bar background
  navbar_bg_color: "#2f4154"
  navbar_bg_color_dark: "#1f3144"

  # 顶部菜单字体色
  # Color of navigation bar text
  navbar_text_color: "#fff"
  navbar_text_color_dark: "#d0d0d0"

  # 副标题字体色
  # Color of subtitle text
  subtitle_color: "#fff"
  subtitle_color_dark: "#d0d0d0"

  # 全局字体色
  # Color of global text
  text_color: "#3c4858"
  text_color_dark: "#c4c6c9"

  # 全局次级字体色（摘要、简介等位置）
  # Color of global secondary text (excerpt, introduction, etc.)
  sec_text_color: "#718096"
  sec_text_color_dark: "#a7a9ad"

  # 主面板背景色
  # Color of main board
  board_color: "#fff"
  board_color_dark: "#252d38"

  # 文章正文字体色
  # Color of post text
  post_text_color: "#2c3e50"
  post_text_color_dark: "#c4c6c9"

  # 文章正文字体色（h1 h2 h3...）
  # Color of Article heading (h1 h2 h3...)
  post_heading_color: "#1a202c"
  post_heading_color_dark: "#c4c6c9"

  # 文章超链接字体色
  # Color of post link
  post_link_color: "#0366d6"
  post_link_color_dark: "#1589e9"

  # 超链接悬浮时字体色
  # Color of link when hovering
  link_hover_color: "#30a9de"
  link_hover_color_dark: "#30a9de"

  # 超链接悬浮背景色
  # Color of link background when hovering
  link_hover_bg_color: "#f8f9fa"
  link_hover_bg_color_dark: "#364151"

  # 分隔线和表格边线的颜色
  # Color of horizontal rule and table border
  line_color: "#eaecef"
  line_color_dark: "#435266"

  # 滚动条颜色
  # Color of scrollbar
  scrollbar_color: "#c4c6c9"
  scrollbar_color_dark: "#687582"
  # 滚动条悬浮颜色
  # Color of scrollbar when hovering
  scrollbar_hover_color: "#a6a6a6"
  scrollbar_hover_color_dark: "#9da8b3"

  # 按钮背景色
  # Color of button
  button_bg_color: "transparent"
  button_bg_color_dark: "transparent"
  # 按钮悬浮背景色
  # Color of button when hovering
  button_hover_bg_color: "#f2f3f5"
  button_hover_bg_color_dark: "#46647e"

# 主题字体配置
# Font
font:
  font_size: 16px
  font_family:
  letter_spacing: 0.02em
  code_font_size: 85%

# 指定自定义 .js 文件路径，支持列表；路径是相对 source 目录，如 /js/custom.js 对应存放目录 source/js/custom.js
# Specify the path of your custom js file, support list. The path is relative to the source directory, such as `/js/custom.js` corresponding to the directory `source/js/custom.js`
custom_js:

# 指定自定义 .css 文件路径，用法和 custom_js 相同
# The usage is the same as custom_js
custom_css:

# 网页访问统计
# Analysis of website visitors
web_analytics:
  enable: false

  # 遵循访客浏览器"请勿追踪"的设置，如果开启则不统计其访问
  # Follow the "Do Not Track" setting of the visitor's browser
  # See: https://www.w3.org/TR/tracking-dnt/
  follow_dnt: true

  # 百度统计的 Key，值需要获取下方链接中 `hm.js?` 后边的字符串
  # Baidu analytics, get the string behind `hm.js?`
  # See: https://tongji.baidu.com/sc-web/10000033910/home/site/getjs?siteId=13751376
  baidu:

  # Google Analytics 4 的媒体资源 ID
  # Google Analytics 4 MEASUREMENT_ID
  # See: https://support.google.com/analytics/answer/9744165#zippy=%2Cin-this-article
  google:
    measurement_id:

  # 腾讯统计的 H5 App ID，开启高级功能才有cid
  # Tencent analytics, set APP ID
  # See: https://mta.qq.com/h5/manage/ctr_app_manage
  tencent:
    sid:
    cid:

  # LeanCloud 计数统计，可用于 PV UV 展示，如果 `web_analytics: enable` 没有开启，PV UV 展示只会查询不会增加
  # LeanCloud count statistics, which can be used for PV UV display. If `web_analytics: enable` is false, PV UV display will only query and not increase
  leancloud:
    app_id:
    app_key:
    # REST API 服务器地址，国际版不填
    # Only the Chinese mainland users need to set
    server_url:
    # 统计页面时获取路径的属性
    # Get the attribute of the page path during statistics
    path: window.location.pathname
    # 开启后不统计本地路径( localhost 与 127.0.0.1 )
    # If true, ignore localhost & 127.0.0.1
    ignore_local: false

  # Umami Analytics，仅支持自部署。如果要展示 PV UV 需要填写所有配置项，否则只填写 `src` 和 `website_id` 即可
  # Umami Analytics, only Self-host support. If you want to display PV UV need to set all config items, otherwise only set 'src' and 'website_id'
  # See: https://umami.is/docs
  umami:
    # umami js 文件地址，需要在 umami 后台创建站点后获取
    # umami js file url, get after create website in umami
    src:

    # umami 的 website id，需要在 umami 后台创建站点后获取
    # umami website id, get after create website in umami
    website_id:

    # 如果你只想统计特定的域名可以填入此字段，多个域名通过逗号分隔，这可以避免统计 localhost。
    # If you only want to tracker to specific domains you can fill in this field, multiple domain names are separated by commas, which can avoid tracker localhost
    domains:

    # 用于统计 PV UV 的开始时间，格式为 "YYYY-MM-DD"
    # statistics on the start time, the format is "YYYY-MM-DD"
    start_time: 2024-01-01

    # 新建一个 umami viewOnly 用户，然后通过 login api 获取该用户 token
    # create an umami viewOnly user, and then get user token through the login api
    token:

    # 填写 umami 部署的服务器地址，如 "https://umami.example.com"
    # server url of umami deployment, such as "https://umami.example.com"
    api_server:

# Canonical 用于向 Google 搜索指定规范网址，开启前确保 hexo _config.yml 中配置 `url: http://yourdomain.com`
# Canonical, to specify a canonical URL for Google Search, need to set up `url: http://yourdomain.com` in hexo _config.yml
# See: https://support.google.com/webmasters/answer/139066
canonical:
  enable: false

# 对页面中的图片和评论插件进行懒加载处理，可见范围外的元素不会提前加载
# Lazy loading of images and comment plugin on the page
lazyload:
  enable: true

  # 加载时的占位图片
  # The placeholder image when loading
  loading_img: /img/loading.gif

  # 开启后懒加载仅在文章页生效，如果自定义页面需要使用，可以在 Front-matter 里指定 `lazyload: true`
  # If true, only enable lazyload on the post page. For custom pages, you can set 'lazyload: true' in front-matter
  onlypost: false

  # 触发加载的偏移倍数，基数是视窗高度，可根据部署环境的请求速度调节
  # The factor of viewport height that triggers loading
  offset_factor: 2

# 图标库，包含了大量社交类图标，主题依赖的不包含在内，因此可自行修改，详见 https://hexo.fluid-dev.com/docs/icon/
# Icon library, which includes many social icons, does not include those theme dependent, so your can modify link by yourself. See: https://hexo.fluid-dev.com/docs/en/icon/
iconfont: //at.alicdn.com/t/c/font_1736178_k526ubmyhba.css


#---------------------------
# 页头
# Header
#---------------------------

# 导航栏的相关配置
# Navigation bar
navbar:
  # 导航栏左侧的标题，为空则按 hexo config 中 `title` 显示
  # The title on the left side of the navigation bar. If empty, it is based on `title` in hexo config
  blog_title: "Fluid"

  # 导航栏毛玻璃特效，实验性功能，可能会造成页面滚动掉帧和抖动，部分浏览器不支持会自动不生效
  # Navigation bar frosted glass special animation. It is an experimental feature
  ground_glass:
    enable: false

    # 模糊像素，只能为数字，数字越大模糊度越高
    # Number of blurred pixel. the larger the number, the higher the blur
    px: 3

    # 不透明度，数字越大透明度越低，注意透明过度可能看不清菜单字体
    # Ratio of opacity, 1.0 is completely opaque
    # available: 0 - 1.0
    alpha: 0.7

  # 导航栏菜单，可自行增减，key 用来关联 languages/*.yml，如不存在关联则显示 key 本身的值；icon 是 css class，可以省略；增加 name 可以强制显示指定名称
  # Navigation bar menu. `key` is used to associate languages/*.yml. If there is no association, the value of `key` itself will be displayed; if `icon` is a css class, it can be omitted; adding `name` can force the display of the specified name
  menu:
    - { key: "home", link: "/", icon: "iconfont icon-home-fill" }
    - { key: "archive", link: "/archives/", icon: "iconfont icon-archive-fill" }
    - { key: "category", link: "/categories/", icon: "iconfont icon-category-fill" }
    - { key: "tag", link: "/tags/", icon: "iconfont icon-tags-fill" }
    - { key: "about", link: "/about/", icon: "iconfont icon-user-fill" }
    #- { key: "links", link: "/links/", icon: "iconfont icon-link-fill" }

# 搜索功能，基于 hexo-generator-search 插件，若已安装其他搜索插件请关闭此功能，以避免生成多余的索引文件
# Search feature, based on hexo-generator-search. If you have installed other search plugins, please disable this feature to avoid generating redundant index files
search:
  enable: true

  # 搜索索引文件的路径，可以是相对路径或外站的绝对路径
  # Path for search index file, it can be a relative path or an absolute path
  path: /local-search.xml

  # 文件生成在本地的位置，必须是相对路径
  # The location where the index file is generated locally, it must be a relative location
  generate_path: /local-search.xml

  # 搜索的范围
  # Search field
  # Options: post | page | all
  field: post

  # 搜索是否扫描正文
  # If true, search will scan the post content
  content: true

# 首屏图片的相关配置
# Config of the big image on the first screen
banner:
  # 视差滚动，图片与板块会随着屏幕滚动产生视差效果
  # Scrolling parallax
  parallax: true

  # 图片最小的宽高比，以免图片两边被过度裁剪，适用于移动端竖屏时，如需关闭设为 0
  # Minimum ratio of width to height, applicable to the vertical screen of mobile device, if you need to close it, set it to 0
  width_height_ratio: 1.0

# 向下滚动的箭头
# Scroll down arrow
scroll_down_arrow:
  enable: true

  # 头图高度不小于指定比例，才显示箭头
  # Only the height of the banner image is greater than the ratio, the arrow is displayed
  # Available: 0 - 100
  banner_height_limit: 80

  # 翻页后自动滚动
  # Auto scroll after page turning
  scroll_after_turning_page: true

# 向顶部滚动的箭头
# Scroll top arrow
scroll_top_arrow:
  enable: true

# Open Graph metadata
# See: https://hexo.io/docs/helpers.html#open-graph
open_graph:
  enable: true
  twitter_card: summary_large_image
  twitter_id:
  twitter_site:
  google_plus:
  fb_admins:
  fb_app_id:


#---------------------------
# 页脚
# Footer
#---------------------------
footer:
  # 页脚第一行文字的 HTML，建议保留 Fluid 的链接，用于向更多人推广本主题
  # HTML of the first line of the footer, it is recommended to keep the Fluid link to promote this theme to more people
  content: '
    <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
    <i class="iconfont icon-love"></i>
    <a href="https://bgithub.xyz/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>
  '

  # 展示网站的 PV、UV 统计数
  # Display website PV and UV statistics
  statistics:
    enable: false

    # 统计数据来源，使用 leancloud, umami 需要设置 `web_analytics` 中对应的参数；使用 busuanzi 不需要额外设置，但是有时不稳定，另外本地运行时 busuanzi 显示统计数据很大属于正常现象，部署后会正常
    # Data source. If use leancloud, umami, you need to set the parameter in `web_analytics`
    # Options: busuanzi | leancloud | umami
    source: "busuanzi"

  # 国内大陆服务器的备案信息
  # For Chinese mainland website policy, other areas keep disable
  beian:
    enable: false
    # ICP证号
    icp_text: 京ICP证123456号
    # 公安备案号，不填则只显示ICP
    police_text: 京公网安备12345678号
    # 公安备案的编号，用于URL跳转查询
    police_code: 12345678
    # 公安备案的图片. 为空时不显示备案图片
    police_icon: /img/police_beian.png


#---------------------------
# 首页
# Home Page
#---------------------------
index:
  # 首页 Banner 头图，可以是相对路径或绝对路径，以下相同
  # Path of Banner image, can be a relative path or an absolute path, the same on other pages
  banner_img: /img/default.png

  # 头图高度，屏幕百分比
  # Height ratio of banner image
  # Available: 0 - 100
  banner_img_height: 100

  # 头图黑色蒙版的不透明度，available: 0 - 1.0，1 是完全不透明
  # Opacity of the banner mask, 1.0 is completely opaque
  # Available: 0 - 1.0
  banner_mask_alpha: 0.3

  # 首页副标题的独立设置
  # Independent config of home page subtitle
  slogan:
    enable: true

    # 为空则按 hexo config.subtitle 显示
    # If empty, text based on `subtitle` in hexo config
    text: "An elegant Material-Design theme for Hexo"

    # 通过 API 接口作为首页副标题的内容，必须返回的是 JSON 格式，如果请求失败则按 text 字段显示，该功能必须先开启 typing 打字机功能
    # Subtitle of the homepage through the API, must be returned a JSON. If the request fails, it will be displayed in `text` value. This feature must first enable the typing animation
    api:
      enable: false

      # 请求地址
      # Request url
      url: ""

      # 请求方法
      # Request method
      # Available: GET | POST | PUT
      method: "GET"

      # 请求头
      # Request headers
      headers: {}

      # 从请求结果获取字符串的取值字段，最终必须是一个字符串，例如返回结果为 {"data": {"author": "fluid", "content": "An elegant theme"}}, 则取值字段为 ['data', 'content']；如果返回是列表则自动选择第一项
      # The value field of the string obtained from the response. For example, the response content is {"data": {"author": "fluid", "content": "An elegant theme"}}, the expected `keys: ['data','content']`; if the return is a list, the first item is automatically selected
      keys: []

  # 自动截取文章摘要
  # Auto extract post
  auto_excerpt:
    enable: true

  # 打开文章的标签方式
  # The browser tag to open the post
  # Available: _blank | _self
  post_url_target: _self

  # 是否显示文章信息（时间、分类、标签）
  # Meta information of post
  post_meta:
    date: true
    category: true
    tag: true

  # 文章通过 sticky 排序后，在首页文章标题前显示图标
  # If the posts are sorted by `sticky`, an icon is displayed in front of the post title
  post_sticky:
    enable: true
    icon: "iconfont icon-top"


#---------------------------
# 文章页
# Post Page
#---------------------------
post:
  banner_img: /img/default.png
  banner_img_height: 70
  banner_mask_alpha: 0.3

  # 文章在首页的默认封面图，当没有指定 index_img 时会使用该图片，若两者都为空则不显示任何图片
  # Path of the default post cover when `index_img` is not set. If both are empty, no image will be displayed
  default_index_img:

  # 文章标题下方的元信息
  # Meta information below title
  meta:
    # 作者，优先根据 front-matter 里 author 字段，其次是 hexo 配置中 author 值
    # Author, based on `author` field in front-matter, if not set, based on `author` value in hexo config
    author:
      enable: false

    # 文章日期，优先根据 front-matter 里 date 字段，其次是 md 文件日期
    # Post date, based on `date` field in front-matter, if not set, based on create date of .md file
    date:
      enable: true
      # 格式参照 ISO-8601 日期格式化
      # ISO-8601 date format
      # See: http://momentjs.cn/docs/#/parsing/string-format/
      format: "LL a"

    # 字数统计
    # Word count
    wordcount:
      enable: true

    # 估计阅读全文需要的时长
    # Estimated reading time
    min2read:
      enable: true
      # 每个字词的长度，建议：中文≈2，英文≈5，中英混合可自行调节
      # Average word length (chars count in word), ZH ≈ 2, EN ≈ 5
      awl: 2
      # 每分钟阅读字数，如果大部分是技术文章可适度调低
      # Words per minute
      wpm: 60

    # 浏览量计数
    # Number of visits
    views:
      enable: false
      # 统计数据来源
      # Data Source
      # Options: busuanzi | leancloud | umami
      source: "busuanzi"

  # 在文章开头显示文章更新时间，该时间默认是 md 文件更新时间，可通过 front-matter 中 `updated` 手动指定（和 date 一样格式）
  # Update date is displayed at the beginning of the post. The default date is the update date of the md file, which can be manually specified by `updated` in front-matter (same format as date)
  updated:
    enable: false

    # 格式参照 ISO-8601 日期格式化
    # ISO-8601 date format
    # See: http://momentjs.cn/docs/#/parsing/string-format/
    date_format: "LL a"

    # 是否使用相对时间表示，比如："3 天前"
    # If true, it will be a relative time, such as: "3 days ago"
    relative: false

    # 提示标签类型
    # Note class
    # Options: default | primary | info | success | warning | danger | light
    note_class: info

  # 侧边栏展示当前分类下的文章
  # Sidebar of category
  category_bar:
    enable: true

    # 开启后，只有在文章 Front-matter 里指定 `category_bar: true` 才会展示分类，也可以通过 `category_bar: ["分类A"]` 来指定分类
    # If true, only set `category_bar: true` in Front-matter will enable sidebar of category, also set `category_bar: ["CategoryA"]` to specify categories
    specific: true

    # 置于板块的左侧或右侧
    # place in the board
    # Options: left | right
    placement: left

    # 文章的排序字段，前面带减号是倒序，不带减号是正序
    # Sort field for posts, with a minus sign is reverse order
    # Options: date | title | or other field of front-matter
    post_order_by: "title"

    # 单个分类中折叠展示文章数的最大值，超过限制会显示 More，0 则不限制
    # The maximum number of posts in a single category. If the limit is exceeded, it will be displayed More. If 0 no limit
    post_limit: 0

  # 侧边栏展示文章目录
  # Table of contents (TOC) in the sidebar
  toc:
    enable: true

    # 置于板块的左侧或右侧
    # place in the board
    # Options: left | right
    placement: right

    # 目录会选择这些节点作为标题
    # TOC will select these nodes as headings
    headingSelector: "h1,h2,h3,h4,h5,h6"

    # 层级的折叠深度，0 是全部折叠，大于 0 后如果存在下级标题则默认展开
    # Collapse depth. If 0, all headings collapsed. If greater than 0, it will be expanded by default if there are sub headings
    collapseDepth: 0

  # 版权声明，会显示在每篇文章的结尾
  # Copyright, will be displayed at the end of each post
  copyright:
    enable: true

    # CreativeCommons license
    # See: https://creativecommons.org/share-your-work/cclicenses/
    # Options: BY | BY-SA | BY-ND | BY-NC | BY-NC-SA | BY-NC-ND | ZERO
    license: 'BY'

    # 显示作者
    author:
      enable: true

    # 显示发布日期
    # Show post date
    post_date:
      enable: true
      format: "LL"

    # 显示更新日期
    # Show update date
    update_date:
      enable: false
      format: "LL"

  # 文章底部上一篇下一篇功能
  # Link to previous/next post
  prev_next:
    enable: true

  # 文章图片标题
  # Image caption
  image_caption:
    enable: true

  # 文章图片可点击放大
  # Zoom feature of images
  image_zoom:
    enable: true
    # 放大后图片链接替换规则，可用于将压缩图片链接替换为原图片链接，如 ['-slim', ''] 是将链接中 `-slim` 移除；如果想使用正则请使用 `re:` 前缀，如 ['re:\\d{3,4}\\/\\d{3,4}\\/', '']
    # The image url replacement when zooming, the feature can be used to replace the compressed image to the original image, eg: ['-slim', ''] removes `-slim` from the image url when zooming; if you want to use regular, use prefix `re:`, eg: ['re:\\d{3,4}\\/\\d{3,4}\\/','']
    img_url_replace: ['', '']

  # 脚注语法，会在文章底部生成脚注，如果 Markdown 渲染器本身支持，则建议关闭，否则可能会冲突
  # Support footnote syntax, footnotes will be generated at the bottom of the post page. If the Markdown renderer itself supports it, please disable it, otherwise it may conflict
  footnote:
    enable: true
    # 脚注的节标题，也可以在 front-matter 中通过 `footnote: <h2>Reference</h2>` 这种形式修改单独页面的 header
    # The section title of the footnote, you can also modify the header of a single page in the form of `footnote: <h2>Reference</h2>` in front-matter
    header: ''

  # 数学公式，开启之前需要更换 Markdown 渲染器，否则复杂公式会有兼容问题，具体请见：https://hexo.fluid-dev.com/docs/guide/##latex-数学公式
  # Mathematical formula. If enable, you need to change the Markdown renderer, see: https://hexo.fluid-dev.com/docs/en/guide/#math
  math:
    # 开启后文章默认可用，自定义页面如需使用，需在 Front-matter 中指定 `math: true`
    # If you want to use math on the custom page, you need to set `math: true` in Front-matter
    enable: false

    # 开启后，只有在文章 Front-matter 里指定 `math: true` 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度
    # If true, only set `math: true` in Front-matter will enable math, to load faster when the page does not contain math
    specific: false

    # Options: mathjax | katex
    engine: mathjax

  # 流程图，基于 mermaid-js，具体请见：https://hexo.fluid-dev.com/docs/guide/#mermaid-流程图
  # Flow chart, based on mermaid-js, see: https://hexo.fluid-dev.com/docs/en/guide/#mermaid
  mermaid:
    # 开启后文章默认可用，自定义页面如需使用，需在 Front-matter 中指定 `mermaid: true`
    # If you want to use mermaid on the custom page, you need to set `mermaid: true` in Front-matter
    enable: false

    # 开启后，只有在文章 Front-matter 里指定 `mermaid: true` 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度
    # If true, only set `mermaid: true` in Front-matter will enable mermaid, to load faster when the page does not contain mermaid
    specific: false

    # See: http://mermaid-js.github.io/mermaid/
    options: { theme: 'default' }

  # 评论插件
  # Comment plugin
  comments:
    enable: false
    # 指定的插件，需要同时设置对应插件的必要参数
    # The specified plugin needs to set the necessary parameters at the same time
    # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus | discuss
    type: disqus


#---------------------------
# 评论插件
# Comment plugins
#
# 开启评论需要先设置上方 `post: comments: enable: true`，然后根据 `type` 设置下方对应的评论插件参数
# Enable comments need to be set `post: comments: enable: true`, then set the corresponding comment plugin parameters below according to `type`
#---------------------------

# Utterances
# 基于 GitHub Issues
# Based on GitHub Issues
# See: https://utteranc.es
utterances:
  repo:
  issue_term: pathname
  label: utterances
  theme: github-light
  theme_dark: github-dark

# Disqus
# 基于第三方的服务，国内用户直接使用容易被墙，建议配合 Disqusjs
# Based on third-party service
# See: https://disqus.com
disqus:
  shortname:
  # 以下为 Disqusjs 支持, 国内用户如果想使用 Disqus 建议配合使用
  # The following are Disqusjs configurations, please ignore if DisqusJS is not required
  # See: https://github.com/SukkaW/DisqusJS
  disqusjs: false
  apikey:

# Gitalk
# 基于 GitHub Issues
# Based on GitHub Issues
# See: https://github.com/gitalk/gitalk#options
gitalk:
  clientID:
  clientSecret:
  repo:
  owner:
  admin: ['name']
  language: zh-CN
  labels: ['Gitalk']
  perPage: 10
  pagerDirection: last
  distractionFreeMode: false
  createIssueManually: true
  # 默认 proxy 可能会失效，解决方法请见下方链接
  # The default proxy may be invalid, refer to the links for solutions
  # https://github.com/gitalk/gitalk/issues/429
  # https://github.com/Zibri/cloudflare-cors-anywhere
  proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token

# Valine
# 基于 LeanCloud
# Based on LeanCloud
# See: https://valine.js.org/
valine:
  appId:
  appKey:
  path: window.location.pathname
  placeholder:
  avatar: 'retro'
  meta: ['nick', 'mail', 'link']
  requiredFields: []
  pageSize: 10
  lang: 'zh-CN'
  highlight: false
  recordIP: false
  serverURLs: ''
  emojiCDN:
  emojiMaps:
  enableQQ: false

# Waline
# 从 Valine 衍生而来，额外增加了服务端和多种功能
# Derived from Valine, with self-hosted service and new features
# See: https://waline.js.org/
waline:
  serverURL: ''
  path: window.location.pathname
  meta: ['nick', 'mail', 'link']
  requiredMeta: ['nick']
  lang: 'zh-CN'
  emoji: ['https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo']
  dark: 'html[data-user-color-scheme="dark"]'
  wordLimit: 0
  pageSize: 10

# 畅言 Changyan
# 基于第三方的服务
# Based on third-party service, insufficient support for regions outside China
# http://changyan.kuaizhan.com
changyan:
  appid: ''
  appkey: ''

# 来必力 Livere
# 基于第三方的服务
# Based on third-party service
# See: https://www.livere.com
livere:
  uid: ''

# Remark42
# 需要自托管服务端
# Based on self-hosted service
# See: https://remark42.com
remark42:
  host:
  site_id:
  max_shown_comments: 10
  locale: zh
  components: ['embed']

# Twikoo
# 支持腾讯云、Vercel、Railway 等多种平台部署
# Based on Tencent CloudBase
# See: https://twikoo.js.org
twikoo:
  envId:
  region: ap-shanghai
  path: window.location.pathname

# Cusdis
# 基于第三方服务或自托管服务
# Based on third-party or self-hosted service
# See https://cusdis.com
cusdis:
  host:
  app_id:
  lang: zh-cn

# Giscus
# 基于 GitHub Discussions，类似于 Utterances
# Based on GitHub Discussions, similar to Utterances
# See: https://giscus.app/
giscus:
  repo:
  repo-id:
  category:
  category-id:
  theme-light: light
  theme-dark: dark
  mapping: pathname
  reactions-enabled: 1
  emit-metadata: 0
  input-position: top
  lang: zh-CN

# Discuss
# 多平台、多数据库、自托管、免费开源评论系统
# Self-hosted, small size, multi-platform, multi-database, free and open source commenting system
# See: https://discuss.js.org
discuss:
  serverURLs:
  path: window.location.pathname


#---------------------------
# 归档页
# Archive Page
#---------------------------
archive:
  banner_img: /img/default.png
  banner_img_height: 60
  banner_mask_alpha: 0.3


#---------------------------
# 分类页
# Category Page
#---------------------------
category:
  enable: true
  banner_img: /img/default.png
  banner_img_height: 60
  banner_mask_alpha: 0.3

  # 分类的排序字段，前面带减号是倒序，不带减号是正序
  # Sort field for categories, with a minus sign is reverse order
  # Options: length | name
  order_by: "-length"

  # 层级的折叠深度，0 是全部折叠，大于 0 后如果存在子分类则默认展开
  # Collapse depth. If 0, all posts collapsed. If greater than 0, it will be expanded by default if there are subcategories
  collapse_depth: 0

  # 文章的排序字段，前面带减号是倒序，不带减号是正序
  # Sort field for posts, with a minus sign is reverse order
  # Options: date | title | or other field of front-matter
  post_order_by: "-date"

  # 单个分类中折叠展示文章数的最大值，超过限制会显示 More，0 则不限制
  # The maximum number of posts in a single category. If the limit is exceeded, it will be displayed More. If 0 no limit
  post_limit: 10


#---------------------------
# 标签页
# Tag Page
#---------------------------
tag:
  enable: true
  banner_img: /img/default.png
  banner_img_height: 80
  banner_mask_alpha: 0.3
  tagcloud:
    min_font: 15
    max_font: 30
    unit: px
    start_color: "#BBBBEE"
    end_color: "#337ab7"


#---------------------------
# 关于页
# About Page
#---------------------------
about:
  enable: true
  banner_img: /img/default.png
  banner_img_height: 60
  banner_mask_alpha: 0.3
  avatar: /img/avatar.png
  name: "Fluid"
  intro: "An elegant theme for Hexo"
  # 更多图标可从 https://hexo.fluid-dev.com/docs/icon/ 查找，`class` 代表图标的 css class，添加 `qrcode` 后，图标不再是链接而是悬浮二维码
  # More icons can be found from https://hexo.fluid-dev.com/docs/en/icon/  `class` is the css class of the icon. If adding `qrcode`, the icon is no longer a link, but a hovering QR code
  icons:
    - { class: "iconfont icon-github-fill", link: "https://bgithub.xyz", tip: "GitHub" }
    - { class: "iconfont icon-douban-fill", link: "https://douban.com", tip: "豆瓣" }
    - { class: "iconfont icon-wechat-fill", qrcode: "/img/favicon.png" }


#---------------------------
# 自定义页
# Custom Page
#
# 通过 hexo new page 命令创建的页面
# Custom Page through `hexo new page`
#---------------------------
page:
  banner_img: /img/default.png
  banner_img_height: 60
  banner_mask_alpha: 0.3


#---------------------------
# 404页
# 404 Page
#---------------------------
page404:
  enable: true
  banner_img: /img/default.png
  banner_img_height: 85
  banner_mask_alpha: 0.3
  # 重定向到首页的延迟(毫秒)
  # Delay in redirecting to home page (milliseconds)
  redirect_delay: 5000


#---------------------------
# 友链页
# Links Page
#---------------------------
links:
  enable: true
  banner_img: /img/default.png
  banner_img_height: 60
  banner_mask_alpha: 0.3
  # 友链的成员项
  # Member item of page
  items:
    - {
      title: "Fluid Blog",
      intro: "主题博客",
      link: "https://hexo.fluid-dev.com/",
      avatar: "/img/favicon.png"
    }
    - {
      title: "Fluid Docs",
      intro: "主题使用指南",
      link: "https://hexo.fluid-dev.com/docs/",
      avatar: "/img/favicon.png"
    }
    - {
      title: "Fluid Repo",
      intro: "主题 GitHub 仓库",
      link: "https://bgithub.xyz/fluid-dev/hexo-theme-fluid",
      avatar: "/img/favicon.png"
    }

  # 当成员头像加载失败时，替换为指定图片
  # When the member avatar fails to load, replace the specified image
  onerror_avatar: /img/avatar.png

  # 友链下方自定义区域，支持 HTML，可插入例如申请友链的文字
  # Custom content at the bottom of the links
  custom:
    enable: false
    content: '<hr><p>在下方留言申请加入我的友链，按如下格式提供信息：</p><ul><li>博客名：Fluid</li><li>简介：Fluid 主题官方博客</li><li>链接：https://hexo.fluid-dev.com</li><li>图片：https://hexo.fluid-dev.com/img/favicon.png</li></ul>'

  # 评论插件
  # Comment plugin
  comments:
    enable: false
    # 指定的插件，需要同时设置对应插件的必要参数
    # The specified plugin needs to set the necessary parameters at the same time
    # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus | discuss
    type: disqus


#---------------------------
# 以下是配置 JS CSS 等静态资源的 URL 前缀，可以自定义成 CDN 地址，
# 如果需要修改，最好使用与默认配置相同的版本，以避免潜在的问题，
# ** 如果你不知道如何设置，请不要做任何改动 **
#
# Here is the url prefix to configure the static assets. Set CDN addresses you want to customize.
# Be aware that you would better use the same version as default ones to avoid potential problems.
# DO NOT EDIT THE FOLLOWING SETTINGS UNLESS YOU KNOW WHAT YOU ARE DOING
#---------------------------

static_prefix:
  # 内部静态
  # Internal static
  internal_js: /js
  internal_css: /css
  internal_img: /img

  anchor: https://lib.baomitu.com/anchor-js/5.0.0/

  github_markdown: https://lib.baomitu.com/github-markdown-css/4.0.0/

  jquery: https://lib.baomitu.com/jquery/3.6.4/

  bootstrap: https://lib.baomitu.com/twitter-bootstrap/4.6.1/

  prismjs: https://lib.baomitu.com/prism/1.29.0/

  tocbot: https://lib.baomitu.com/tocbot/4.20.1/

  typed: https://lib.baomitu.com/typed.js/2.0.12/

  fancybox: https://lib.baomitu.com/fancybox/3.5.7/

  nprogress: https://lib.baomitu.com/nprogress/0.2.0/

  mathjax: https://lib.baomitu.com/mathjax/3.2.2/

  katex: https://lib.baomitu.com/KaTeX/0.16.2/

  busuanzi: https://busuanzi.ibruce.info/busuanzi/2.3/

  clipboard: https://lib.baomitu.com/clipboard.js/2.0.11/

  mermaid: https://lib.baomitu.com/mermaid/8.14.0/

  valine: https://lib.baomitu.com/valine/1.5.1/

  waline: https://registry.npmmirror.com/@waline/client/2.15.8/files/dist/

  gitalk: https://lib.baomitu.com/gitalk/1.8.0/

  disqusjs: https://lib.baomitu.com/disqusjs/1.3.0/

  twikoo: https://lib.baomitu.com/twikoo/1.6.8/

  discuss: https://lib.baomitu.com/discuss/1.2.1/

  hint: https://lib.baomitu.com/hint.css/2.7.0/

  moment: https://lib.baomitu.com/moment.js/2.29.4/

记得改主题和语言。

1	`theme: fluid`

1	`language: zh-CN`

至此，博客就已经很不错了。

五、美化

美化菜单：

添加运行时间

在 footer 的 content 里添加如下代码：

▶

代码

<div style="font-size: 0.85rem">
  <span id="timeDate">load</span>
  <span id="times">ing...</span>
  <script>
    !(function () {
      /** 计时起始时间，自行修改 **/
      var start = new Date("2025/05/05 13:00:00");

    function update() {
        var now = new Date();
    now.setTime(now.getTime() + 250);
    days = (now - start) / 1000 / 60 / 60 / 24;
    dnum = Math.floor(days);
    hours = (now - start) / 1000 / 60 / 60 - (24 * dnum);
    hnum = Math.floor(hours);
    if (String(hnum).length === 1) {
      hnum = "0" + hnum;
        }
    minutes = (now - start) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
    mnum = Math.floor(minutes);
    if (String(mnum).length === 1) {
      mnum = "0" + mnum;
        }
    seconds = (now - start) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
    snum = Math.round(seconds);
    if (String(snum).length === 1) {
      snum = "0" + snum;
        }
    document.getElementById("timeDate").innerHTML = "本站安全运行&nbsp" + dnum + "&nbsp天";
    document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒";
      }

    update();
    setInterval(update, 1000);
    })();
  </script>
</div>

起始时间可自行修改，注意格式。

添加热力图

这里提供一个简单的 API [Github Chart API](Github Chart API)

直接在需要的位置添加如下 HTML 语句即可，注意将 GitHub 用户名修改为你自己的。

1	`<img src="https://ghchart.rshah.org/zhangyimin12345" alt="zhangyimin12345's Github chart" />`

也可以改变颜色，支持 $16$ 进制色（就是那个 409ba5）。

1	`<img src="https://ghchart.rshah.org/409ba5/zhangyimin12345" alt="emoryhuang's Github chart" />`

添加看板娘

向你的 Hexo 里放上一只二次元看板娘。

先在 Git Bash 里添加插件：

1	`npm i --save hexo-helper-live2d`

向 Hexo 的 _config.yml 文件添加如下配置:

▶

代码

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-tororo  ## 更换为你的模型
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7

可以前往这里查看所有模型，也可以看下面的。

▶

菜单

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

然后再 Git Bash 中安装你喜欢的模型：

1	`npm i <模型的包名>`

将包名输入位于 _config.yml 的 model 的 use 中。

1 2	`model: use: <模型的包名>`

接下来的都添加在 custom_js 或 custom_css 里。

添加动态彩带

1	`- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/DynamicRibbon.min.js`

添加静态彩带

1	`- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/Ribbon.min.js`

添加动态黑色线条

1	`- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/DynamicLine.min.js`

添加小雪花飘落

1	`- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/snowflake.min.js`

添加樱花飘落

1	`- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/Cherry.min.js`

添加鼠标火花跟随

1	`- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/star.min.js`

添加鼠标点击出爱心

1	`- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/love.min.js`

添加鼠标点击出字

1	`- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/containsWord.min.js`

添加打字特效

1	`- https://static.kevinchu.top/blog/assets/js/typing-effect.js`

自定义鼠标指针

1	`- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/shubiao.css`

自定义滚动条颜色

1	`- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/shubiao.css`

自定义头部打字机颜色效果渐变

1	`- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/gradient.css`

自定义字体

这里推荐 霞鹜文楷 。

在 custom_css 添加：

1 2	`custom_css: - https://cdn.bootcdn.net/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/style.min.css #调用字体`

这个格式是为了方便多行调用，这里用的 css 是 bootcdn 的，速度很快，一般不会跑路。

再应用字体：（font 的 font_family）

1	`font_family: LXGW WenKai Screen`

友链美化

新建 links.css，放入以下代码：

a.card-body.hover-with-bg {
  border-left: 5px solid #72ffb7;
  background: #00000080;
  color: #fff;
  box-shadow: 0 5px 10px #00000050;
  transition: all .5s;
}

a.card-body.hover-with-bg img {
  transition: all 5s;
  border: 2px solid #fff;
}

a.card-body.hover-with-bg:hover img{
  transform: rotate(1080deg);
}

.link-intro {
  color: #293239;
  font-weight: 600;
  font-family: auto;
}

a.card-body.hover-with-bg:hover {
  border-left-width: 15px;
  background-color: #fff;
}

再调用：

1 2	`custom_css: - /css/links.css`

文字选中样式

/source/css 目录新建 selection.css，代码如下：

::selection {
  background: #ffffff00;
  color: #f00;
}

.icon {
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

pre::selection, pre ::selection {
  background: #fff;
}

[data-user-color-scheme='dark'] pre::selection, [data-user-color-scheme='dark'] pre ::selection {
  background: #424858;
  color: #fff;
}

/* 标题,目录...不可选中 */
h1, h2, h3, h4, h5, h6, .line, footer, #toc, time, #subtitle.h2, .nav-link, .post-meta.mr-2, #busuanzi_container_page_pv, .note, .hover-with-bg {
  moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select:none;
  -khtml-user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

记得引入。

Mac-border

如果你觉得 Fluid 的代码框不太合你口味，可以尝试一下。

.hljs-comment, .hljs-quote {
  color: #ff6262;
  font-family: auto;
  font-style: normal;
}


figure.highlight {
  background: #838383;
  border-radius: 5px;
  padding-top: 30px;
  box-shadow: 0 5px 10px #a1a1a1;
}

[data-user-color-scheme='dark'] figure.highlight {
  background: #000;
}

/* 该伪元素用于展示代码语言,若不需要可删除 */
figure.highlight::before {
  content: attr(data-type);
  z-index: 999;
  color: #ff8d33;
  display: block;
  width: 100%;
  position: absolute;
  top: 2px;
  text-align: center;
  font-weight: 600;
}

figure.highlight::after {
  background: #fc625d;
  border-radius: 100%;
  box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
  content: '';
  height: 12px;
  width: 12px;
  position: absolute;
  top: 9px;
  left: 12px;
}

.hljs {
  background-color: #00000000;
}

/* 代码块颜色 */
figure.highlight tr {
  background-color: #f9fffa;
}

[data-user-color-scheme='dark'] .markdown-body table tr {
  background-color: #25272d;
}

figure.highlight > table {
  border-radius: 0 0 5px 5px;
}

.gutter {
  background-color: #f9fffa;
}

[data-user-color-scheme='dark'] .gutter {
  background-color: #25272d;
}

注意：line_number 得是 true。

代码块显示文件路径

p.file-path + figure.highlight {
  border-top-left-radius: 0;
}

p.file-path {
font-family: 华文新魏,SSTXinwei;
color: #9ce159;
background: #838383;
border-radius: 5px 0 0 0;
height: 1.6rem;
margin-bottom: -0.5rem;
padding: 0 0.2rem 0 0.2rem;
display: inline-block;
font-weight: 600;
position: relative;
top: 1.5rem;
filter: drop-shadow(0 0 4px #a1a1a1);
}

p.file-path>span {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  text-align: left;
  max-width: 500px;
}

@media (max-width: 768px) {
  p.file-path>span {
    max-width: 300px;
  }
}

@media (max-width: 500px) {
  p.file-path>span {
    max-width: 160px;
  }
}

[data-user-color-scheme='dark'] p.file-path {
  background: #000;
}

p.file-path::before {
content: '🔖 Path:/';
color: #ff7e7e;
font-weight: 700;
position: relative;
top: -0.4rem;
}

p.file-path::after {
content: '';
display: inline-block;
width: 0;
height: 0;
position: absolute;
border-width: 20px;
border-top: 0.8rem solid #00000000;
border-bottom: 0.8rem solid #00000000;
right: -1.2rem;
border-left: 20px solid #838383;
}

[data-user-color-scheme='dark'] p.file-path::after {
  border-left: 20px solid #000;
}

使用方式：

<p class="file-path"><span>这里写路径</span></p>
```cpp
# include <bits/stdc++.h>
```

显示代码语言

const languageStyle = (str) => {
  /* 单独优化 */
  if (['js', 'javascript'].includes(str)) return 'JavaScript'
  if (['ts', 'typescript'].includes(str)) return 'TypeScript'
  /* 曲线救国(Highlight不支持vue) */
  if (str === 'xml') return 'Vue'
  
  // return str
  /* 全小写风格 */
  return str.toUpperCase()
  /*全大写风格 */
  // return str[0].toUpperCase() + str.substring(1)
  /*首字母大写风格 */
}

document.querySelectorAll('figure.highlight').forEach((item) => {
  item.setAttribute('data-type', languageStyle(item.getAttribute('class').substring(10)))
})

毛玻璃主面板

先调整 _config.fluid.yml：

1 2	`board_color: "#ffffffad" board_color_dark: "#000000ad"`

再添加 css 文件：

#board {
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

#toc {
  padding: 10px;
  top: 4rem;
  background-color: var(--board-bg-color);
  border-radius: 10px;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

标签变化

var  OriginTitle  =  document.title;

var  titleTime;

document.addEventListener('visibilitychange', function () {

 if (document.hidden) {

 document.title  =  '(ง •̀_•́)ง‼这里是 zhangyimin12345 的博客~';

 clearTimeout(titleTime);

    }

 else {

 document.title  =  '( つ•̀ω•́)つ欢迎回来！';

 titleTime  =  setTimeout(function () {

 document.title  =  OriginTitle;

}, 2000);

    }

});

文章滑入动画

const  cards  =  document.querySelectorAll('.index-card')

if (cards.length) {

 document.querySelector('.row').setAttribute('style', 'overflow: hidden;')

 const  coefficient  =  document.documentElement.clientWidth  >  768  ?  .5  :  .3

 const  origin  =  document.documentElement.clientHeight  -  cards[0].getBoundingClientRect().height  *  coefficient

 function  throttle(fn, wait) {

 let  timer  =  null;

 return  function () {

 const  context  =  this;

 const  args  =  arguments;

 if (!timer) {

 timer  =  setTimeout(function () {

 fn.apply(context, args);

 timer  =  null;

}, wait)

      }

    }

  }

 function  handle() {

 cards.forEach(card  => {

 card.setAttribute('style', `--state: ${(card.getBoundingClientRect().top - origin) < 0 ? 1 : 0};`)

    })

 console.log(1)

  }

 document.addEventListener("scroll", throttle(handle, 100));

}

还有 css：

.index-card {
  transition: all 0.5s;
  transform: scale(calc(1.5 - 0.5 * var(--state)));
  opacity: var(--state);
  margin-bottom: 2rem;
}

.index-img img {
  margin: 20px 0;
}

导航栏标题添加霓虹灯特效

修改 themes\fluid\source\css\_pages\_base\_widget\header.styl，在里面追加样式(注意缩进)：

.navbar-title
  outline none
  --c lightseagreen
  text-shadow 0 0 10px var(--c),0 0 20px var(--c),0 0 40px var(--c),0 0 80px var(--c),0 0 160px var(--c)
  animation animate 5s linear infinite

@keyframes animate{
  to{
      filter: hue-rotate(360deg)
  }
}

然后修改 themes\fluid\layout\_partials\header\navigation.ejs，
找到对应导航栏标题的标签内容：
<strong><%= theme.navbar.blog_title || config.title %></strong>
给其添加上 class 属性，修改为：
<strong class="navbar-title"><%= theme.navbar.blog_title || config.title %></strong>

首屏图片添加上升气泡特效

修改 themes\fluid\layout\_partials\header\banner.ejs，在 <div class="full-bg-img">标签下追加代码（与其子标签 <div class="mask flex-center" style="background-color: rgba(0, 0, 0, <%= parseFloat(banner_mask_alpha) %>)"> 标签同级）：

<% if(in_scope('home')) { %>
  <div style="height:500px" id="bubbles"></div>
  <script>
    circleMagic();
    function circleMagic(options) {
        let width;
        let height;
        let canvas;
        let ctx;
        let animateHeader = true;
        const circles = [];

        const settings = options || {
            color: 'rgba(255,255,255,.3)',
            radius: 10,
            density: 0.1,
            clearOffset: 0.7
        }

        const container = document.getElementById('bubbles');
        initContainer();
        addListeners();

        function initContainer() {
            width = container.offsetWidth;
            height = container.offsetHeight - 120;

            initCanvas();
            canvas = document.getElementById('homeTopCanvas');
            canvas.width = width;
            canvas.height = height;
            canvas.style.position = 'absolute';
            canvas.style.left = '0';
            canvas.style.bottom = '0';
            ctx = canvas.getContext('2d');

            for (let x = 0; x < width * settings.density; x++) {
                const c = new Circle();
                circles.push(c);
            }
            animate();
        }

        function initCanvas() {
            const canvasElement = document.createElement('canvas');
            canvasElement.id = 'homeTopCanvas';
            canvasElement.style.pointerEvents = 'none';
            container.appendChild(canvasElement);
            canvasElement.parentElement.style.overflow = 'hidden';
        }

        function addListeners() {
            window.addEventListener('scroll', scrollCheck, false);
            window.addEventListener('resize', resize, false);
        }

        function scrollCheck() {
            if (document.body.scrollTop > height) {
                animateHeader = false;
            } else {
                animateHeader = true;
            }
        }

        function resize() {
            width = container.clientWidth;
            height = container.clientHeight;
            container.height = height + 'px';
            canvas.width = width;
            canvas.height = height;
        }

        function animate() {
            if (animateHeader) {
                ctx.clearRect(0, 0, width, height);
                for (const i in circles) {
                    circles[i].draw();
                }
            }
            requestAnimationFrame(animate);
        }

        function randomColor() {
            const r = Math.floor(Math.random() * 255);
            const g = Math.floor(Math.random() * 255);
            const b = Math.floor(Math.random() * 255);
            const alpha = Math.random().toPrecision(2);
            return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
        }

        function Circle() {
            const that = this;
            (function () {
                that.pos = {};
                init();
            })();
            function init() {
                that.pos.x = Math.random() * width;
                that.pos.y = height + Math.random() * 100;
                that.alpha = 0.1 + Math.random() * settings.clearOffset;
                that.scale = 0.1 + Math.random() * 0.3;
                that.speed = Math.random();
                if (settings.color === 'random') {
                    that.color = randomColor();
                } else {
                    that.color = settings.color;
                }
            }
            this.draw = function () {
                if (that.alpha <= 0) {
                    init();
                }
                that.pos.y -= that.speed;
                that.alpha -= 0.0005;
                ctx.beginPath();
                ctx.arc(
                    that.pos.x,
                    that.pos.y,
                    that.scale * settings.radius,
                    0,
                    2 * Math.PI,
                    false
                );
                ctx.fillStyle = that.color;
                ctx.fill();
                ctx.closePath();
            }
        }
    }
  </script>
<% } %>

添加星系loading动画

在 themes\fluid\layout\_partials\ 路径下创建 loading.ejs，代码：

<%
    play_time=theme.loading.play_time || 500
%>

<style type="text/css">
    @keyframes spin3D {
        from {
            transform: rotate3d(0.5, 0.5, 0.5, 360deg);
        }

        to {
            transform: rotate3d(0deg);
        }
    }

    #loading {
        height: 100%;
        background-color: #172d4781;
        backdrop-filter: saturate(100%) blur(10px);
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        z-index: 99999999;
    }

    .spinner-box {
        width: 300px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;
    }

    .leo {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
    }

    .blue-orbit {
        width: 175px;
        height: 175px;
        border: 2px solid #1a91fa;
        animation: spin3D 3s linear .2s infinite;
    }

    .green-orbit {
        width: 135px;
        height: 135px;
        border: 2px solid #00ffdd;
        animation: spin3D 2s linear 0s infinite;
    }

    .red-orbit {
        width: 100px;
        height: 100px;
        border: 2px solid #d75151;
        animation: spin3D 1s linear 0s infinite;
    }

    .white-orbit-a {
        width: 70px;
        height: 70px;
        border: 1px solid #faf5f5;
        animation: spin3D 3s linear 0s infinite;
    }

    .white-orbit-b {
        width: 70px;
        height: 70px;
        border: 1px solid #faf5f5;
        animation: spin3D 1.5s linear 0s infinite;
    }

    .nucleus {
        width: 1px;
        height: 1px;
        border: 1px solid #ffffff;
        animation: spin3D 1s linear 0s infinite;
    }
</style>

<div id="loading">
    <div class="spinner-box">
        <div class="blue-orbit leo"></div>
        <div class="green-orbit leo"></div>
        <div class="red-orbit leo"></div>
        <div class="white-orbit-a leo"></div>
        <div class="white-orbit-b leo"></div>
        <div class="nucleus leo"></div>
    </div>
</div>

<script>
    (function () {
        const loaded = function () {
            window.onload = function () {
                const loader = document.getElementById("loading");
                loader.className = "fadeout";
                setTimeout(function () {
                    loader.style.display = "none";
                }, 
                <%- play_time %>
                );
            }
        };
        loaded();
    })();
</script>

修改 themes\fluid\layout\layout.ejs 文件，找到 <body> 标签，在其内部第一行插入下面代码：

1
2
3

<% if (theme.loading.enable) { %>
  <%- partial('_partials/loading.ejs') %>
<% } %>

修改主题配置文件 _config.fluid.yml，添加 loading 动画的配置项：

# 加载动画
loading:
  enable: true
  # 动画时长，从动画开始播放计算，不包含页面加载时间，单位ms
  play_time: 500

添加彩色滚动变换字体

在你想要添加彩色滚动变换字体的地方写入以下代码即可，其中文字可自行更改：

<div id="binft"></div>
  <script>
    var binft = function (r) {
      function t() {
        return b[Math.floor(Math.random() * b.length)]
      }  
      function e() {
        return String.fromCharCode(94 * Math.random() + 33)
      }
      function n(r) {
        for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
          var l = document.createElement("span");
          l.textContent = e(), l.style.color = t(), n.appendChild(l)
        }
        return n
      }
      function i() {
        var t = o[c.skillI];
        c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
      }
      var l = "",
      o = ["青青陵上柏，磊磊涧中石。", "人生天地间，忽如远行客。","斗酒相娱乐，聊厚不为薄。", "驱车策驽马，游戏宛与洛。","洛中何郁郁，冠带自相索。","长衢罗夹巷，王侯多第宅。","两宫遥相望，双阙百余尺。","极宴娱心意，戚戚何所迫？"].map(function (r) {
      return r + ""
      }),
      a = 2,
      g = 1,
      s = 5,
      d = 75,
      b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
      c = {
        text: "",
        prefixP: -s,
        skillI: 0,
        skillP: 0,
        direction: "forward",
        delay: a,
        step: g
      };
      i()
      };
      binft(document.getElementById('binft'));
  </script>

添加人体时钟等有趣的挂件

在你的博客上有合适的地方，加上。实现代码：

<!--人体时钟背景透明-->
<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script>

<!--人体时钟背景白-->
<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.js"></script>

其他网页小挂件推荐：

http://abowman.com/ 里面有很多有趣的小挂件，可以养养鱼、龟、狗、仓鼠等各式各样的虚拟宠物，能根据你的鼠标指针位置移动，直接复制代码就可以用
http://www.revolvermaps.com/ 它提供网站访客地理信息，可以以2D、3D等形式显示
http://www.amazingcounters.com/ 免费网站计数器，有非常多的样式供你选择，可以设置计数器初始数值，可以设置按访问量计数，也可以按独立访问者计数
https://www.seniverse.com/widget/get 心知天气提供基于Web的免费天气插件，可以为你的网站添加一项简洁美观的天气预报功能，并自动适配PC和手机上的浏览

添加背景代码雨效果

window.onload = function(){
    //获取画布对象
    var canvas = document.getElementById("canvas");
    //获取画布的上下文
    var context =canvas.getContext("2d");
    var s = window.screen;
    var W = canvas.width = s.width;
    var H = canvas.height;
    //获取浏览器屏幕的宽度和高度
    //var W = window.innerWidth;
    //var H = window.innerHeight;
    //设置canvas的宽度和高度
    canvas.width = W;
    canvas.height = H;
    //每个文字的字体大小
    var fontSize = 12;
    //计算列
    var colunms = Math.floor(W /fontSize);	
    //记录每列文字的y轴坐标
    var drops = [];
    //给每一个文字初始化一个起始点的位置
    for(var i=0;i<colunms;i++){
        drops.push(0);
    }
    //运动的文字
    var str ="WELCOME TO WWW.ITRHX.COM";
    //4:fillText(str,x,y);原理就是去更改y的坐标位置
    //绘画的函数
    function draw(){
        context.fillStyle = "rgba(238,238,238,.08)";//遮盖层
        context.fillRect(0,0,W,H);
        //给字体设置样式
        context.font = "600 "+fontSize+"px  Georgia";
        //给字体添加颜色
        context.fillStyle = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"][parseInt(Math.random() * 10)];//randColor();可以rgb,hsl, 标准色，十六进制颜色
        //写入画布中
        for(var i=0;i<colunms;i++){
            var index = Math.floor(Math.random() * str.length);
            var x = i*fontSize;
            var y = drops[i] *fontSize;
            context.fillText(str[index],x,y);
            //如果要改变时间，肯定就是改变每次他的起点
            if(y >= canvas.height && Math.random() > 0.99){
                drops[i] = 0;
            }
            drops[i]++;
        }
    };
    function randColor(){//随机颜色
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb("+r+","+g+","+b+")";
    }
    draw();
    setInterval(draw,35);
};

在主题文件的相关 css 文件中添加以下代码：

canvas {
  position: fixed;
  right: 0px;
  bottom: 0px;
  min-width: 100%;
  min-height: 100%;
  height: auto;
  width: auto;
  z-index: -1;
}

然后在主题的 layout.ejs 文件中引入即可：

1
2
3

<!-- 数字雨 -->
<canvas id="canvas" width="1440" height="900" ></canvas>
<script type="text/javascript" src="/js/DigitalRain.js"></script>

首行缩进

p {
    text-indent: 2em; /*首行缩进*/
}
li > p {
    text-indent: 0;
}

文章显示框加宽

.col-lg-8.nopadding-x-md > .container.nopadding-x-md > #board {
    width: 123%;
    left: -23%; 
}
@media (max-width: 767px) {
    .col-lg-8.nopadding-x-md > .container.nopadding-x-md > #board {
        width: 100%;
        left: 0; 
    }
}
@media (max-width: 424px) {
    .col-lg-8.nopadding-x-md > .container.nopadding-x-md > #board {
        width: 100%;
        left: 0; 
    }
}

文章目录样式修改

.tocbot-active-link {
    font-weight: bold;
    /*color var(--link-hover-color)*/
    color: #158956;
    background: #00c4b520;
    border-radius: 5px;
}
.toc-list-item::before {
    background: #158956;
}

减少文字页边距

// hexo-theme-fluid/source/css/_pages/_post/post.styl
.post-content, post-custom
  box-sizing border-box
  padding-left 5%
  padding-right 5%

文章提示

window.onload = function () {
  //不同的日期显示不同的样式，200 天为黄色提示，400天为红色提示，可以自己定义。
  let warningDay = 200;
  let errorDay = 600;
  // 确保能够获取到文章时间以及在文章详情页
  let times = document.getElementsByTagName('time');
  if (times.length === 0) { return; }
  let posts = document.getElementsByClassName('post-content');
  if (posts.length === 0) { return; }

  // 获取系统当前的时间
  let pubTime = new Date(times[0].dateTime);  /* 文章发布时间戳 */
  let now = Date.now()  /* 当前时间戳 */
  let interval = parseInt(now - pubTime)
  let days = parseInt(interval / 86400000)
  /* 发布时间超过指定时间（毫秒） */
  if (interval > warningDay * 3600 * 24 * 1000 && interval < errorDay * 3600 * 24 * 1000) {
    posts[0].innerHTML = '<div class="fold warning">' +
      '<h5>提示</h5><p>这是一篇发布于 ' + days + ' 天前的文章，部分信息可能已发生改变，请注意甄别。</p>' +
      '</div>' + posts[0].innerHTML;
  } else if (interval >= errorDay * 3600 * 24 * 1000) {
    posts[0].innerHTML = '<div class="fold danger">' +
      '<h5>提示</h5><p>这是一篇发布于 ' + days + ' 天前的文章，部分信息可能已发生改变，请注意甄别。</p>' +
      '</div>' + posts[0].innerHTML;
  }
};

Hexo

#Hexo #博客相关 #Fluid #美化

Hexo+Fluid博客搭建以及美化(一文写全)

http://zhangyimin12345.github.io/posts/cmamfvq5y000rh8364aju2752/

作者

zhangyimin12345

发布于

2025年5月9日

更新于

2025年5月10日

许可协议

Hexo博客搭建上一篇

为Hexo添加数学公式渲染下一篇

Hexo+Fluid博客搭建以及美化(一文写全)

一、准备工作

二、开始！

全局安装 Hexo

创建博客项目

本地预览

部署

修改文件

安装部署插件

部署

创建仓库

部署

三、添加数学公式渲染

四、安装主题

五、美化

美化菜单：

添加运行时间

添加热力图

添加看板娘

添加动态彩带

添加静态彩带

添加动态黑色线条

添加小雪花飘落

添加樱花飘落

添加鼠标火花跟随

添加鼠标点击出爱心

添加鼠标点击出字

添加打字特效

自定义鼠标指针

自定义滚动条颜色

自定义头部打字机颜色效果渐变

自定义字体

友链美化

文字选中样式

Mac-border

代码块显示文件路径

显示代码语言

毛玻璃主面板

标签变化

文章滑入动画

导航栏标题添加霓虹灯特效

首屏图片添加上升气泡特效

添加星系loading动画

添加彩色滚动变换字体

添加人体时钟等有趣的挂件

添加背景代码雨效果

首行缩进

文章显示框加宽

文章目录样式修改

减少文字页边距

文章提示