写在前面#

众所周知， ~~一个好的前端/排版是继续做下去的动力（bushi）~~ 。

难得有空，继续来建设一下博客，简单美化一下前端。

自定义 JS/CSS/HTML#

引入自定义的 JS/CSS/HTML 是继续下列美化操作的条件，可以通过以下主题配置（楼主使用的是 Fluid 主题，不同主题之间可能存在一些差异）。你可以在配置文件中找到：

1
# 指定自定义 .js 文件路径，支持列表；路径是相对 source 目录，如 /js/custom.js 对应存放目录 source/js/custom.js
2
# 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`
3
custom_js:
4
- /js/custom.js
5

6
# 指定自定义 .css 文件路径，用法和 custom_js 相同
7
# The usage is the same as custom_js
8
custom_css:
9
- /css/custom.css

自行添加自定义的 JS/CSS/HTML 文件即可。

全局字体#

首先在 custom.css 中引入字体 CDN ；

1
/* 字体 */
2
@import url('https://chinese-fonts-cdn.deno.dev/packages/maple-mono-cn/dist/MapleMono-CN-Bold/result.css');

然后修改主题配置文件的字体部分，例如：

1
# 主题字体配置
2
# Font
3
font:
4
font_size: 16px
5
font_family: 'Maple Mono CN'
6
font_weight: 400
7
letter_spacing: 0.02em
8
code_font_size: 85%

文章界面背景毛玻璃效果#

在 source/css 目录下新建样式文件 frostedglassbackground.css ，内容如下：

1
#board {
2
  -webkit-backdrop-filter: blur(15px);
3
  backdrop-filter: blur(15px);
4
}
5

6
#toc {
7
  padding: 10px;
8
  top: 4rem;
9
  background-color: var(--board-bg-color);
10
  border-radius: 10px;
11
  -webkit-backdrop-filter: blur(15px);
12
  backdrop-filter: blur(15px);
13
}

引入自定义的 CSS 文件，操作略；
修改主题配置文件 _config.fluid.yml 的以下字段：

1
# 主面板背景色
2
# Color of main board
3
board_color: "#ffffff80"
4
board_color_dark: "#15172280"

统一图片宽度#

markdown 本身的图片渲染大小就是一大玄学，这里直接采用插入自定义样式文件匹配图片元素，将其固定为页面大小的 70% ，CSS 文件内容如下：

1
.markdown-body p > img,
2
.markdown-body p > a > img,
3
.markdown-body figure > img,
4
.markdown-body figure > a > img {
5
  width: 70%; /* 强制宽度为页面的70% */
6
  height: auto; /* 保持图片比例 */
7
  display: block;
8
  margin-left: auto;
9
  margin-right: auto; /* 图片居中 */
10
}
11
.page-content img, .post-content img {
12
  width: 70%; /* 强制宽度为页面的70% */
13
  height: auto; /* 保持图片比例 */
14
  display: block;
15
  margin-left: auto;
16
  margin-right: auto; /* 图片居中 */
17
}

Mac 样式代码块#

在 source/css 目录下新建样式文件 mac.styl ，内容如下：

1
.highlight
2
    background: #011627
3
    border-radius: 5px
4
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4)
5
    padding-top: 30px
6

7
    &::before
8
      background: #fc625d
9
      border-radius: 50%
10
      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
11
      content: ' '
12
      height: 12px
13
      left: 12px
14
      margin-top: -20px
15
      position: absolute
16
      width: 12px

然后在配置文件 _config.fluid.yml 中引入该自定义样式文件：

1
custom_css:
2
- /css/custom.css
3
- /css/mac.css

Warning

注意，不要写成 /css/mac.styl ，否则会被错误识别为 /css/mac.styl.css 。

折叠框中的方式有一定 BUG，并且会和我的伪代码渲染冲突，如需参考还是尽量先参考上文的方法吧，楼主会在之后有空尽可能提供支持#

