前言

博客主题已更新至3.3.0

本文主要用于记录及分享博主在使用butterfly主题时所使用的功能及涉及到的一些比较简单的修改

一些直接修改主题配置文件的功能可直接参考官方文档,这里就不做赘述。

Front-matter

markdown文件最上方以---分隔的区域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
---
title:
date:
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc:
toc_number:
auto_open:
copyright:
mathjax:
katex:
aplayer:
highlight_shrink:
---
写法 说明
title 【必需】文章标题
date 【必需】文章创建日期
updated 【可选】文章更新日期
tags 【可选】文章标籤
categories 【可选】文章分类
keywords 【可选】文章关键字
description 【可选】文章描述
top_img 【可选】文章顶部图片
cover 【可选】文章缩略图(如果没有设置top_img,文章页顶部将显示缩略图,可设为false/图片地址/留空)
comments 【可选】显示文章评论模块(默认 true)
toc 【可选】显示文章TOC(默认为设置中toc的enable配置)
toc_number 【可选】显示toc_number(默认为设置中toc的number配置)
auto_open 【可选】是否自动打开TOC(默认为设置中toc的auto_open配置)
copyright 【可选】显示文章版权模块(默认为设置中post_copyright的enable配置)
mathjax 【可选】显示mathjax(当设置mathjax的per_page: false时,才需要配置,默认 false)
katex 【可选】显示katex(当设置katex的per_page: false时,才需要配置,默认 false)
aplayer 【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置
highlight_shrink 【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)

新建页面

1
hexo new page "pagename"

代码换行

配置butterfly.yml

1
code_word_wrap: true

找到HEXO根目录配置文件,將line_number改成false:

1
2
3
4
5
highlight:
enable: true
line_number: false
auto_detect: false
tab_replace:

文章置顶

首先安裝插件(hexo-generator-index-pin-top 或者 hexo-generator-indexed)

如果使用hexo-generator-index-pin-top, 需要先卸载掉hexo-generator-index,然後在文章的front-matter区域添加top: true屬性來把這篇文章置頂

如果使用hexo-generator-indexed, 需要先卸载掉hexo-generator-index,然后在文章的front-matter区域添加sticky: 1。数值越大,置頂的优先越大。

顶部图

page页直接在主题配置文件中修改,post页可在front-matter中设置top_img属性,即top_img: 图片地址

文章封面

在Front-matter中添加cover: 图片地址,同时在主题配置文件中修改封面配置。

标签外挂

Note

1
2
3
4
5
6
7
8
9
10
11
12
note:
# Note tag style values:
# - simple bs-callout old alert style. Default.
# - modern bs-callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# - disabled disable all CSS styles import of note tag.
style: flat
icons: false
border_radius: 3
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0

用法:

1
2
3
4
5
6
7
8
{%note [class] [no-icon] %}
Any content (support inline tags too.io).
{%endnote %}

[class] : default | primary | success | info | warning | danger.
[no-icon] : Disable icon in note.

All parameters are optional.

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{%note default %}
default 提示
{%endnote %}

{%note primary no-icon %}
primary 提示
{%endnote %}

{%note success %}
success 提示
{%endnote %}

{%note info %}
info 提示
{%endnote %}

{%note warning %}
warning 提示
{%endnote %}

{%note danger %}
danger 提示
{%endnote %}

default 提示

primary 提示

success 提示

info 提示

warning 提示

danger 提示

相册图库

示例:

