早就想对默认的引用块的样式美化一下了，中间过程却是出人意料的折磨，不过最终得到了不错的结果。特此记录。
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的设置，仅供参考。然后成果如下：
总算解决了。