让感兴更有力地表达!

——秉蕳

文章痕迹

2023-01-11

  • 复习了Markdown经常忘记的语法
  • 整理了Butterfly主题的外挂标签

2023-04-16

  • 把近两年的魔改记录汇总到此页面

Markdown基本语法

标题

除了#字符,文字下加线也可以作为一级或二级标题。

1
2
3
4
5
一级标题
===============

二级标题
---------------

段落与换行

Markdown不支持空格(spaces)或制表符( tabs)缩进段落,段落之间用一个空行来分隔,不同行之间用回车或<br>来换行。

文本样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
- [ ] 精通Markdown
- [x] 整理Markdown语法
- [x] ~~列表、代码、分割线、链接、图片语法~~
- 29^th^ => `29<sup>th</sup>`
- H~2~0 => `H<sub>2</sub>O`
- ==marked== => `<mark>inserted</mark>`
- ++inserted++ => `<ins>inserted</ins>`


> 引用一个句子。

下面是一个**更好看**的引用样式,内容居中,*作者或来源*右对齐。
> <center>让感兴更有力地表达!</center>
> <p align="right">——<i>秉蕳</i></p>

脚注示例,这是第一个脚注[^注脚名1],这是第二个脚注[^注脚名2],这是第三个脚注[^注脚名3]
[^注脚名1]:我是脚注一.
[^注脚名2]:我是脚注二.
[^注脚名3]:我是脚注三.


  • 精通Markdown
  • 整理Markdown语法
  • 29th
  • H20
  • ==marked==
  • inserted

引用一个句子。

下面是一个更好看的引用样式,内容居中,作者或来源右对齐。

让感兴更有力地表达!

——秉蕳

脚注示例,这是第一个脚注[1],这是第二个脚注[2],这是第三个脚注[3]

markdown-it 插件

defist

hexo
博客框架
npm包
{可以用pnpm进行管理 }
方便好用

ruby

{% ruby Base|top %}

Hello(你好) 你好(你好)

外挂标签

  1. 下划线 的文本
  2. 着重号 的文本
  3. 波浪线 的文本
  4. 删除线 的文本
  5. 键盘样式的文本 command + D
  6. 密码样式的文本:这里没有验证码
春夜喜雨
杜甫

好雨知时节,当春乃发生。

随风潜入夜,润物细无声。

野径云俱黑,江船火独明。

晓看红湿处,花重锦官城。

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

Spotify歌单(原生)

《爱乐》杂志2023年七月份书里提到的歌曲、专辑、艺人的Spotify歌单

外挂标签Plus

早上跑步🏃‍

生活 学习 摄影

广播

测试案发生发

测试案发生发

Tips标签

原始Tip:灰色,无Logo

禁止:红色,禁止标识

铃铛🔔:从左到右的金黄色渐变,铃铛

闪电 bolt :绿色

设置 cogs:蓝色的齿轮

自定义 fa-atom 灰色,原子

错误error 浅红,叉

家 home:蓝色,家

关键 key 灰色,钥匙

成功 success 绿色对钩

同步 sync 湖蓝色,同步

警告 warning 橙色,感叹号

tips动画

以中心为支点,左右晃动 faa-wrench

以中心为支点,左右强烈晃动

左右晃动

上下晃动

一闪一闪

跳起来

活泼地跳起来

不停放大缩小

shake 与faa-wrench类似:以中心为支点,左右晃动

转圈

向右消失

向左消失

放大后消失

向下消失

向上消失

没有效果

Markmap

Butterfly魔改

配色修改

配色主要修改两个地方:

主题色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
theme_color:
enable: true
main: "#414141" #主色调、影响评论
paginator: "#FFE411" #页码
button_hover: "#FFE411" # 按钮背景、移动到按钮上颜色
text_selection: "#000000" # 选中状态
link_color: "#3216B0" #链接颜色
# meta_color: "#000000" # 主颜色、链接、日期颜色
hr_color: "#000000" #
code_foreground: "#E266B7"
code_background: "rgba(27, 31, 35, .05)"
toc_color: "#FFE411" #目录颜色
blockquote_padding_color: "#BEBEBE" # 引用悬挂颜色
blockquote_background_color: "#BEBEBE" # 引用背景颜色
meta_theme_color_light: "#FFE411"
meta_theme_color_dark: "#FFE411"
弹窗颜色
1
2
3
4
5
snackbar:
  enable: true
  position: top-right
  bg_light: '#FFE411' # The background color of Toast Notification in light mode
  bg_dark: '#FFE411' # The background color of Toast Notification in dark mode

文章标题等样式

mod.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
#article-container h1:before {
font-family: "iconfont";
content: "\e601";
}

#article-container h2:before {
font-family: "iconfont";
content: "\e602";
margin-left: -24px;
font-size: 18px;
}

#article-container h3:before {
font-family: "iconfont";
content: "\e608";
margin-left: -22px;
font-size: 16px;
}

#article-container h4:before {
font-family: "iconfont";
content: "\e603";
margin-left: -20px;
font-size: 14px;
}

#article-container h5:before {
font-family: "iconfont";
content: "\e609";
}

#article-container h6:before {
font-family: "iconfont";
content: "\e605";
}

#article-container h1:after,
#article-container h2:after,
#article-container h3:after,
#article-container h4:after,
#article-container h5:after,
#article-container h6:after {
font-family: "iconfont";
content: "\e640";
}


/* 标题黑体 */
/* #article-container h1,
#article-container h2,
#article-container h3,
#article-container h4,
#article-container h5,
#article-container h6 {
font-family: "Helvetica Neue", helvetica, arial, "Heti Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
} */

/* 引用加符号 */
/* #article-container blockquote:before {
font-family: "iconfont";
content: "\e600";
font-size: 24px;
} */