1
2
3
4
<div class="gallery-group-main">
{%galleryGroup 'Pixiv' '收藏的一些插画' '/photo/pixiv' https://ahzo.gitee.io/img/pixiv/07.jpg %}
{%galleryGroup 'CG' '永远的7日之都' '/photo/forever7' https://ahzo.gitee.io/img/forever7/05.jpg %}
</div>

相册

示例:

1
2
3
4
5
6
7
8
9
{%gallery %}
![](https://ahzo.gitee.io/img/pixiv/01.jpg)
![](https://ahzo.gitee.io/img/pixiv/02.jpg)
![](https://ahzo.gitee.io/img/pixiv/03.jpg)
![](https://ahzo.gitee.io/img/pixiv/04.jpg)
![](https://ahzo.gitee.io/img/pixiv/05.jpg)
![](https://ahzo.gitee.io/img/pixiv/06.jpg)
![](https://ahzo.gitee.io/img/pixiv/07.jpg)
{%endgallery %}

Tabs

使用方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

{%tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{%endtabs %}

Unique name : Unique name of tabs block tag without comma.
Will be used in #id's as prefix for each tab with their index numbers.
If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
Only for current url of post/page must be unique!
[index] : Index number of active tab.
If not specified, first tab (1) will be selected.
If index is -1, no tab will be selected. It's will be something like spoiler.
Optional parameter.
[Tab caption] : Caption of current tab.
If not caption specified, unique name with tab index suffix will be used as caption of tab.
If not caption specified, but specified icon, caption will empty.
Optional parameter.
[@icon] : FontAwesome icon name (full-name, look like 'fas fa-font')
Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
Optional parameter.

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
{%tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{%endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

1
2
3
4
5
6
7
8
9
10
11
12
13
{%tabs test2, 3 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{%endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

1
2
3
4
5
6
7
8
9
10
11
12
13
{%tabs test3, -1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{%endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

自定义 Tab 名 + 只有 icon + icon 和 Tab 名:

1
2
3
4
5
6
7
8
9
10
11
12
13
{%tabs test4 %}
<!-- tab 第一個Tab -->
**tab名字為第一個Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有圖標 沒有Tab名字**
<!-- endtab -->

<!-- tab 炸彈@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{%endtabs %}

tab名字為第一個Tab

只有圖標 沒有Tab名字

名字+icon

tag-hide

tag-hide 内的标签外挂 content 内都不建议有 h1 - h6 等标题。因为 Toc 会把隐藏内容标题也显示出来,而且当滚动屏幕时,如果隐藏内容没有显示出来,会导致 Toc 的滚动出现异常。

inline 在文本里面添加按钮隐藏内容,只限文字

1
{%hideInline content,display,bg,color %}

content: 文本内容
display: 按钮显示的文字 (可选)
bg: 按钮的背景颜色 (可选)
color: 按钮文字的颜色 (可选)
( content 不能包含英文逗号,可用 ‚)

示例:

1
2
3
😓人和人是不能一概而论的 {%hideInline 直接写下了这个示例,我曾经在极度愤怒的情况下,#FF7242,#fff %}

click here{%hideInline true %}

😓人和人是不能一概而论的 直接写下了这个示例

click heretrue

block 独立的 block 隐藏内容,可以隐藏很多内容,包括图片,代码块等等

( display 不能包含英文逗号,可用 ‚)

1
2
3
{%hideBlock display,bg,color %}
content
{%endhideBlock %}

content: 文本内容
display: 按钮显示的文字 (可选)
bg: 按钮的背景颜色 (可选)
color: 按钮文字的颜色 (可选)
示例:

1
2
3
{%hideBlock 查看答案 %}
XXX
{%endhideBlock %}

XXX

如果你需要展示的内容太多,可以把它隐藏在收缩框里,需要时再把它展开。

( display 不能包含英文逗号,可用 ‚)

1
2
3
{%hideToggle display,bg,color %}
content
{%endhideToggle %}

示例:

1
2
3
{%hideToggle 显示的标题 %}
隐藏的内容
{%endhideToggle %}
显示的标题

隐藏的内容

Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{%btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url] : 链接
[text] : 按钮文字
[icon] : [可选] 图标
[color] : [可选] 按钮背景顔色(默认style时)
按钮字体和边框顔色(outline时)
default/blue/pink/red/purple/orange/green
[style] : [可选] 按钮样式 默认实心
outline/留空
[layout] : [可选] 按钮佈局 默认为line
block/留空
[position] : [可选] 按钮位置 前提是设置了layout为block 默认为左边
center/right/留空
[size] : [可选] 按钮大小
larger/留空

示例:

1
2
3
4
5
This is my website, click the button {%btn 'http://ahzoo.cn',清梦 %}
This is my website, click the button {%btn 'http://ahzoo.cn',清梦,far fa-hand-point-right %}
This is my website, click the button {%btn 'http://ahzoo.cn',清梦,,outline %}
This is my website, click the button {%btn 'http://ahzoo.cn',清梦 ,far fa-hand-point-right,outline %}
This is my website, click the button {%btn 'http://ahzoo.cn',清梦 ,far fa-hand-point-right,larger %}

This is my website, click the button 清梦
This is my website, click the button 清梦
This is my website, click the button 清梦
This is my website, click the button 清梦
This is my website, click the button 清梦

1
2
3
{%btn 'http://ahzoo.cn',清梦,far fa-hand-point-right,block %}
{%btn 'http://ahzoo.cn',清梦,far fa-hand-point-right,block center larger %}
{%btn 'http://ahzoo.cn',清梦,far fa-hand-point-right,block right outline larger %}
清梦 清梦 清梦
1
2
3
4
5
6
7
{%btn 'http://ahzoo.cn',清梦,far fa-hand-point-right,larger %}
{%btn 'http://ahzoo.cn',清梦,far fa-hand-point-right,blue larger %}
{%btn 'http://ahzoo.cn',清梦,far fa-hand-point-right,pink larger %}
{%btn 'http://ahzoo.cn',清梦,far fa-hand-point-right,red larger %}
{%btn 'http://ahzoo.cn',清梦,far fa-hand-point-right,purple larger %}
{%btn 'http://ahzoo.cn',清梦,far fa-hand-point-right,orange larger %}
{%btn 'http://ahzoo.cn',清梦,far fa-hand-point-right,green larger %}
清梦 清梦 清梦 清梦 清梦 清梦 清梦
1
2
3
4
5
6
7
8
9
<div class="btn-center">
{%btn 'http://ahzoo.cn',清梦,far fa-hand-point-right,outline larger %}
{%btn 'http://ahzoo.cn',清梦,far fa-hand-point-right,outline blue larger %}
{%btn 'http://ahzoo.cn',清梦,far fa-hand-point-right,outline pink larger %}
{%btn 'http://ahzoo.cn',清梦,far fa-hand-point-right,outline red larger %}
{%btn 'http://ahzoo.cn',清梦,far fa-hand-point-right,outline purple larger %}
{%btn 'http://ahzoo.cn',清梦,far fa-hand-point-right,outline orange larger %}
{%btn 'http://ahzoo.cn',清梦,far fa-hand-point-right,outline green larger %}
</div>

标签外挂功能增强

此部分修改主要引用了主题volantis
所以使用下面的功能时需要先下载该主题目录下/scripts/tags/中需要文件,将其复制至博客主题文件\scripts\tags路径下,否则会报错

按钮Btns

引入代码:

1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ooahz/hexo@latest/css/btns.css">

写法:

1
2
3
4
{%btns 样式参数 %}
{%cell 标题, 链接, 图片或者图标 %}
{%cell 标题, 链接, 图片或者图标 %}
{%endbtns %}

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
{%btns circle grid5 %}
{%cell 清梦, https://ahzoo.cn/, https://ahzoo.cn/img/head.jpg %}
{%cell 清梦, https://ahzoo.cn/, https://ahzoo.cn/img/head.jpg %}
{%cell 清梦, https://ahzoo.cn/, https://ahzoo.cn/img/head.jpg %}
{%cell 清梦, https://ahzoo.cn/, https://ahzoo.cn/img/head.jpg %}
{%cell 清梦, https://ahzoo.cn/, https://ahzoo.cn/img/head.jpg %}
{%endbtns %}


{%btns rounded grid5 %}
{%cell 下载源码, /, fa fa-download %}
{%cell 查看文档, /, fa fa-download %}
{%endbtns %}

可以在容器内增加 <b>标题</b> <p>描述文字</p>

圆角参数:

1
rounded, circle

布局样式:

写法 说明
参数 含义
wide 宽一点的按钮
fill 填充布局,自动铺满至少一行,多了会换行。
center 居中,按钮之间是固定间距。
around 居中分散
grid2 等宽最多2列,屏幕变窄会适当减少列数。
grid3 等宽最多3列,屏幕变窄会适当减少列数。
grid4 等宽最多4列,屏幕变窄会适当减少列数。
grid5 等宽最多5列,屏幕变窄会适当减少列数。

折叠容器Folding

引入代码:

1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ooahz/hexo@latest/css/btns.css">

写法:

1
2
3
4
5
{%folding 参数(可选), 标题 %}

折叠内容

{%endfolding %}

参数位置可以填写颜色和状态,多个参数用空格隔开。
状态填写 open 代表默认打开
颜色:

1
blue, cyan, green, yellow, red

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
{%folding red open, 折叠测试 %}

这里是测试内容

{%endfolding %}



{%folding blue, 图片测试 %}

![](https://ahzoo.cn/img/head.jpg)

{%endfolding %}

折叠测试

这里是测试内容

图片测试

时间线Timeline

引入代码:

1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ooahz/hexo@latest/css/timeline.css">

写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{%timeline 时间线 %}

{%timenode 2020-08-09 [测试](https://ahzoo.cn/) %}

今天是2020-08-09

{%endtimenode %}

{%timenode 2020-08-08 [测试](https://ahzoo.cn/) %}

今天是2020-08-08

{%endtimenode %}

{%endtimeline %}

时间线

2020-08-09 测试

今天是2020-08-09

2020-08-08 测试

今天是2020-08-08

页脚修改

添加跳动的心
首先在博客引入这个开源css
\themes\butterfly\layout\includes\footer.pug,找到此段代码:

1
2
3
4
if theme.footer.owner.since && theme.footer.owner.since != nowYear
.copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}`
else
.copyright!= `&copy;${nowYear} By ${config.author}`

修改为

1
2
3
4
if theme.footer.owner.since && theme.footer.owner.since != nowYear
.copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} <i style="color:#FF6A6A" class="fa fa-heartbeat"></i> ${config.author}`
else
.copyright!= `&copy;${nowYear} <i style="color:#FF6A6A;animation: announ_animation 0.8s linear infinite;" class="fa fa-heartbeat"></i> ${config.author}`

动态图标

On DOM load On hover On parent hover
faa-wrench animated faa-wrench animated-hover faa-wrench
faa-ring animated faa-ring animated-hover faa-ring
faa-horizontal animated faa-horizontal animated-hover faa-horizontal
faa-vertical animated faa-vertical animated-hover faa-vertical
faa-flash animated faa-flash animated-hover faa-flash
faa-bounce animated faa-bounce animated-hover faa-bounce
faa-spin animated faa-spin animated-hover faa-spin
faa-float animated faa-float animated-hover faa-float
faa-pulse animated faa-pulse animated-hover faa-pulse
faa-shake animated faa-shake animated-hover faa-shake
faa-tada animated faa-tada animated-hover faa-tada
faa-passing animated faa-passing animated-hover faa-passing
faa-passing-reverse animated faa-passing-reverse animated-hover faa-passing-reverse
faa-burst animated faa-burst animated-hover faa-burst
faa-falling animated faa-falling animated-hover faa-falling
faa-rising animated faa-rising animated-hover faa-rising

如果使用 On parent hover 需要向父级元素添加 class 名 faa-parent animated-hover。其余两个不需要。另外可以通过添加faa-fast动画加速,faa-slow动画减速

去掉顶部图

在main.js添加

1
2
3
4
5
// 隐藏首页banner图
var full_page = document.getElementsByClassName("full_page");
if (full_page.length != 0) {
full_page[0].style.background = "transparent";
}
1
2
3
4
5
//隐藏index顶部图
var notiz = document.getElementsByClassName("not-index-bg");
if (notiz.length != 0) {
notiz[0].style.background = "transparent";
}

page顶部图高斯模糊
引入csshttps://cdn.jsdelivr.net/gh/ooahz/hexo@latest/css/all.css
在main.js添加

1
2
3
4
5
//page-img
var postbg = document.getElementsByClassName("post-bg");
if (postbg.length != 0) {
postbg[0].style.background = "#fff0";
}

移动端优化

新建一个css并引入:

1
2
3
4
5
6
7
8
/*移动端优化:去除归档、标签、最新文章、公告、、只保留网站统计*/

@media screen and (max-width: 800px) {
#aside_content div:not(:last-child) {
display: none;
font-size: 13px;
}
}

随机背景图

\Butterfly\layout\includes\layout.pug

找到代码:

1
2
if theme.background
- var is_photo = theme.background.substring(3,0) === 'url' ? 'photo':'color'

修改:

1
2
if theme.background
- var is_photo = 'photo'

找到代码:

1
2
footer#footer(style=footer_bg data-type=is_bg)
!=partial('includes/footer', {}, {cache:theme.fragment_cache})

在其下方增加代码后:

1
2
3
4
5
footer#footer(style=footer_bg data-type=is_bg)
!=partial('includes/footer', {}, {cache:theme.fragment_cache})
#if !is_post()
script() var bg_index = Math.floor(Math.random() * #{theme.background_num});var res = 'background-image: url("/img/banner/' + bg_index + '.jpg"); background-attachment: fixed;';document.getElementById('web_bg').style = res

if !is_post()表示文章页面不采用随机背景

修改完毕后在配置文件中将background设置为任意颜色,并添加代码:

1
2
3
# 随机背景图banner的数量
background_num: 16

修改背景颜色及透明度

主题文档\source\css\var.styl

1
2
$card-bg:卡片背景
$body-bg:主体界面背景

直接修改上述两个属性的颜色即可

顶部点击水波纹效果

引入js:

1
2
3
<script src="https://cdn.jsdelivr.net/gh/ooahz/hexo@latest/js/ripples.js"></script>   
<script src="https://cdn.jsdelivr.net/gh/ooahz/hexo@latest/js/ripples1.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ooahz/hexo@latest/js/ripples2.js"></script>

顶部上升气泡

引入js:

1
<script src="https://cdn.jsdelivr.net/gh/ooahz/hexo@latest/js/bubble.js"></script>   

文章双栏显示

安装插件

1
2
3
4
5
npm i hexo-butterfly-article-double-row --save

# 或者

cnpm i hexo-butterfly-article-double-row --save

在配置文件中添加如下代码:

1
2
butterfly_article_double_row:
enable: true

实现界面的完全自定义

只需要将Front-matter中的tape属性删除即可
以分类界面为例:

只需要将type: categories删除即可

1
2
3
4
---
title: 分类
date: 2020-05-20 09:34:30
---

Copyright版权美化

  • 主题文档\layout\includes\post\post-copyright.pug
    将原文档:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    if theme.post_copyright.enable && page.copyright !== false
    - let author = page.copyright_author ? page.copyright_author : config.author
    - let authorHref = page.copyright_author_href ? page.copyright_author_href : `mailto:${config.email}`
    - let url = page.copyright_url ? page.copyright_url : page.permalink
    - let info = page.copyright_info ? page.copyright_info : _p('post.copyright.copyright_content', theme.post_copyright.license_url, theme.post_copyright.license, config.url, config.title)
    .post-copyright
    .post-copyright__author
    span.post-copyright-meta= _p('post.copyright.author') + ": "
    span.post-copyright-info
    a(href=authorHref)=author
    .post-copyright__type
    span.post-copyright-meta= _p('post.copyright.link') + ": "
    span.post-copyright-info
    a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
    .post-copyright__notice
    span.post-copyright-meta= _p('post.copyright.copyright_notice') + ": "
    span.post-copyright-info!= info

    全部删除后修改为:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
if theme.post_copyright.enable && page.copyright !== false
- let author = page.copyright_author ? page.copyright_author : config.author
- let url = page.copyright_url ? page.copyright_url : page.permalink
- let license = page.license ? page.license : theme.post_copyright.license
- let license_url = page.license_url ? page.license_url : theme.post_copyright.license_url
.post-copyright
.post-copyright__title
span.post-copyright-info
h #[=page.title]
.post-copyright__type
span.post-copyright-info
a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
.post-copyright-m
.post-copyright-m-info
.post-copyright-a
h 作者
.post-copyright-cc-info
h=author
.post-copyright-c
h 发布于
.post-copyright-cc-info
h=date(page.date, config.date_format)
.post-copyright-u
h 更新于
.post-copyright-cc-info
h=date(page.updated, config.date_format)
.post-copyright-c
h 许可协议
.post-copyright-cc-info
a.icon(rel='noopener' target='_blank' title='Creative Commons' href='https://creativecommons.org/')
i.fab.fa-creative-commons
a(rel='noopener' target='_blank' title=license href=url_for(license_url))=license
  • 主题文档\source\css\_layout\post.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
.post-copyright
position: relative
margin: 2rem 0 .5rem
padding: .5rem .8rem
border: 1px solid var(--light-grey)
transition: box-shadow .3s ease-in-out
+ overflow: hidden
+ border-radius: 12px!important
+ background-color: rgb(239 241 243)

&:before
- position: absolute
- top: t = .5rem
- right: t
- width: w = .8rem
- height: w
- border-radius: w
- background: $light-blue
- content: ''
+ position absolute
+ right -26px
+ top -120px
+ content '\f25e'
+ font-size 200px
+ font-family 'Font Awesome 5 Brands'
+ opacity .2

- &:after
- position: absolute
- top: t = .7rem
- right: t
- width: w = .4rem
- height: w
- border-radius: w
- background: var(--card-bg)
- content: ''

&:hover
box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)

.post-copyright
&-meta
color: $light-blue
font-weight: bold

&-info
padding-left: .3rem

a
- text-decoration: underline
+ text-decoration: none
word-break: break-word

&:hover
text-decoration: none

+ .post-copyright-cc-info
+ color: $theme-color;

.post-outdate-notice
position: relative
margin: 0 0 1rem
padding: .5em 1.2em
- border-radius: 3px
+ border-radius: 15px
background-color: $noticeOutdate-bg
color: $noticeOutdate-color

并在底部添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
  .ads-wrap
margin: 2rem 0
.post-copyright-m-info
.post-copyright-a,
.post-copyright-c,
.post-copyright-u
display inline-block
width fit-content
padding 2px 5px
[data-theme="dark"]
#post
.post-copyright
background-color #07080a
text-shadow #bfbeb8 0 0 2px
border 1px solid rgb(19 18 18 / 35%)
box-shadow 0 0 5px rgb(20, 120, 210)
animation flashlight 1s linear infinite alternate
.post-copyright-info
color #e0e0e4

#post
.post-copyright__title
font-size 22px
.post-copyright__notice
font-size 15px
.post-copyright
box-shadow 2px 2px 5px

@keyframes flashlight
from
box-shadow 0 0 5px rgb(20, 120, 210)
to
box-shadow 0 0 2px rgb(20, 120, 210)
  • 拓展功能(在文档front-matter处添加):
    1
    2
    3
    4
    copyright_author:  自定义作者
    copyright_url: 自定义原文链接
    license: 自定义许可协议名称
    license_url: 自定义许可协议链接

合并CSS文件

将自定义CSS并入主体CSS中,用以节省请求次数,以此加快访问速度
但是如果是单页CSS就没必要了,反而会拖慢加载速度
主题文档\source\css\

1
@import '引入CSS文件的地址(网络或本地地址均可)'

如果要合并整个文件夹的话也无需一个个添加,
主题文档\source\css\下新建文件夹,文件夹名随意

然后在主题文件\source\css\index.styl中添加如下代码

1
@import '文件夹名/*.css'

未完待续。。。