安装 Hexo Shiki Plugin 插件：

1
# 在博客根目录下执行
2
npm install hexo-shiki-plugin --save

添加/修改该插件有关配置：

1
# 在 Hexo 配置文件 config.yml 中
2
# 以下部分一般是初始配置文件中就有的内容
3
syntax_highlighter: # 留空，原本为 highlight.js
4
highlight:
5
  enable: false
6
prismjs:
7
  enable: false
8

9
# 添加该插件的配置
10
shiki:
11
  theme: one-dark-pro # highlight-theme：one-dark-pro / github-light / github-dark / material-theme-palenight
12
  line_number: true # whether to show the line_number
13
  beautify: true # whether to add highlight tool true or false
14
  highlight_copy: true # copy button
15
  highlight_lang: true # show the code language
16
  highlight_height_limit: 360 # code-block max height,unit: px
17
  is_highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
18
  copy: # copy message
19
    success: 'Copy Success'
20
    error: 'Copy Error'
21
    no_support: 'Browser Not Support'

修改主题配置文件 _config_fluid.yml ：

1
code:
2
  copy_btn: false
3
  language:
4
  enable: false
5
  highlight:
6
  enable: false

上述操作主要都是为了禁用 Hexo 和主题原有的 Highlight 相关内容，避免造成冲突。

引入图标文件：

添加 Font Awesome 图标库，这里用的是 360 的 CDN，也可以选择其他的，在 custom.css 中添加即可：

1
@import url('https://lib.baomitu.com/font-awesome/6.1.2/css/all.min.css');

仿知乎链接卡片#

在 source/css 目录下新建样式文件 linkcard.css ，内容如下：

1
:root {
2
  --linkcard-bg-color: #eeefef;
3
}
4
[data-user-color-scheme="dark"] {
5
  --linkcard-bg-color: #242a38;
6
}
7

8
.LinkCard, .LinkCard:hover {
9
    text-decoration: none;
10
    border: none !important;
11
    color: inherit !important;
12
}
13
.LinkCard {
14
    position: relative;
15
    display: block;
16
    margin: 1em auto;
17
    width: 60%;
18
    box-sizing: border-box;
19
    border-radius: 12px;
20
    max-width: 100%;
21
    overflow: hidden;
22
    color: inherit;
23
    text-decoration: none;
24
    background: var(--linkcard-bg-color);
25
    transition: transform 0.4s ease-in;
26
}
27
.ztext { word-break: break-word; line-height: 1.6; }
28
.LinkCard-content {
29
    position: relative;
30
    display: flex;
31
    align-items: center;
32
    justify-content: space-between;
33
    padding: 12px;
34
    border-radius: inherit;
35
    background-color: var(--linkcard-bg-color);
36
}
37
.LinkCard-text { overflow: hidden; }
38
.LinkCard-title {
39
    display: -webkit-box;
40
    -webkit-line-clamp: 2;
41
    line-clamp: 2;
42
    overflow: hidden;
43
    text-overflow: ellipsis;
44
    max-height: calc(16px * 1.25 * 2);
45
    font-size: 16px;
46
    font-weight: 500;
47
    line-height: 1.25;
48
    color: inherit;
49
}
50
.LinkCard-meta {
51
    display: flex;
52
    margin-top: 4px;
53
    font-size: 14px;
54
    line-height: 20px;
55
    color: #999;
56
    white-space: nowrap;
57
}
58
.LinkCard-imageCell {
59
    margin-left: 8px;
60
    border-radius: 6px;
61
}
62
.LinkCard-image {
63
    display: block;
64
    width: 60px !important;
65
    height: auto !important;
66
    border-radius: inherit;
67
    margin-bottom: 0 !important;
68
}
69
.LinkCard:hover {
70
    transform: translate3d(0, -2px, 0);
71
    box-shadow: 0 0 16px 0 rgba(34, 135, 250, 0.8);
72
}

在 source/js 目录下新建自定义 js 文件：

