让感兴更有力地表达！

——秉蕳

1
2
3
4
5
6
7
8
9
10
{% timeline 文章痕迹, %}
<!-- timeline 2023-01-11-->
* 复习了Markdown经常忘记的语法
* 整理了Butterfly主题的外挂标签
<!-- endtimeline -->
<!-- timeline 2023-04-16-->
* 把近两年的魔改记录汇总到此页面
<!-- endtimeline -->

{% endtimeline %}

hexo基本语法

标题

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

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]

外挂标签

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

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

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

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

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

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

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;
  }

推送服务

简单浏览器更新推送的实现 | CC的部落格 (ccknbc.cc)

  1. 我是脚注一. ↩︎

  2. 我是脚注二. ↩︎

  3. 我是脚注三. ↩︎