本文最后更新于：2022年4月18日下午

hexo博客fluid主题美化

本人不才，没学过前端，课程作业中没有用到过太复杂的前端，修改主题全靠敲过三年代码的直觉。可能我的某些设置是没用的，或者是我错误的理解，或者有更好的解决方案。Anyway，总归是希望我折腾主题美化的经验和踩过的坑能对大家有所帮助。

1.安装hexo

hexo是一个静态个人博客框架，“静态”顾名思义，不支持交互功能。这使得hexo整个项目的配置和功能非常简洁，性能也比较好。静态博客可以免费部署在github、gitee等平台。

要使用 hexo 首先需要一些环境：node.js、git。具体步骤可以观看 程序羊的视频 ，除了git配置之外非常详细。具体使用方法可以查看官方文档，本文中已经通过超链接给出，可以点击跳转查看。

博客安装好后最常用的命令如下：

# 新建一个博客文件，markdown格式，默认目录在 [博客根目录]/source/_posts
hexo new "[File Name]"
# 清理上一次生成的临时文件
hexo clean
# 生成博客
hexo g
# 在本地查看生成效果
hexo s
# 部署到远端
hexo d

默认的主题是landscape，很简洁，有些简陋。我个人推荐使用fluid主题，官方注释详细，功能丰富，对大多数人来说可以做到“开箱即用”。

目前fluid主题的优势有：

优雅的颜值，使用 Material Design 风格突出层次感，但又不失简约，让用户能专注于写作；
提供大量定制化配置项，使每个用户使用该主题都能具有独特的样式；
响应式页面，适配手机、平板等设备，包括极端的分辨率都能轻松应对；
主题中少有的整合了 LaTeX 和 mermaid 的支持

目前fluid主题支持以下功能特性：

图片懒加载
自定义代码高亮方案
内置多语言
支持多款评论插件
支持使用数据文件存放配置
自定义静态资源 CDN
无比详实的用户文档
内置文章搜索
页脚备案信息
网页访问统计
支持 LaTeX 数学公式
支持 mermaid 流程图

2.修改主题

2.1.切换主题

切换主题很简单，可以从github 直接下载 整个主题包放入themes文件夹下，或者npm install --save hexo-theme-fluid直接安装。在hexo博客根目录下创建_config.fluid.yml文件，并将主题包内部的_config.yml内容全部复制进去。如果是使用npm安装的，主题包路径为[博客根目录]/node_modules/hexo-theme-fluid。最后在_config.yml文件中将主题修改为fluid：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/     landscape-plus
theme: fluid

此时重新生成博客，已经可以观看到效果。

2.2.修改配置

2.2.1.主题内置功能包

主题配置文件中本身已经配置了很多可选项，每一行代码都有详细的配置。推荐初次使用的人详细阅读完整个配置文件，按需开关功能。fluid官方文档 对所有功能做了详细的解释，点击链接跳转。

主题中的资源可以进行一些替换，将默认字体替换为自己习惯的字体，路径从source下开始。推荐把默认背景图片可以替换为图床中的链接，这样加载比较快，否则半天加载不出来背景。用户可以自己添加自己的css，在其中覆盖一些默认样式。另外，博客中用到的所有图片最好都 上传图床 ，这样hexo比较容易管理资源，用起来也更流畅。

2.3.公式支持

写博客，行内公式和行间公式必不可少。然而hexo默认的引擎对latex公式渲染有点问题。请按照以下步骤修改：

1 2	`npm uninstall hexo-renderer-marked --save npm install hexo-renderer-kramed --save`

打开/node_modules/hexo-renderer-kramed/lib/renderer.js，将

// Change inline math rule
function formatText(text) {
    // Fit kramed's rule: $$ + \1 + $$
    return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$');
}

替换为

// Change inline math rule
function formatText(text) {
    return text;
}

打开/node_modules/hexo-renderer-mathjax/mathjax.html，将最后一行的<script>改为

1	`<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>`

打开/node_modules\kramed\lib\rules\inline.js，更改第12行和22行