1
window.onload = function () {
2
    var LinkCards = document.getElementsByClassName('LinkCard');
3
    for (var i = 0; i < LinkCards.length; i++) {
4
        // 截断链接
5
        var truncateLink = function(url, maxLength) {
6
            if (url.length <= maxLength) return url;
7
            return url.slice(0, maxLength) + '...';
8
        };
9

10
        var LinkCard = LinkCards[i];
11
        var link = LinkCard.href;
12
        var title = LinkCard.innerText;
13
        // 如果没有指定logo地址，则使用默认的loading图片
14
        var logourl = LinkCard.name ? LinkCard.name : '/img/loading/loading1.gif';
15
        var displayLink = truncateLink(link, 32);
16

17
        LinkCard.innerHTML =
18
            `<span class="LinkCard-content">
19
                <span class="LinkCard-text">
20
                    <span class="LinkCard-title">${title}</span>
21
                    <span class="LinkCard-meta">
22
                        <span style="display:inline-flex;align-items:center">
23
                            <svg class="Zi Zi--InsertLink" fill="currentColor" viewBox="0 0 24 24" width="17" height="17">
24
                                <path d="M6.77 17.23c-.905-.904-.94-2.333-.08-3.193l3.059-3.06-1.192-1.19-3.059 3.058c-1.489 1.489-1.427 3.954.138 5.519s4.03 1.627 5.519.138l3.059-3.059-1.192-1.192-3.059 3.06c-.86.86-2.289.824-3.193-.08zm3.016-8.673l1.192 1.192 3.059-3.06c.86-.86 2.289-.824 3.193.08.905.905.94 2.334.08 3.194l-3.059 3.06 1.192 1.19 3.059-3.058c1.489-1.489 1.427-3.954-.138-5.519s-4.03-1.627-5.519-.138L9.786 8.557zm-1.023 6.68c.33.33.863.343 1.177.029l5.34-5.34c.314-.314.3-.846-.03-1.176-.33-.33-.862-.344-1.176-.03l-5.34 5.34c-.314.314-.3.846.03 1.177z" fill-rule="evenodd"></path>
25
                            </svg>
26
                        </span>
27
                        <a href="${link}" title="${link}" style="color:inherit;text-decoration:none;">${displayLink}</a>
28
                    </span>
29
                </span>
30
                <span class="LinkCard-imageCell">
31
                    <img class="LinkCard-image" alt="logo" src="${logourl}" onerror="this.src='/img/loading/loading1.gif'">
32
                </span>
33
            </span>`; // 如果获取指定logo地址失败，则使用默认的loading图片
34
    }
35
}

在主题配置文件中引入，此处演示略。
使用方法：

在文章中直接插入：

1
<a href="你的链接" name="链接的ico地址" class="LinkCard">你的卡片标题</a>

使用效果：

Fluid主题美化

这也是这文的部分内容参考的博客，感谢博主提供的思路，如有侵权，请联系我删除！使用致歉！

樱花特效#

这里直接用来该网站的 API 接口。并在自定义 js 文件中添加如下内容：

1
$(document).ready(function() {
2
  // 判断是否为首页
3
  if (location.pathname === '/' || location.pathname === '/index.html' || location.pathname === '/index') {
4
    // 加载樱花特效
5
    $.getScript("https://api.vvhan.com/api/script/yinghua");
6
  }
7
});

我只在首页展示了该特效，所以在前面加了条件判断。

高斯模糊#

1. 设置方法#

首先，引入自定义 CSS 文件：

1
/* 高斯模糊样式 */
2
.blur-text {
3
  filter: blur(5px);
4
  transition: filter 0.3s ease;
5
}
6

7
.blur-text:hover {
8
  filter: none;
9
}

你可以直接在文章中通过 HTML 标签插入，比如：

1
<span class="blur-text">这是被模糊的内容</span>

