修改Hexo引用样式为双引号形式
这篇文章教大家怎么修改主题的引用样式为双引号形式。
比如我们在md里使用>引用语法写下:1
2
3>博主为啥开淘宝店?
>1.我说好奇你信吗。
>2.生活所迫*@(装大款)*
博主的JSimple主题默认显示的引用样式如下:
想把它改成这种样子的
因为这里双引号正好在引用块的前后,可以使用css的before\after伪元素实现。
首先使用F12开发工具找到引用块的元素
然后给这个元素添加css代码。
这里直接给出代码如下:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23blockquote:after {
position: relative;
content: '\f10e' ;
font-size: 1rem;
float: right;
top: -1rem;
margin-right:-1em;
color: #233;
font-family: FontAwesome;
}
blockquote:before {
position: relative;
content: "\f10d" ;
font-size: 1rem;
left: 0;
margin-left:-1em;
color: #233;
font-family: FontAwesome;
}
.markdown-body blockquote
{
margin-left:1em;margin-right:1em;padding:.25em 1em;color:#666;
}
其中.markdown-body blockquote
去掉了左边的边框。
然后content中的字符是根据字体文件的内容:
就这样,不想多说。太懂的可以参考B站视频教程
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦
您的喜欢是作者写作最大的动力
QQ群和公众号