1 2	escape: /^\\([`\[\]()#$+\-.!_>])/, em: /^\((?:\\\|[\s\S])+?)\(?!\)/,

在主题配置文件中将mathjax设为true，此时已经可以完美渲染行内和行间公式。

有些文章中写道卸载hexo-math安装mathjax这一步骤，本主题中不需要这样做，这样反而会导致渲染公式出问题，字体漂移。

2.4.自定义css

主题默认设置虽然动效和框体等都设计得很好，但是在文章显示方面白底黑字，太素了。为了更方便阅读，我们可以自定义css，在其中修改对markdown格式的渲染，更方便阅读。

在sources/css下新建一个fluid-extention.css文件，向其中添加内容。整体的css配置文件如下，此配置文件是我直接从typora主题的github.css下复制出来并修改了一部分得到的。下面来讲解每一段的配置要点和含义。

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

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

figure.highlight {
    /*
    background: #21252b;
    background: rgb(246,248,250);
    */
    background: rgb(246,248,250);
    border-radius: 8px;
    box-shadow: 1px 2px 22px 1px rgba(0, 0, 0, .3);
    padding-top: 25px;
    z-index:998;
}

figure.highlight::before {
    background: #fc625d;
    border-radius: 50%;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    content: ' ';
    height: 12px;
    left: 12px;
    margin-top: -15px;
    position: absolute;
    width: 12px;
    z-index:999;
}

a {
    color: #173774;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    line-height: 1.4;
    cursor: text;
    overflow: hidden;
}
h1:hover a.anchor,
h2:hover a.anchor,
h3:hover a.anchor,
h4:hover a.anchor,
h5:hover a.anchor,
h6:hover a.anchor {
    text-decoration: none;
}
h1 tt,
h1 code {
    font-size: inherit;
}
h2 tt,
h2 code {
    font-size: inherit;
}
h3 tt,
h3 code {
    font-size: inherit;
}
h4 tt,
h4 code {
    font-size: inherit;
}
h5 tt,
h5 code {
    font-size: inherit;
}
h6 tt,
h6 code {
    font-size: inherit;
}
h1 {
    font-size: 2.25em;
    line-height: 1.2;
    border-bottom: 1px solid #eee;
}
h2 {
    font-size: 1.75em  ;
    line-height: 1.1;
    /*
    border-bottom: 0px solid #eee;
    */
    color: #7e3131;
}

h3 {
    font-size: 1.5em;
    line-height: 1.1;
    color: RGB(47,85,151);
}
h4 {
    font-size: 1.25em;
}
h5 {
    font-size: 1em;
}
h6 {
   font-size: 1em;
    color: #777;
}

p,
blockquote,
ul,
ol,
dl,
table{
    margin: 0.8em 0;
}

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

.markdown-body > strong {
    color: #be0000;
    font-weight: bold;
}


li>ol,
li>ul {
    margin: 0 0;
    text-indent: 0;
}
hr {
    height: 2px;
    padding: 0;
    margin: 16px 0;
    background-color: #e7e7e7;
    border: 0 none;
    overflow: hidden;
    box-sizing: content-box;
}

li p.first {
    display: inline-block;
    text-indent: 0;
}
ul,
ol {
    padding-left: 30px;
}
ul:first-child,
ol:first-child {
    margin-top: 0;
    text-indent: 0;
}
ul:last-child,
ol:last-child {
    margin-bottom: 0;
    text-indent: 0;
}
blockquote {
    border-left: 4px solid #dfe2e5;
    padding: 0 15px;
    color: #777777;
}
blockquote blockquote {
    padding-right: 0;
}
table {
    padding: 0;
    word-break: initial;
    overflow-x: auto;
    max-height: 22em;
    overflow-y: auto !important;
}
table tr {
    border: 1px solid #dfe2e5;
    margin: 0;
    padding: 0;
}
table tr:nth-child(2n),
thead {
    background-color: #f8f8f8;
}
table th {
    font-weight: bold;
    border: 1px solid #dfe2e5;
    border-bottom: 0;
    margin: 0;
    padding: 6px 13px;
}
table td {
    border: 1px solid #dfe2e5;
    margin: 0;
    padding: 6px 13px;
}
table th:first-child,
table td:first-child {
    margin-top: 0;
}
table th:last-child,
table td:last-child {
    margin-bottom: 0;
}

.CodeMirror-lines {
    padding-left: 4px;
    font-family: "font/CONSOLA.TTF";
}

.code-tooltip {
    box-shadow: 0 1px 1px 0 rgba(0,28,36,.3);
    /* border-top: 1px solid #eef2f2; */
}

.md-fences,
code,
tt {
    /*
    border: 1px solid #e7eaed;
    */
    /*
    background-color: #f8f8f8;
    */
    border-radius: 5px;
    padding: 0;
    padding: 0px 0px 0px 0px;
    font-size: 0.9em;
    text-indent: 0;
}

code {
    background-color: #dddddde6;
    padding: 0 0px 0 0px;
    border-radius: 5px;
    text-indent: 0;
    color: #e17523;
}

.md-fences {
    margin-bottom: 15px;
    margin-top: 15px;
    padding-top: 8px;
    padding-bottom: 6px;
}

.md-task-list-item > input {
  margin-left: -1.3em;
}

2.4.1.Mac风格代码块

figure.highlight { /* 控制代码框顶栏颜色、宽度、圆角等 */
    /*
    background: #21252b;
    background: rgb(246,248,250);
    */
    background: rgb(246,248,250);
    border-radius: 8px;
    box-shadow: 1px 2px 22px 1px rgba(0, 0, 0, .3);
    padding-top: 25px;
    z-index:998;
}

figure.highlight::before { /* 绘制三个小圆点 */
    background: #fc625d;
    border-radius: 50%;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    content: ' ';
    height: 12px;
    left: 12px;
    margin-top: -15px;
    position: absolute;
    width: 12px;
    z-index:999;
}

此段代码修改自 jin-yuhan同学。他实际上只制作了代码框的顶栏，没有和原本的框匹配。我对代码进行了一点修改：更改了颜色，缩减了顶栏宽度，为解决图标覆盖问题添加了z-index来使其置于最上层显示。对代码框还有一些修改，我将在后面介绍。

2.4.2.标题颜色

/* 此段代码修改了行高和div溢出隐藏。如果不设置溢出隐藏那么标题的div框会覆盖上下的文字
   这些文字无法选中，链接无法点开，十分影响使用体验 */
h1,h2,h3,h4,h5,h6 {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    line-height: 1.4;
    cursor: text;
    overflow: hidden;
}

/* 此段代码修改了六个等级标题、多行引用、行内代码的样式，在颜色和行高字号上产生区分 */
h1 {
    font-size: 2.25em;
    line-height: 1.2;
    border-bottom: 1px solid #eee;
}
h2 {
    font-size: 1.75em  ;
    line-height: 1.1;
    /* border-bottom: 0px solid #eee; */
    color: #7e3131;
}
h3 {
    font-size: 1.5em;
    line-height: 1.1;
    color: RGB(47,85,151);
}
h4 {
    font-size: 1.25em;
}
h5 {
    font-size: 1em;
}
h6 {
   font-size: 1em;
   color: #777;
}
blockquote {
    border-left: 4px solid #dfe2e5;
    padding: 0 15px;
    color: #777777;
}
code {
    background-color: #dddddde6;
    padding: 0 0px 0 0px;
    border-radius: 5px;
    text-indent: 0;
    color: #e17523;
}
strong {
    color: #be0000;
    font-weight: bold;
}

2.4.3.首行缩进

p {
    text-indent: 2em; /*首行缩进*/
}
li > p {
    text-indent: 0; /*防止列表也被缩进*/
}

也可以使用&emsp;&emsp;来手动缩进。

2.4.4.代码框表格框折叠

/* 代码和表格设置最大高度，高度或宽度超出都不会显示在页面中，可以通过滚动条查看 */
table {
    padding: 0;
    word-break: initial;
    overflow-x: auto;
    max-height: 22em;
    overflow-y: auto !important;
}

顺带一提，我本来想实现的效果是这样的：

但是 这个博客 对landscape主题的修改不适合于fluid主题。对他的方法记录如下，有兴趣的小伙伴可以自己探索一下。

添加文件 themes/landscape/source/js/code-unfold.js。

const CODE_MAX_HEIGHT = 200;
const containers = [];

// 展开
$('body').on('click', '.js_unfold_code_btn', function () {
  $(this).closest('.js_highlight_container').addClass('on');
});
// 收起
$('body').on('click', '.js_retract_code_btn', function () {
  const $container = $(this).closest('.js_highlight_container').removeClass('on');
  const winTop = $(window).scrollTop();
  const offsetTop = $container.offset().top;
  $(this).css('top', 0);
  if (winTop > offsetTop) {
    // 设置滚动条位置
    $('body, html').animate({
      scrollTop: $container.offset().top - CODE_MAX_HEIGHT
    }, 600);
  }
});
// 滚动事件，触发动画效果
$(window).on('scroll', function () {
  const scrollTop = $(window).scrollTop();
  const temp = [];
  for (let i = 0; i < containers.length; i++) {
    const item = containers[i];
    const { $container, height, $hide, hasHorizontalScrollbar } = item;
    if ($container.closest('body').length === 0) {
      // 如果 $container 元素已经不在页面上, 则删除该元素
      // 防止pjax页面跳转之后，元素未删除
      continue;
    }
    temp.push(item);
    if (!$container.hasClass('on')) {
      continue;
    }
    const offsetTop = $container.offset().top;
    const hideBtnHeight = $hide.outerHeight();
    // 减去按钮高度，减去底部滚动条高度
    const maxTop = parseInt(height - (hasHorizontalScrollbar ? 17 : 0) - hideBtnHeight);
    let top = parseInt(
      Math.min(
        Math.max(scrollTop - offsetTop, 0), // 如果小于 0 ，则取 0
        maxTop,// 如果大于 height ，则取 height
      )
    );
    // 根据 sin 曲线设置"收起代码"位置
    const halfHeight = parseInt($(window).height() / 2 * Math.sin((top / maxTop) * 90 * (2 * Math.PI/360)));
    $hide.css('top', Math.min(top + halfHeight, maxTop));
  }
  containers = temp;
});

// 添加隐藏容器
const addCodeWrap = ($node) => {
  const $container = $node.wrap('<div class="js_highlight_container highlight-container"><div class="highlight-wrap"></div></div>').closest('.js_highlight_container');

  // 底部 "展开代码" 与 侧边栏 "收起代码"
  const $btn = $(`
    <div class="highlight-footer">
      <a class="js_unfold_code_btn show-btn" href="javascript:;">展开代码<i class="fa fa-angle-down" aria-hidden="true"></i></a>
    </div>
    <a class="js_retract_code_btn hide-btn" href="javascript:;"><i class="fa fa-angle-up" aria-hidden="true"></i>收起代码</a>
  `);

  $container.append($btn);
  return $container;
};

const ret = () => {
  $('.highlight').each(function () {
    // 防止重复渲染
    if (this.__render__ === true) {
      return true;
    }
    this.__render__ = true;
    const $this = $(this);
    const height = $(this).outerHeight();
    if (height > CODE_MAX_HEIGHT) {
      // 添加展开&收起容器
      const $container = addCodeWrap($this, height);
      containers.push({
        $container,
        height,
        $hide: $container.find('.js_retract_code_btn'),
        hasHorizontalScrollbar: this.scrollWidth > this.offsetWidth,
      });
    }
  });
};

export default ret;

引入js并执行，修改文件 themes/landscape/source/js/search.js。

1 2	`+ import codeUnfold from './code-unfold'; + codeUnfold();`

添加样式，修改文件 themes/landscape/source/css/_partial/highlight.styl。

// 展开收起效果
.highlight-container
  position: relative
  background-color: highlight-background
  &.on
    .highlight-footer
      display: none
    .hide-btn
      display: flex
    .highlight-wrap
      max-height: none
  .highlight-wrap
    overflow: hidden
    max-height: 200px
  .highlight-footer
    position absolute
    width: 100%
    left: 0
    bottom: 0
    height: 60px
    background-image: 'linear-gradient(-180deg, rgba(255,255,255,0) 0%, %s 65%)' % highlight-background;
    text-align: center
  .show-btn
    color: #fff
    position: absolute
    left: 50%
    transform: translateX(-50%)
    bottom: 0
    line-height: 2.6em
    text-decoration: none
    padding: 0 0.8em
    &:hover
      text-decoration: none
  .hide-btn
    color: #fff
    font-size: 12px
    width: 22px
    position: absolute
    left: -21px
    top: 0
    line-height: 1em
    text-decoration: none
    text-align: center
    display: none
    flex-direction: column
    background-color: highlight-background
    border-radius: 4px 0 0 4px
    padding: 0.1em 0 0.6em
    transition: top ease 0.35s
    &:hover
      text-decoration: none
  .fa-angle-up,
  .fa-angle-down
    font-family: font-icon
    font-style: normal
    color: #ca0c16
  .fa-angle-up:before
    content:"\f106"
  .fa-angle-down:before
    content:"\f107"
    margin-left: 0.5em

重启项目，查看效果。

2.4.5.修改光标样式

将鼠标样式更改为这个可爱的形状。

在自定义css中添加如下代码：

body, header, div.mask.flex-center, div.scroll-down-bar, #banner.banner, h1,h2,h3,h4,h5,h6 {
    cursor: url(https://typora-gilgamesh.oss-cn-shanghai.aliyuncs.com/img1/a11.cur), auto;
}

a:hover, button:hover, i:hover {
    cursor: url(https://typora-gilgamesh.oss-cn-shanghai.aliyuncs.com/img1/a22.cur), auto;
}

#rightside>div>button,
#rightside>div>a {
    display: block;
    margin-bottom: 2px;
    width: 30px;
    height: 30px;
    color: var(--btn-color);
    text-align: center;
    font-size: 16px;
    cursor: url(https://typora-gilgamesh.oss-cn-shanghai.aliyuncs.com/img1/a22.cur), auto;
}

/* 文章标签 */
.layout_post .tag_share .post-meta__tags {
    cursor: url(https://typora-gilgamesh.oss-cn-shanghai.aliyuncs.com/img1/a22.cur), auto;
}
/* 评论区 */
.vcol * {
    cursor: url(https://typora-gilgamesh.oss-cn-shanghai.aliyuncs.com/img1/a22.cur), auto;
}
.v[data-class=v] .vicon {
    cursor: url(https://typora-gilgamesh.oss-cn-shanghai.aliyuncs.com/img1/a22.cur), auto;
}
.v[data-class=v] .vbtn {
    cursor: url(https://typora-gilgamesh.oss-cn-shanghai.aliyuncs.com/img1/a22.cur), auto;
}
/* 回复 */
.vat {
    cursor: url(https://typora-gilgamesh.oss-cn-shanghai.aliyuncs.com/img1/a22.cur), auto;
}
/*分页器*/
#pagination .page-number:hover {
    cursor: url(https://typora-gilgamesh.oss-cn-shanghai.aliyuncs.com/img1/a22.cur), auto;
}
/* 分页器的三个点(...) */
.space {
    color: #00c4b6;
}

在有链接的地方光标形状会变为一个小手，其余地方光标会是一个小箭头。实质上是在css中规定了光标在什么位置用什么图片来显示光标。代码的前三行尽可能覆盖了所有位置，确保光标显示不会失效；其余的代码都是在判断各种需要跳转链接的条件。注意进行此项美化会导致大量的网络请求（虽然不会有大数据传输，但大量请求仍然很慢），其直观表现就是网页加载变慢。

2.4.6.加宽文章显示框

fluid主题默认的文本主体框在中间，右边是目录，左边空着。这样既不好看，空间利用也不好。打开浏览器检查页面元素，可以看到文章主体的“盒子”名称为#board.py-5。可以直接在自定义css中修改其属性，向左偏移，宽度增加。

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

注意此主体所有中间页面都叫这个名称，但是在除了文章页以外的地方没有右侧的目录，所以需要用父类确定是文章页的文章主体盒子。

在稍窄的屏幕上（对应于平板竖屏）右侧的目录栏不显示，在更窄的屏幕上（对应于手机竖屏）文章主体框塞满屏幕。此时再偏移会导致无法阅读，因此应当对屏幕分辨率不同时做不同设计，没有目录时也不加偏移。

2.4.7.修改目录样式

默认的目录样式不会改变字体颜色，只是左边有一个小线提醒。这样不够显眼，用起来不方便。我们可以将其改成字体和底色都带颜色的样式。观察定义文章样式的源码文件Blog/node_modules/hexo-theme-fluid/source/css/_pages/_post/post.styl，可以发现定义目录的css块类名。在自定义css中添加如下代码：

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

使用上述代码可以将背景改为粉色，字体和左侧提示线都是红色，且加上了圆角。

2.5.自定义js

2.5.1.光标跟随小星星

如图所示，移动光标时后面跟随产生小星星。

在[Blog]/sources文件夹下新建js文件夹，新建star.js文件，写入如下代码。修改_config.fluid.yml文件，添加自定义js文件。custom_js: "/js/star.js"

(function() {
    function t() {
        i(),
        a()
    }
    function i() {
        document.addEventListener("mousemove", o),
        document.addEventListener("touchmove", e),
        document.addEventListener("touchstart", e),
        window.addEventListener("resize", n)
    }
    function n(t) {
        d = window.innerWidth,
        window.innerHeight
    }
    function e(t) {
        if (t.touches.length > 0) for (var i = 0; i < t.touches.length; i++) s(t.touches[i].clientX, t.touches[i].clientY, r[Math.floor(Math.random() * r.length)])
    }
    function o(t) {
        u.x = t.clientX,
        u.y = t.clientY,
        s(u.x, u.y, r[Math.floor(Math.random() * r.length)])
    }
    function s(t, i, n) {
        var e = new l;
        e.init(t, i, n),
        f.push(e)
    }
    function h() {
        for (var t = 0; t < f.length; t++) f[t].update();
        for (t = f.length - 1; t >= 0; t--) f[t].lifeSpan < 0 && (f[t].die(), f.splice(t, 1))
    }
    function a() {
        requestAnimationFrame(a),
        h()
    }
    function l() {
        this.character = "*",
        this.lifeSpan = 100, // 就靠它调整速度啦
        this.initialStyles = {
            position: "fixed",
            top: "0",
            display: "block",
            pointerEvents: "none",
            "z-index": "10000000", // 覆盖在最上层显示
            fontSize: "20px",
            "will-change": "transform"
        },
        this.init = function(t, i, n) {
            this.velocity = {
                x: (Math.random() < .5 ? -1 : 1) * (Math.random() * 1.25), // 横向发散的程度
                y: 1
            },
            this.position = {
                x: t - 5, // 出小星星相对于光标尖尖的位置
                y: i - 15
            },
            this.initialStyles.color = n,
            console.log(n),
            this.element = document.createElement("span"),
            this.element.innerHTML = this.character,
            c(this.element, this.initialStyles),
            this.update(),
            document.body.appendChild(this.element)
        },
        this.update = function() {
            this.position.x += this.velocity.x,
            this.position.y += this.velocity.y,
            this.lifeSpan--,
            this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + this.lifeSpan / 120 + ")"
        },
        this.die = function() {
            this.element.parentNode.removeChild(this.element)
        }
    }
    function c(t, i) {
        for (var n in i) t.style[n] = i[n]
    }
    var r = ["#D61C59", "#E7D84B", "#1B8798"],
    d = window.innerWidth,
    u = (window.innerHeight, {
        x: d / 2,
        y: d / 2
    }),
    f = [];
    t()
})();

修改代码中的数字可以自定义显示效果（已经给出注释）。顺带一提，听说js写成一行运行效率高。对js序列化时别忘了去掉注释，否则注释后面的代码就全注释掉了。

2.5.2.看板娘

在页面右下角添加一个人偶，添加后如图所示。人物的眼神可以跟着鼠标走，点击可以发出声音并显示对话框（我嫌占地方，没配置对话框）。

制作2D会动的人物一般需要自己制作模型或者购买模型。官方有几个免费的模型，我们直接使用。添加自定义js如下。

const Live = document.createElement('script');
Live.src = "https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js";
Live.onload = function () {
    L2Dwidget.init({
        "model": {
            jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
            "scale": 1
        },
        "display": {
            "position": "right",
            "width": document.body.clientWidth * 0.07,
            "height": document.body.clientWidth * 0.14,
            "hOffset": 0,
            "vOffset": -30
        },
        "mobile": {
            "show": false,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        }
    });
};
document.body.appendChild(Live);

需要修改模型的话直接更改第六行的模型名称即可。共有如下可选项。

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

2.6.修改主题源码

注意：直接对主题的样式配置文件Blog/node_modules/hexo-theme-fluid/source/css/_pages/_base/rewrite.styl的修改有可能在主题升级的时候被覆盖而丢失。我修改这个文件完全是因为我无法通过css的方式来修改某些属性。

2022.4.9更新 我学会用css啦，以后不必再修改主题源码，修改自定义css就好，这样更改不会被更新覆盖掉。

2.6.1.图片阴影和圆角

// hexo-theme-fluid/source/css/_pages/_base/rewrite.styl
p > img, p > a > img
    max-width 90%
    margin 1.3rem auto
    display block
    /* box-shadow $img-shadow */
    box-shadow 1px 2px 26px 1px rgba(0, 0, 0, .3)
    border-radius 12px
    background-color transparent

将其原本的p > img属性修改成这样，添加了圆角和阴影，使其与代码块风格一致。

2.6.2.修改代码块样式

// hexo-theme-fluid/source/css/_pages/_base/rewrite.styl
figure.highlight
  position relative

  table
    border 0
    margin 0
    margin-top: -0.4em
    width auto
    border-radius 8px
    background-color rgb(246,248,250)

修改了代码块的下圆角（上圆角在自定义css中上栏那里控制）以及背景颜色，减小了上间距以便配合上栏。如果想要将其修改为vscode默认深色主题那样，可以在此处和自定义css中一起修改背景色，并在主题配置文件_config.fluid.yml中修改代码高亮方案。

实际上这么做有点问题，代码块由三部分组成，顶栏，左侧的行号，以及代码部分。三个部分的交界处会露出一条底色线：博客亮色显示下，黑代码块露色，灰代码块看不出来；博客暗色显示下，灰代码块露色，黑代码块看不出来。印象中给div块加一个几px的边框可以解决这个问题，但我尝试加边框并没有看到效果。

下面是对代码块更具体的设置：

// hexo-theme-fluid/source/css/_pages/_base/rewrite.styl
td.gutter
    display table-cell
    position sticky
    left 0
    z-index 1
	// 左侧的行号 底色
    &:not(.hljs)
      border-top-right-radius 0
      border-bottom-right-radius 0
      background-color rgb(246,248,250) // #f6f8fa00
	// 左侧的行号 字体
    pre
      text-align right
      overflow-x none
      overflow-y none
      padding 0 0.75rem
      line-height 1.45 // 酌情调整，和代码行高不一样会导致对不齐
      background-color inherit
      border-radius initial
      border-right 1px solid #999 // 行号右侧的分割线，暗色主题下可以改成白色
  // 右侧代码区域     
td.code > pre
    border-top-left-radius 0
    border-bottom-left-radius 0
    border-style 3px solid rgb(246,248,250)
    background-color rgb(246,248,250)

2.6.3.加粗样式

// hexo-theme-fluid/source/css/_pages/_base/rewrite.styl
// Rewrite github-markdown.css
.markdown-body // 在下面添加以下控制加粗的样式
	strong
    	color: #be0000
    	font-weight: bold

只能修改markdown-body类下的strong，不能全局修改strong，不然博客标题也会调用这个样式变成红色。

2.6.4.减小文字页边距

fluid主题本来中间文字框已经不大了，再加上边距，实际文字占宽度一半不到。这或许美观，但不实用。可以将页边距从10%改为5%，视觉上内容会充实许多。

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

$\ $

参考文档

知识积累

本博客所有文章除特别声明外均为原创，均采用 CC BY-SA 4.0 协议，转载请注明出处！

汉明码纠错原理上一篇

Mac中一些有用的冷门命令下一篇