也可以创建 Hexo 标签插件：
1. 在博客根目录创建 scripts 文件夹（如果不存在）；
2. 创建一个新文件 scripts/blur.js，内容如下：

1
/**
2
 * 模糊文字标签插件
3
 * 使用方法: {% blur 这是被模糊的内容 %}
4
 */
5
hexo.extend.tag.register('blur', function(args, content) {
6
  var text = args.join(' ');
7
  return '<span class="blur-text">' + text + '</span>';
8
}, {ends: false});
9

10
/**
11
 * 支持多行内容的模糊文字标签插件
12
 * 使用方法:
13
 * {% blur_block %}
14
 * 这是被模糊的内容
15
 * 可以包含多行
16
 * {% end_blur_block %}
17
 */
18
hexo.extend.tag.register('blur_block', function(args, content) {
19
  return '<div class="blur-text">' + hexo.render.renderSync({text: content, engine: 'markdown'}) + '</div>';
20
}, {ends: true});

2. 配置示例（新站不再动态渲染）#

这段内容是正常显示的。

这段内容被模糊了，鼠标悬停或点击可以查看。

或者使用标签插件：

文本黑幕#

与高斯模糊的原理是类似的。

1. 使用方法#

引入自定义 CSS 文件：

1
/* 文本黑幕样式 */
2
.shady {
3
    position: relative;
4
    display: inline-block;
5
    padding: 0 2px;
6
    border-radius: 2px;
7
    cursor: pointer;
8
}
9

10
.shady::before {
11
    content: "";
12
    position: absolute;
13
    top: 0;
14
    left: 0;
15
    width: 100%;
16
    height: 100%;
17
    background-color: #000;
18
    border-radius: 2px;
19
    transition: opacity 0.3s ease;
20
    z-index: 1;
21
}
22

23
.shady:hover::before {
24
    opacity: 0;
25
}
26

27
.shady > * {
28
    position: relative;
29
    z-index: 0;
30
}

你可以直接在文章中通过 HTML 标签插入，比如：

1
<span class="shady">这是被黑幕遮挡的内容</span>

也可以创建 Hexo 标签插件：
1. 在博客根目录创建 scripts 文件夹（如果不存在）；
2. 创建一个新文件 scripts/shady.js，内容如下：

1
/**
2
 * 文本黑幕标签插件
3
 * 使用方法: {% shady 这是被黑幕遮挡的内容 %}
4
 */
5
hexo.extend.tag.register('shady', function(args, content) {
6
  var text = args.join(' ');
7
  return '<span class="shady"><span>' + text + '</span></span>';
8
}, {ends: false});
9

10
/**
11
 * 支持多行内容的文本黑幕标签插件
12
 * 使用方法:
13
 * {% shady_block %}
14
 * 这是被黑幕遮挡的内容
15
 * 可以包含多行
16
 * {% end_shady_block %}
17
 */
18
hexo.extend.tag.register('shady_block', function(args, content) {
19
  return '<div class="shady"><div>' + hexo.render.renderSync({text: content, engine: 'markdown'}) + '</div></div>';
20
}, {ends: true});

2. 配置示例（新站不再动态渲染）#

这是正常显示的文本。

这是一段被黑幕遮挡的内容，鼠标悬停可以查看。

或者使用标签插件：

插入图表#

使用 EChart 工具，该工具比较成熟且能绘制的图表多样。

1. 使用方法#

安装 hexo-tag-echarts 插件：

1
npm install hexo-tag-echarts --save

在需要插入图表的文章开头添加以下 js 内容：

1
// 通过jsDelivr的CDN引入echarts
2
<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
3
// 使用GL里的各种组件时需要添加，否则可不需要
4
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@1.1.1/dist/echarts-gl.min.js"></script>

注：这里不通过 js 文件直接引入是因为用到的地方比较少，没必要作为必要加载。（博客里塞的自定义小垃圾已经够多了，加上没做优化，尽可能还是少加载一些）

插入图表内容：

