🍻 正在加载今日诗词....

hexo+yilia修改代码块等样式

阅读数：300次
字数统计: 2.2k字   |   阅读时长≈ 10分

代码块的样式真的很重要，毕竟咱好歹是一个技术博客，难免会贴一些代码的。因此参考https://cqh-i.github.io的样式进行了调整，下面是HTML的例子，更多具体效果可以参考这篇博客的样式：test-codestyle。

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html代码块样本</title>
</head>
<body>
    <h1>这个样式可还行？</h1>
    <p class="p1" style="font-size:20px;">我的第一个段落。</p>
</body>
</html>

说明

  1. 由于每个人可能都修改过样式文件，所以每个人的样式可能都会有所不同。建议修改之前做好备份，防止出现错误难于恢复，可以使用git进行版本管理（备份博客的源码和配置）。
  2. 我的备份文件，详见代码块样式调整备份文件，cqh-i.github.io.css为博客https://cqh-i.github.io的代码块样式。main.0cf68a.css为我之前的css文件的备份。

文中超链接样式

默认：

1
2
3
4
5
a {
    background: 0 0;
    text-decoration: none;
    color: #08c;
}

修改（添加内容）后：

1
2
3
4
5
6
7
8
9
/* 文章中的超链接,鼠标悬浮特效 */
.article-entry li a:hover, .article-entry p a:hover {
    background: 0 0;
    text-decoration: underline;
    color: #08c;
    /* font-size:18px; */
    font-weight:bold;
    transition:.8s;
}

再次修改：

参考：https://css.30secondsofcode.org/snippet/hover-underline-animation

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
/* 文章中的超链接,鼠标悬浮特效*/
.article-entry a{
    display: inline-block;
    position: relative;
    color: #0087ca;
    font-family: lucida console;/* 这种字体的英文比较好看（像代码样式） */
}
/* 鼠标悬浮时，变色 */
.article-entry a:hover{
    color: #d7191a;
    transition:.8s;
}
/* 鼠标悬浮时，下划线从中间向两边延伸 */
.article-entry a:hover::after{
  transform: scaleX(1);
  /* 旋转，与transform连用；这里作用：鼠标悬浮时，底部的下划线从中间扩散到两边。
   bottom right :左到右出现，左到右消失（需配合上面的::after）
  */
  transform-origin: bottom center;
}
/* 鼠标移开后，下划线从两边向中间消失 */
.article-entry a::after{
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1.5px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  /* 详见：https://www.w3school.com.cn/cssref/pr_transform-origin.asp,
  旋转，与transform连用；这里作用：鼠标移开后，底部的下划线从中间开始消失 */
  transform-origin: bottom center;
  transition: transform 0.5s ease-out;
}

2019年11月8日调整将article-entry换成mid-col，原来只是文章中文的超链接，现在改为右边栏都进行设置。（可能会出现很多负面影响，请自行决定是否更改）。

行内代码块样式

默认：

1
2
3
4
5
6
7
8
9
.article-entry li code,.article-entry p code {
    padding: 1px 3px;
    margin: 0 3px;
    background: #ddd;
    border: 1px solid #ccc;
    font-family: Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;
    word-wrap: break-word;
    font-size: 14px
}

参考csdn代码块样式：主要是调整颜色为红色

1
2
3
4
5
.markdown_views code {
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: -9px;
}

修改后：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 行内代码块``的样式，参考csdn的
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 2px;
    padding: 2px 4px;
*/
.article-entry li code, .article-entry p code {
	color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 2px;
    padding:2px 4px;
    margin:0 3px;
    /* background:#ddd; */
    /* border:2px solid #ccc; */
    font-family:Menlo, Monaco, Andale Mono, lucida console, Courier New, monospace;
    word-wrap:break-word;
    /* font-size:14px */
}

补充：一开始没注意到原来该样式不包含标题中的代码块，添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 标题中的代码块样式 */
.article-entry code {
    /* background:#eee;
    padding:0 .3em;
    border:none */
    color: #c7254e;
    background-color: rgba(249,242,244,.7);
    border-radius: 2px;
    padding: 2px 4px;
    margin: 0 3px;
    font-family: Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;
    word-wrap: break-word
}

代码块主要样式文件

代码块简单设置

参考：Hexo 基于yilia主题及其它插件优化

1.修改代码块的样式

