早就想对默认的引用块的样式美化一下了，中间过程却是出人意料的折磨，不过最终得到了不错的结果。特此记录。
markdown 默认的引用块非常简陋，如图：
于是我在网上找了找教程，想要对其优化。不过很尴尬的是网上大多数都是代码块的美化，想想大多写 blog 的都是程序员，对代码块需求显然更多一些。
不过我终于还是找到了一个日本的网站：CSSで作る！魅力的な引用デザインのサンプル30（blockquote）
里面详尽地给出了很多种引用块的 css 样式（似乎要挂梯子才能正常浏览 css ），我挑了一个自己看着顺眼的使用，如下图所示：
然后将其给出的 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
| blockquote {
position: relative;
padding: 7px 16px;
box-sizing: border-box;
font-style: italic;
color: #585858;
border: solid 3px #585858;
}
blockquote:before{
display: inline-block;
position: absolute;
top: -20px;
left: -20px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
text-align: center;
content: "\f10d";
font-family: FontAwesome;
background: #585858;
color: #FFF;
font-size: 22px;
}
blockquote:after{
display: inline-block;
position: absolute;
bottom: -20px;
right: -20px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
text-align: center;
content: "\f10e";
font-family: FontAwesome;
background: #585858;
color: #FFF;
font-size: 22px;
font-weight: 900;
}
blockquote p {
padding: 0;
margin: 10px 0;
line-height: 1.7;
}
blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}
|
然后可以通过自定义 css 的方法引入 blog，或者也可以通过直接修改 main.css 的方法。前者更加灵活，而且我使用的 Fluid 主题并不支持 main.css 的修改，所以选用自定义 css。
在主题配置文件里修改引入的自定义 css（不同主题修改方式可能不同，请以自己使用主题为准）:
1
2
|
custom_css: /css/custom.css
|
之后对应位置新建 custom.css ，填入刚刚的css。但是并不能直接生效，因为原网站引用了 FontAwesome 字体资源，用来显示引用块前后的两个引号图标，我的 blog 并没有，所以需要更改。
这里我选择了阿里的 iconfont 图标库，首先注册账号，可以直接用 Github 账号登录。然后挑选合适的图标，选好后 添加入库 ，然后把图标 添加至项目 。
在项目中，可以 查看在线链接 ，获取到 css 引用的字体文件的链接，这些文件储存在阿里的 cdn 上，速度很快。之前因为 cdn 问题，在线链接取消过一段时间，如果想要稳定可以考虑本地存放，不过阿里的 cdn 应该还是比较靠谱的。
然后 下载至本地 ，在压缩包里可以发现一个 iconfont.css ，把里面内容复制到刚刚的 custom.css ，之后再把获取的链接替换 @font-face 部分，并修改原 css 中的 font-family 为 iconfont ；content 修改为对应的代码。
之后理论上就可以显示了，如下图：
emm…有点不对劲？可以看到引用块最左侧一条是灰色的，但是正常情况下应该是一个黑色的框完全包围。
其实把 hexo 默认的样式取消掉就行了，不同主题设置可能不同，但是 Fluid 主题的 css 是引用的外部文件，我改不了。
这个问题困扰了我很久很久，直到我听说了 css 权重 的概念，通过使用 !important 关键字让我们的 css 以更高权重覆盖默认的 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
| @font-face {
font-family: 'iconfont';
src: url('//at.alicdn.com/t/c/font_3536603_x2bmwypdoxm.woff2?t=1659431597857') format('woff2'),
url('//at.alicdn.com/t/c/font_3536603_x2bmwypdoxm.woff?t=1659431597857') format('woff'),
url('//at.alicdn.com/t/c/font_3536603_x2bmwypdoxm.ttf?t=1659431597857') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-quoteleft:before {
content: "\e7d1";
}
.icon-quote-right:before {
content: "\e909";
}
blockquote {
position: relative;
padding: 7px 16px !important;
box-sizing: border-box;
color: #585858;
border: solid 3px #585858 !important;
}
blockquote:before{
display: inline-block;
position: absolute;
top: -20px;
left: -20px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
text-align: center;
content: "\e7d1";
font-family: iconfont;
background: #585858;
color: #FFF;
font-size: 19px;
}
blockquote:after{
display: inline-block;
position: absolute;
bottom: -20px;
right: -20px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
text-align: center;
content: "\e909";
font-family: iconfont;
background: #585858;
color: #FFF;
font-size: 19px;
font-weight: 900;
}
blockquote p {
padding: 0;
margin: 10px 0;
line-height: 1.7;
color: #76828e;
}
blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}
|
这是我个人blog的设置，仅供参考。然后成果如下：
总算解决了。
2025.8.30 更新
很早以前写的文章了，今天突然发现引用的图标不显示了，想着修复一下于是找到了当时的记录（幸好还有记录，不然全忘光了）。突然发现文章的图片也全没了，这些图片应该是用 sm.ms 那个图床存的，现在图床还开着，但是估计换域名了，所以以前的很多图片都不显示了。所幸我很早就开始图片备份了，在 github 上特意备份了绝大多数所有文章图片，因此现在还可以补上去。
不过图标还是可以修复的，当时用的是阿里的在线 cdn ，当时还想着应该不会有什么问题，结果现在还是坏了XD。不过似乎不是 cdn 出问题了，而是字体的渲染出了问题，我按照以前的方案尝试了很久也没能弄好，因此只能作罢。
然后我就打算不用字体了，直接用图片引号吧，不过在我尝试的时候意外发现直接用字符引号（“”）的效果其实就不错，经过一段时间的位置微调对齐，最后结果还是比较令人满意的。顺便我还把边框/字体/符号颜色修改的和原文一样可以随白天/黑夜模式而变化了。
另外还有一个比较玄学的事，css 文件中必须保留 iconfont 这一部分，如果删去这一部分，那么下面的内容都不会生效。具体是怎么回事我也说不准，猜测可能是 iconfont 会覆盖 Fluid 主题的一些设置，不过反正能跑就没必要动了。（
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
| .iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
blockquote {
position: relative;
padding: 7px 16px !important;
box-sizing: border-box;
color: #585858;
border: solid 3px var(--post-text-color) !important;
}
blockquote:before{
display: inline-block;
position: absolute;
top: -10.7px;
left: -57px;
width: 40px;
height: 40px;
line-height: 66px;
border-radius: 50%;
text-align: center;
content: " “ ";
font-family: SimHei;
color: var(--post-text-color);
font-size: 80px;
font-weight: 900;
}
blockquote:after{
display: inline-block;
position: absolute;
bottom: -31.2px;
right: -15px;
width: 40px;
height: 40px;
line-height: 77px;
border-radius: 50%;
text-align: center;
content: " ” ";
font-family: SimHei;
color: var(--post-text-color);
font-size: 80px;
font-weight: 900;
}
blockquote p {
padding: 0;
margin: 10px 0;
line-height: 1.7;
color: var(--post-text-color);
}
blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}
|
到此为止就完成了，下面是引用框测试。
西班牙说过一句富有哲理的话，自己的鞋子，自己知道紧在哪里。这句话语虽然很短，但令我浮想联翩。 在这种困难的抉择下，本人思来想去，寝食难安。既然如何， 中午吃什么，发生了会如何，不发生又会如何。 了解清楚中午吃什么到底是一种怎么样的存在，是解决一切问题的关键。所谓中午吃什么，关键是中午吃什么需要如何写。 带着这些问题，我们来审视一下中午吃什么。 一般来说， 经过上述讨论，王阳明曾经提到过，故立志者，为学之心也；为学者，立志之事也。这不禁令我深思。 我认为， 在这种困难的抉择下，本人思来想去，寝食难安。这种事实对本人来说意义重大，相信对这个世界也是有一定意义的。 每个人都不得不面对这些问题。 在面对这种问题时， 每个人都不得不面对这些问题。在面对这种问题时， 我们一般认为，抓住了问题的关键，其他一切则会迎刃而解。雷锋说过一句富有哲理的话，自己活着，就是为了使别人过得更美好。带着这句话，我们还要更加慎重的审视这个问题： 既然如何， 一般来说，阿卜·日·法拉兹说过一句富有哲理的话，学问是异常珍贵的东西，从任何源泉吸收都不可耻。
（胡言乱语.jpg）