1
{% echarts 400 '85%' %}
2
...
3
{% endecharts %}

具体格式说明参考 Echart官网；

2. 配置示例（新站不再动态渲染）#

这里以折线图为例：

1
option = {
2
  title: {
3
    text: 'Stacked Area Chart'
4
  },
5
  tooltip: {
6
    trigger: 'axis',
7
    axisPointer: {
8
      type: 'cross',
9
      label: {
10
        backgroundColor: '#6a7985'
11
      }
12
    }
13
  },
14
  legend: {
15
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
16
  },
17
  toolbox: {
18
    feature: {
19
      saveAsImage: {}
20
    }
21
  },
22
  grid: {
23
    left: '3%',
24
    right: '4%',
25
    bottom: '3%',
26
    containLabel: true
27
  },
28
  xAxis: [
29
    {
30
      type: 'category',
31
      boundaryGap: false,
32
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
33
    }
34
  ],
35
  yAxis: [
36
    {
37
      type: 'value'
38
    }
39
  ],
40
  series: [
41
    {
42
      name: 'Email',
43
      type: 'line',
44
      stack: 'Total',
45
      areaStyle: {},
46
      emphasis: {
47
        focus: 'series'
48
      },
49
      data: [120, 132, 101, 134, 90, 230, 210]
50
    },
51
    {
52
      name: 'Union Ads',
53
      type: 'line',
54
      stack: 'Total',
55
      areaStyle: {},
56
      emphasis: {
57
        focus: 'series'
58
      },
59
      data: [220, 182, 191, 234, 290, 330, 310]
60
    },
61
    {
62
      name: 'Video Ads',
63
      type: 'line',
64
      stack: 'Total',
65
      areaStyle: {},
66
      emphasis: {
67
        focus: 'series'
68
      },
69
      data: [150, 232, 201, 154, 190, 330, 410]
70
    },
71
    {
72
      name: 'Direct',
73
      type: 'line',
74
      stack: 'Total',
75
      areaStyle: {},
76
      emphasis: {
77
        focus: 'series'
78
      },
79
      data: [320, 332, 301, 334, 390, 330, 320]
80
    },
81
    {
82
      name: 'Search Engine',
83
      type: 'line',
84
      stack: 'Total',
85
      label: {
86
        show: true,
87
        position: 'top'
88
      },
89
      areaStyle: {},
90
      emphasis: {
91
        focus: 'series'
92
      },
93
      data: [820, 932, 901, 934, 1290, 1330, 1320]
94
    }
95
  ]
96
};

首页文章滑入动画#

在 source/js 目录下新建自定义 JS 文件 scrollanimation.js ，内容如下：