直接修改编译好的文件。路径为： theme/yilia/source/main.0cf68a.css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
(1)修改代码背景色，
搜索 .article-entry .highlight, 修改background后面的颜色
将 pre{background:#272822;
改为 pre{background:#1a0139;

(2)修改行号颜色，
搜索 .article-entry .highlight .gutter pre .line
将.article-entry .highlight .gutter pre .line{color:#666
改为.article-entry .highlight .gutter pre .line{color:#fc0000

(3)修改代码字体颜色 
搜索 .article-entry .highlight .line
将.article-entry .highlight .line{color:#fff;
修改为.article-entry .highlight .line{color:#00ff0d;

效果图：

个人感觉还不是很满意，有待优化。

2.代码块行号显示错乱

修改yilia/source/main.0cf68a.css的内容：将white-space:pre-wrap; 删除，这个问题是自动换行造成的，使用不自动换行的white-space:pre;样式代码块部分会自动出现底部滚动条，行号错乱问题就没有了。

3.重点调整

不知道是hexo还是yilia主题自带的是使用highlight.js进行代码高亮的，但是好像是内置的，因为我不会写源码，只能更改生成的文件：yilia/source/main.0cf68a.css，按照识别的关键字自定义颜色，这里是我的一些配置，你也可以自己使用F12进行调试。（当然网上也有许多替换自指定的highlight.js进行代码高亮的教程）。

特别注意：高亮的前提是语言要写对，不然只能当做普通文本进行识别。

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
/* 代码块样式之评论：黄色 */
pre .comment {
    color:#ffec8b
}
/* 代码块样式之类的参数、函数的关键字、关键字：蓝色 */
pre .class .params, pre .function .keyword, pre .keyword, pre .literal {
    color:#66d9ef
}
/* 代码块样式之css的属性值、函数名、参数、标签：白色 */
pre .css .value, pre .doctype, pre .function, pre .params, pre .tag {
    color:#fff
	/* color:#66d9ef; */
}
/* 代码块样式之HTML或者xml的头部元素：红色(颜色较浅) */
pre .meta{
    color:#f78da1;
}
/* 代码块样式之HTML的标签：红色 */
pre .tag .name {
    /* color:#dc3958; */
	 color:#ff6481;
}
/* 代码块样式之：色 */
pre .at_rule, pre .at_rule .keyword, pre .css~* .tag, pre .preprocessor, pre .preprocessor .keyword, pre .title{
    color:#fa9400
}
/* 代码块样式之属性、类、函数的title：绿色 */
pre .attr,pre .attribute, pre .built_in, pre .class, pre .css~* .class, pre .function .title {
    color:#a6e22e
}
/* 代码块样式之字符串、属性值：猪肝色 */
pre .string, pre .value {
    color:#e6db74
}
/* 代码块样式之数字：粉红色 */
pre .number {
    color:#ffe4b5
}
pre .css~* .id, pre .id {
    color:#fd971f
}

文章内的超链接和引用块超出页面的问题

参考：css自动换行如何设置?url太长会撑开页面

当页面进行缩放时，说明这两个区域可能会超出页面。

使用下面这两个属性进行截断：

1
2
3
/* 如果超长，自动截断 */
word-wrap:break-word;
word-break:break-all;

具体如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a {
    background:transparent;
    text-decoration:none;
    color:#08c;
	/* 如果超长，自动截断 */
    word-wrap:break-word;
    word-break:break-all;
}
.article-entry blockquote {
    background:#ddd;
    border-left:5px solid #ccc;
    padding:15px 20px;
    margin-top:10px;
    border-left:5px solid #657b83;
    background:#f6f6f6;
    /* 如果超长，自动截断 */
    word-wrap:break-word;
    word-break:break-all;
}

左侧边栏的菜单

导航超链接样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 这个字体不错font-family: STCaiyun,STXingkai; */
.left-col #header .header-menu {
    font-family: STCaiyun,STXingkai;
    line-height: 31px;
    text-transform: uppercase;
    float: none;
    min-height: 150px;
    margin-left: -12px;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

主页‘展开全文’按钮样式

样式参考：http://ianlunn.github.io/Hover/的hvr-shutter-in-horizontal按钮，示例：https://codepen.io/yansheng836/pen/QWWmEro。

1.添加class

修改H:\Hexo\themes\yilia\layout\_partial\article.ejs，查找index && theme.show_all_link，找到如下内容

1
2
3
4
5
<% if (index && theme.show_all_link){ %>
  <p class="article-more-link">
    <a class="article-more-a" href="<%- url_for(post.path) %>"><%= theme.show_all_link %> >></a>
  </p>
<% } %>

在class="article-more-a中添加hvr-shutter-in-horizontal

1
2
3
4
5
<% if (index && theme.show_all_link){ %>
  <p class="article-more-link">
    <a class="article-more-a  hvr-shutter-in-horizontal" href="<%- url_for(post.path) %>"><%= theme.show_all_link %> >></a>
  </p>
<% } %>

2.修改样式

修改H:\Hexo\themes\yilia\source\main.0cf68a.css，查找.article-more-link a

1
2
3
4
5
6
7
8
9
10
11
12
.article-more-link a {
    background:#4d4d4d;
    color:#fff;
    font-size:12px;
    padding:5px 8px;
    line-height:16px;
    border-radius:2px;
    transition:background .3s
}
.article-more-link a:hover {
    background:#3c3c3c
}

修改为：

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
/* 《展开全文按钮 */
 .article-more-link a {
    color:#fff;
    font-size:12px;
    padding:5px 8px;
    line-height:16px;
    border-radius:2px;
    /* Prevent highlight colour when element is tapped */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* Smooth fonts */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Shutter In Horizontal ,from : http://ianlunn.github.io/Hover/ */
 .hvr-shutter-in-horizontal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
	/* 在鼠标悬浮时为：蓝色 */
    background: #2098D1;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}
.hvr-shutter-in-horizontal:before {
    content:"";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	/* 在默认情况下为：灰褐色 */
    background: #4d4d4d;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.hvr-shutter-in-horizontal:hover, .hvr-shutter-in-horizontal:focus, .hvr-shutter-in-horizontal:active {
    color: white;
}
.hvr-shutter-in-horizontal:hover:before, .hvr-shutter-in-horizontal:focus:before, .hvr-shutter-in-horizontal:active:before {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
}
/* 展开全文按钮》 */
本文作者： 荷塘月色
发布时间： 2019-11-10
最后更新： 2023-06-05
本文标题： hexo+yilia修改代码块等样式
本文链接： https://yansheng836.bitbucket.io/article/c344994.html
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！
知识共享许可协议
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码
Powered By Valine
v1.5.2