让感兴更有力地表达！

——秉蕳

文章痕迹

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
  • [x] 整理Markdown语法
  • 29th
  • H20
  • ==marked==
  • inserted

引用一个句子。

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

让感兴更有力地表达！

——秉蕳

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

markdown-it 插件

defist

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

ruby

{% ruby Base|top %}

Hello(你好) 你好(你好)

外挂标签

Tag Plugins Plus | Akilarの糖果屋

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

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

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

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

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

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

Spotify歌单(原生)

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

外挂标签Plus

早上跑步🏃‍

生活学习摄影

子虚栈

https://blog.si-on.top

广播

测试案发生发

测试案发生发

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 的编号以及其前缀 ↩︎