/* 段落首行缩进两个字符,但会导致其他内容出现问题 */
/*
#article-container p{
text-indent: 2em;
} */
/* 卡片样式 */
.cardHover, .error404 #error-wrap .error-content, .layout > div:first-child:not(.recent-posts), #recent-posts > .recent-post-item, #aside-content .card-widget, .layout > .recent-posts .pagination > *:not(.space) {
box-shadow: none!important;
border-radius: 12px;
box-sizing: border-box;
/* 透明背景 */
background: rgba(255, 255, 255, 0);
}

/*阴影修改 */
:root{
--card-box-shadow: 0 0px 1px 0.6px rgba(0,0,0,0.5)
}

/* 加宽布局 */
.layout { max-width: 1350px;}

/* 删除页尾 */
#footer-wrap {
padding: 0px 9px;
}

行内代码改成黑色,让字体随暗色模式自动变白

themes\butterfly\source\css\_highlight\highlight.styl
1
2
3
4
5
  code
padding: 2px 4px
background: $code-background
- color: $code-foreground

图片样式

圆角+阴影

1
2
3
4
5
6
7
8
9
10
11
#article-container img {
display: block;
box-shadow: 0 0 10px #555;
border-radius: 14px;
max-width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
-webkit-box-shadow: 0 0 10px #555;
}

背景

1
repeating-linear-gradient(90deg, rgba(201,201,201, 0) 0px, rgba(201,201,201, 0) 1px,transparent 1px, transparent 96px),repeating-linear-gradient(0deg, rgba(201,201,201, 0) 0px, rgba(201,201,201, 0) 1px,transparent 1px, transparent 96px),repeating-linear-gradient(0deg, rgba(228,228,228, 0.35) 0px, rgba(228,228,228, 0.35) 1px,transparent 1px, transparent 6px),repeating-linear-gradient(90deg, rgba(228,228,228, 0.35) 0px, rgba(228,228,228, 0.35) 1px,transparent 1px, transparent 6px),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));

字体

参考:Hexo 博客之优雅使用阿里 iconfont 图标 | 小康博客 (antmoe.com)

1
- <link rel="stylesheet" href="/css/mod.css">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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
#article-container h1:before {
font-family: "iconfont";
content: "\e601";
}

#article-container h2:before {
font-family: "iconfont";
content: "\e602";
}

#article-container h3:before {
font-family: "iconfont";
content: "\e608";
}

#article-container h4:before {
font-family: "iconfont";
content: "\e603";
}

#article-container h5:before {
font-family: "iconfont";
content: "\e609";
}

#article-container h6:before {
font-family: "iconfont";
content: "\e605";
}

#article-container h1:after,
#article-container h2:after,
#article-container h3:after,
#article-container h4:after,
#article-container h5:after,
#article-container h6:after {
font-family: "iconfont";
content: "\e640";
}

#article-container h1,
#article-container h2,
#article-container h3,
#article-container h4,
#article-container h5,
#article-container h6 {
font-family: "Helvetica Neue", helvetica, arial, "Heti Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";;
}




/* #article-container blockquote:before {
font-family: "iconfont";
content: "\e600";
font-size: 24px;
} */

#article-container p{
text-indent: 2em;
}

图标

font awesome V5-V6 也有自己独立的网站 (点击跳转)。[4]在主页,点击导航栏的搜索图标,在随后的页面中输入自己想要的图标名,并点击对应的图标,网页将会显示一个页面如下,复制其中的 fa-solid fa-address-book, 黏贴到对应的位置即可。

细心的读者可能会疑惑为啥这里是 fa-solid?实际上这是因为 fas 是第五版的写法,fa-solid 则是第六版的写法,读者需要根据自己主题使用的是 font awesome v5 还是 v6 自行选择使用对应的前缀。以下将会整理第五版与第六版的前缀的对应关系。

Version 5 Version 6
fas fa-solid
fab fa-brands
fad fa-duotone
fal fa-light
far fa-regular

看板宠物

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#黑大帅

- <script>addEventListener("DOMContentLoaded",function(){let models=[{width:1280,height:768,right:"0px",bottom:"-600px",role:"https://blog.si-on.top/pdf/live2d_models/黑大帅/黑大帅.model3.json",background:"",opacity:1,mobile:false,scale:0.1,draggable:false,},];new Live2dLoader(models)})</script>

#潇洒哥

- <script>addEventListener("DOMContentLoaded",function(){let models=[{width:1280,height:768,left:"0px",bottom:"-600px",role:"https://blog.si-on.top/pdf/live2d_models/xiaosage/79f0f736afc379315ac5217ffcc4b74543a91132.model3.json",background:"",opacity:1,mobile:false,draggable:false,},];new Live2dLoader(models)})</script>

#灰太狼

- <script>addEventListener("DOMContentLoaded",function(){let models=[{width:1280,height:768,left:"400px",bottom:"0px",role:"https://blog.si-on.top/pdf/live2d_models/灰太狼/灰太狼9.model3.json",background:"",opacity:1,mobile:false,scale:0.7,draggable:false,},];new Live2dLoader(models)})</script>

#猫尾草

- <script>addEventListener("DOMContentLoaded",function(){let models=[{width:1280,height:768,right:"0px",bottom:"-600px",role:"https://blog.si-on.top/pdf/live2d_models/猫尾草/猫尾草.model3.json",background:"",opacity:1,mobile:false,scale:0.7,draggable:false,},];new Live2dLoader(models)})</script>

  1. 我是脚注一. ↩︎

  2. 我是脚注二. ↩︎

  3. 我是脚注三. ↩︎

  4. 如何快速获取 icon 的编号以及其前缀 ↩︎