1
const cards = document.querySelectorAll('.index-card')
2
if (cards.length) {
3
    document.querySelector('.row').setAttribute('style', 'overflow: hidden;')
4
    const coefficient = document.documentElement.clientWidth > 768 ? .5 : .3
5
    const origin = document.documentElement.clientHeight - cards[0].getBoundingClientRect().height * coefficient
6

7
    function throttle(fn, wait) {
8
        let timer = null;
9
        return function () {
10
            const context = this;
11
            const args = arguments;
12
            if (!timer) {
13
                timer = setTimeout(function () {
14
                    fn.apply(context, args);
15
                    timer = null;
16
                }, wait)
17
            }
18
        }
19
    }
20

21
    function handle() {
22
        cards.forEach(card => {
23
            card.setAttribute('style', `--state: ${(card.getBoundingClientRect().top - origin) < 0 ? 1 : 0};`)
24
        })
25
    }
26

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

在 source/css 目录下新建自定义样式文件 scrollanimation.css ，内容如下：

1
.index-card {
2
  transition: all 0.5s;
3
  transform: scale(calc(1.25 - 0.25 * var(--state)));
4
  opacity: var(--state);
5
  margin-bottom: 2rem;
6
}
7

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

在配置文件中引入自定义 css 和 js 文件，操作略；

网页元素悬停放大特效#

在 source/css 目录下新建自定义样式文件 hover.css ，内容如下：

1
/* 首页文章封面 */
2
.index-img {
3
  /* 动画时间 */
4
  transition: .4s;
5
}
6
.index-card:hover .index-img {
7
  /* 放大倍数 */
8
  transform: scale(1.05);
9
}
10

11
/* 头像 */
12
.about-avatar img {
13
  transition: .4s;
14
}
15
.about-avatar:hover img {
16
  transform: scale(1.05);
17
}
18

19
/* 标签云 */
20
.tagcloud a {
21
  transition: .4s;
22
}
23
.tagcloud a:hover {
24
  transform: scale(1.05);
25
}

你可以自由补充你希望悬停放大的网页元素。

引入自定义样式文件，操作略；

标签页文字跟随焦点切换#

原理是添加一个对页面可见性事件 visibilitychange 的监听。

在 source/js 目录下新建自定义 JS 文件 visibilitychange.js ，内容如下：

1
jQuery(document).ready(function() {
2
    var b, c, a = document.title;
3
    var welcomeTimer = null;
4
    function d() {
5
        if (document[b]) {
6
            document.title = " 你切到别的标签页了 ";
7
            if (welcomeTimer) {
8
                clearTimeout(welcomeTimer);
9
                welcomeTimer = null;
10
            }
11
        } else {
12
            document.title = " 你在当前标签页 ";
13
            welcomeTimer = setTimeout(function() {
14
                document.title = a;
15
            }, 2000);
16
        }
17
    }
18

19
    if (typeof document.hidden !== "undefined") {
20
        b = "hidden";
21
        c = "visibilitychange";
22
    } else if (typeof document.mozHidden !== "undefined") {
23
        b = "mozHidden";
24
        c = "mozvisibilitychange";
25
    } else if (typeof document.webkitHidden !== "undefined") {
26
        b = "webkitHidden";
27
        c = "webkitvisibilitychange";
28
    }
29

30
    if ((typeof document.addEventListener !== "undefined" || typeof document[b] !== "undefined") && c) {
31
        document.addEventListener(c, d, false);
32
    }
33
});

引入自定义 JS 文件，操作略；

后记#

持续更新中。没什么技术含量，主要是一些小构思。

写在前面#

自定义 JS/CSS/HTML#

全局字体#

文章界面背景毛玻璃效果#

统一图片宽度#

Mac 样式代码块#

折叠框中的方式有一定 BUG，并且会和我的伪代码渲染冲突，如需参考还是尽量先参考上文的方法吧，楼主会在之后有空尽可能提供支持#

仿知乎链接卡片#

樱花特效#

高斯模糊#

1. 设置方法#

2. 配置示例（新站不再动态渲染）#

文本黑幕#

1. 使用方法#

2. 配置示例（新站不再动态渲染）#

插入图表#

1. 使用方法#

2. 配置示例（新站不再动态渲染）#

首页文章滑入动画#

网页元素悬停放大特效#

标签页文字跟随焦点切换#

后记#

文章分享

评论区

博客美化记录

写在前面#

自定义 JS/CSS/HTML#

全局字体#

文章界面背景毛玻璃效果#

统一图片宽度#

Mac 样式代码块#

折叠框中的方式有一定 BUG，并且会和我的伪代码渲染冲突，如需参考还是尽量先参考上文的方法吧，楼主会在之后有空尽可能提供支持#

仿知乎链接卡片#

樱花特效#

高斯模糊#

1. 设置方法#

2. 配置示例（新站不再动态渲染）#

文本黑幕#

1. 使用方法#

2. 配置示例（新站不再动态渲染）#

插入图表#

1. 使用方法#

2. 配置示例（新站不再动态渲染）#

首页文章滑入动画#

网页元素悬停放大特效#

标签页文字跟随焦点切换#

后记#

文章分享

评论区