hexo+yilia修改代码块等样式

文章目录

说明
文中超链接样式
行内代码块样式
代码块主要样式文件
- 代码块简单设置
- - 1.修改代码块的样式
  - 2.代码块行号显示错乱
  - 3.重点调整
文章内的超链接和引用块超出页面的问题
左侧边栏的菜单
主页‘展开全文’按钮样式
- 1.添加class
- 2.修改样式

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

<!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>

说明

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

文中超链接样式

默认：

a {background: 0 0;text-decoration: none;color: #08c;
}

修改（添加内容）后：

/* 文章中的超链接,鼠标悬浮特效 */
.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

/* 文章中的超链接,鼠标悬浮特效*/
.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，原来只是文章中文的超链接，现在改为右边栏都进行设置。（可能会出现很多负面影响，请自行决定是否更改）。

行内代码块样式

默认：

.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代码块样式：主要是调整颜色为红色

.markdown_views code {color: #c7254e;background-color: #f9f2f4;border-radius: -9px;
}

修改后：

/* 行内代码块``的样式，参考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 */
}

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

/* 标题中的代码块样式 */
.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)修改代码背景色，
搜索 .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进行代码高亮的教程）。

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

/* 代码块样式之评论：黄色 */
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太长会撑开页面

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

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

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

具体如下：

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

左侧边栏的菜单

导航超链接样式：

/* 这个字体不错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，找到如下内容

      <% 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

      <% 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

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

修改为：

/* 《展开全文按钮 */.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);
}
/* 展开全文按钮》 */

文章首发于：hexo+yilia修改代码块等样式