Arke主题Geek化。
# 序
我于2021年7月7日便有了更新此贴的想法，距离本贴创建之日已有些时间。正如博客首页所说，Arek主题基于 Arke by DannyCooper，模仿 Geek by 三斤，临摹 恶魔萝莉控 的代码实现。本贴将详细讲述将Geek与Arke主题糅合在一团的过程。
# 添加像素风格字体
不同于博客正文的宋体字符，像素风格字体显得非常可爱，但有时会影响阅读，因此不是所有文章都适合像素风字体。本博客采用的像素风格字体名为Zpix（最像素）。在 header.php 内的 <head> 部分添加 @font-face 规则。
@font-face {
font-family: "Zpix";
src: url("zpix.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display： swap;
}
@font-face {
font-family: "SimSun";
src: url("SimSun.ttf") format("ttf");
font-weight: normal;
}为使移动端浏览时全显示为像素风字体而电脑端浏览时仅在主页、栏目和分类页面显示像素风字体，需编辑 style.css 及 pcstyle.css 文件。
/* style.css */
body {
font-family: 'Zpix', serif;
...
}
/* pcstyle.css */
.single-post .entry-content{
font-family: SimSun;
}# 修改代码区块样式
这是修改后代码块的样式。修改后的代码区块样式相比于原来的样式多了代码高亮功能，且滚动条和窗体相对于原样美观许多。此三种功能涉及到 style.css 与 header.php 文件的编辑。
一、实现代码高亮
Arek采用highlight.js高亮代码块里的关键词。highlight.js支持196种语言及242种颜色风格，能够自动探测代码块的编程语言类型并进行代码关键词高亮。在highlight.js官方网站上贴出了多种情形下的使用方法，用户可以根据自己的实际情况采用所需方法。
打开 header.php 文件，在 <head> 内引用highlight.pack.js并设置其在页面打开时执行高亮。
<script src="highlight.pack.js"> //此处需要换成自己highlight.pack.js的?
<script >hljs.initHighlightingOnLoad();</script> //在网页加载时执行highlight.js将所有代码块高亮二、美化窗体
本博客的highlight.js采用monokai-sublime主题，该主题不带类似于SSH的边框和按钮，因此需要额外将以下代码插入到 style.css 文件以加入边框样式。
//在插入代码之前使用注释符把wordpress自带的pre样式注释了
//插入如下代码
pre{
position: relative;
background: #21252b;
border-radius: 5px;
line-height: 1.4;
max-width: 700px;
max-height: 500px;
margin: 0 auto;
margin-bottom: 1.6em;
overflow: auto;
text-shadow: none;
color: #000;
padding-top: 30px;
padding-left: 6px;
padding-right: 2px;
padding-bottom: 4px;
box-shadow: 0 10px 30px 0px rgba(0,0,0,0.4);
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
}
pre:before{
content: ' ';
position: absolute;
border-radius: 50%;
background: #fc625d;
width: 12px;
height: 12px;
left: 12px;
margin-top: -18px;
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
z-index: 2;
}打开 header.php 文件，在 <head> 引用monokai-sublime.css以及font-awesome.min.css，后者提供窗体外围的红黄绿按钮图标。
<link href="https://cdn.jsdelivr.net/gh/inGeoscience/libGeek/highlight/styles/monokai-sublime.css" rel="stylesheet">
<link rel="stylesheet" href="font-awesome.min.css">三、美化滚动条
美化了窗体后，原始滚动条显得格格不入，因此一并进行美化。将以下代码插入到 style.css 文件内。
/* Pre的滚动条 */
pre ::-webkit-scrollbar {
width: 6px;
height: 6px;
}
pre ::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
pre ::-webkit-scrollbar-thumb {
background: #e1e1e1;
border: 0px none #fff;
border-radius: 50px;
}
pre ::-webkit-scrollbar-track {
background: #666;
border: 0px none #fff;
border-radius: 50px;
}
pre ::-webkit-scrollbar-corner {
background: transparent;
}四、注意事项
//由于Wordpress自动更新后覆盖wp-include，导致代码块的滚动条显示错误。以及解决编辑器内由于max-height引发的代码块显示不全的问题
//修改/wp-includes/css/dist/block-library/style.min.css 里的
.wp-block-code code{white-space:pre-wrap;max-height:360px;overflow-wrap:break-word;}
为以下代码:
.wp-block-code code{/*white-space:pre-wrap;*/max-height:360px;/*overflow-wrap:break-word;*/}/* 修复editor里的pre*/ :where(.editor-styles-wrapper) code { max-height: unset !important; }2023年1月13日编辑：解决移动端小屏幕代码块内文字及代码自动换行的问题。
@media screen and (max-width: 680px) {
pre {
word-break: initial;
word-wrap: initial
}
}# 增加小代码块
在外观上，它比改变文字颜色更醒目。
在功能上，它能使用户浏览一串文字时区分 功能点 和描述文字。
小代码块通过Wordpress的Shortcode（短代码）实现，编辑主题目录下的 functions.php 文件，于最底部插入以下代码：
/* Little Code Block */
function littleCode_func($atts, $content, $tag){
return '<span class="littleCode" style="background-color:#28559c;border-radius: 3px; padding:0.2em 0.2em;color:#fff;font-family:monospace;font-size:12px;margin-right:0.2em;margin-left:0.1em"> ' . $content . ' </span>';
}
add_shortcode('littleCode', 'littleCode_func');在文章编辑时，于文字两侧加上 [littleCode] 以及 [/littleCode] 便能实现 此效果
20220203更新
使用线性渐变更好看。
20230521更新
在使用短代码时支持传入参数以决定小代码块的颜色
简单学习了 add_shortcode() 的用法，尝试写了一个传入多个参数的小代码块函数。
function littleCode_func($atts, $content, $tag){
return '<span class="pyCode" style="background-image: linear-gradient(to right, ' . $atts["lcolor1"] . ', ' . $atts["lcolor2"] . ');border-radius: 3px; padding:0.2em 0.2em;color:' . $atts["fontcolor"] . ';font-family:SFMono-Regular;font-size:12px;margin-right:0.2em;margin-left:0.1em"> ' . $content . ' </span>';
}
add_shortcode('littleCode', 'littleCode_func');在文章编辑时，于文字两侧加上 [littleCode lcolor1=”#0a4ab8″ lcolor2=”#b20ab8″ fontcolor=”#FFFFFF”] 以及 [/littleCode] 便能实现 此效果
# 放置Live2D看板娘
我真不知道什么是二次元。考研前的两个月心血来潮想在博客里添加一个Live2D看板娘，现在该博客已经取消了看板娘，为了让那股冲动留下痕迹，故在此处张贴Wordpress放置Live2D看板娘的方法。
Live2D-Models ← Live2D模型的Github? Live2DWidget ← Live2DWidget的Github?
打开 header.php 文件，在 <head> 部分引用L2Dwidget.min.js，再使它在页面打开时初始化运行。
//引用L2Dwidget.min.js
<script src="https://cdn.jsdelivr.net/gh/mumudadi/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
//在"model"字段替换模型?
"model": {"jsonPath":"https://cdn.jsdelivr.net/gh/imuncle/live2d/model/himeko/model.json", "scale": 1, "hHeadPos":0.5, "vHeadPos":0.618 },
"display": { "position": "right", "width": 150, "height": 300, "hOffset": 0, "vOffset": -70 },
"mobile": { "show": true, "scale": 0.5 },
"react": { "opacityDefault": 1, "opacityOnHover": 0.2 }
});
</script># 实现背景模糊效果
本博客已取消背景图模糊效果，因为浏览器渲染模糊效果后会有点卡顿，破坏浏览体验。
在 style.css 的背景图样式 #emotional_img 下添加模糊效果代码。
//这种方法不能使上下两边界模糊
filter: blur(7px);
//修复上下两边姐边界模糊的问题
filter: blur(7px);
backdrop-filter: blur(1px);# 实现目录下显示帖子简介
看到这个更改你可能会觉得离谱，这应该是Wordpress主题自带的功能。但Arke主题过于简单就是没有这个功能，完整的帖子将会在目录页面列出，导致目录没眼看，太长了。这里需要安装 Advanced Excerpt 插件，并进行玄学配置。
Excerpt Length: 1 Character
Ellipsis: <hr class=”wp-block-separator”> //横线。
Finish: Word
# 整合页面并设置样式
将页面的 header 和 site-content 用一个 div 集成在一起,方便阴影和白色幕布背景的添加。
<!-- HTML -->
<body>
<div id="integrity">
...
</div>
</body>整合在一起后对该部分进行样式设置。
/* CSS */
#integrity{
padding-left: 96px;
padding-right: 96px;
margin-left: -96px;
margin-right: -96px;
border-radius: 25px 25px 25px 25px;
margin-bottom: 30px;
transition: 0.3s;
-webkit-transition: .3s;
-moz-transition: .3s;
padding-bottom: 40px;
margin-top: 20px;
}# 张贴背景图并设置hover选择器
该博客几乎每一幅页面都采用不同二次元图作为背景，得益于博主浏览过很多二次元图，以及帖子更新得慢。为了使得每幅页面显示不同背景，需要安装 Simple CSS 插件。
# 还原wp-separator
2023年1月9日编辑：并没有修复上述bug，反而新增了一个有两条分割线的bug。该bug由WordPress自动更新重写 style.min.css 文件导致。
在修复该bug之前，需要指出的是，在使用WordPress编辑器新增分割线时实际上是为HTML添加 <hr> 元素，而 style.min.css 中的相关代码只对该元素进行修饰。CSS文件中显示，该元素四周环绕边界，而左右两侧边界不显示，因此看上去像两条分割线。本主题自带对 <hr> 元素的修饰，因此将CSS文件中对分割线的描述改成与对 <hr> 元素的描述一致即可。
/* style.min.css */
.wp-block-separator{border:0;background-color:#ccc}# 美化blockquote区块
无论是Arke主题还是 Wordpress 自带的主题，其 blockquote 外观都一言难尽。本博客使用Voice Blog的blockquote样式并进行简单调整。 在主题文件夹下的 style.css 种添加blockquote的样式代码。
blockquote {
margin: 0 1.5em;
border-left: 0.25em solid #666;
padding: 0 1em;
color: #666;
}# 解决因版本更新出现的换行问题
要进入Arek主题给 style.css 的article加一个 overflow-wrap 属性。
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary,
.sticky {
display: block;
overflow-wrap: break-word;
}# 关闭自动更新
在 wp-config.php 中插入禁止WordPress自动更新代码，同时在 functions.php 中插入禁止插件和主题自动更新代码。
/* wp-config.php */
/* disable auto-update */
define( 'WP_AUTO_UPDATE_CORE', false );
/* functions.php */
/* disable auto-updating*/
add_filter( 'auto_update_plugin', '__return_false' );
add_filter( 'auto_update_theme', '__return_false' );# wpDiscuz
在 Form 里可以将Subscription Bar关闭。此外，还可在此处将评论表格中的必填字段关闭（如邮箱等）以及更改每个选项的显示文字。
# 解决修改style.css无法更新样式的问题
修改主题文件夹内的 style.css 文件后，清除浏览器缓存后发现博客样式依旧为旧版。此时可以去 functions.php 内查看是否有以下代码：
function theme_scripts() {
wp_enqueue_style( 'theme-style', get_stylesheet_uri(), array(), '1' );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}将 wp_enqueue_style() 中的1改为其他数值，以使用最新的样式表。
# 返回当前博客域名
该方法通过短代码实现，编辑主题目录下的 functions.php 文件，于最底部插入以下代码：
需要注意的是，不要在域名前加 https:// 等任何多余字符。/* Local WordPress Site */ function currentSite_func() { return '博客域名，例如abc.def'; } add_shortcode( 'currentSite', 'currentSite_func' );
在之后的内容创作中，编辑链接时借助 [currentSite] 组成博客Permalink，如 [currentSite]/learn_conda 。
# 输入LaTex
根据MathJAX官方文档的指引，在$\text{header.php}$中插入对应代码以实现在博客中使用$L^{A}T_{E}X$。
具体引入方式
在$\text{header.php}$中合适位置插入：
<script>
MathJax = {
options: {
enableMenu: false,
menuOptions: {
settings: {
texHints: true,
semantics: true,
renderer: 'CHTML'
}
}
},
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)'], ['[latex]', '[/latex]']]
},
svg: {
ontCache: 'global'
}
};
</script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"> </script>使用方式
详见此处。
修复移动端公式过长溢出
添加Additional CSS
/* 长公式*/
.long_mathjax {
overflow: auto !important;
text-align: left !important;
white-space: nowrap !important;
}添加Simple CSS
/* long_mathjax滚动条隐藏 美化滚动条
.long_mathjax::-webkit-scrollbar {
display: none
}*/
.long_mathjax::-webkit-scrollbar {
height: .5rem;
width: .5rem
}
.long_mathjax::-webkit-scrollbar-thumb {
background: #9c9c9c;
border-radius: .25rem
}
.long_mathjax::-webkit-scrollbar-track {
background: #e3e3e3
}
.long_mathjax::-webkit-scrollbar-thumb:hover {
background: #6e6e6e
}
.long_mathjax:hover::-webkit-scrollbar-thumb {
}在公式的Paragraph块添加上述Additional CSS Class。如有必要，还需要把该类加给 [latex] 。
# 固定Colums为一行
在主题文件夹下 style.css 文件中添加如下代码：
@media screen and (max-width: 680px) {
.wp-block-columns {
align-items:normal!important;
box-sizing:border-box;
display:-webkit-box!important;
overflow:auto!important;
flex-wrap:nowrap!important;
}
.wp-block-column {
align-content: center!important;
margin-right: 2em !important;
}
}# 消除Columns下面的额外空白
在 style.min.css 文件中进行修改：
# css/dist/block-library/style.min.css 找到
:where(.wp-block-columns){margin-bottom:1.75em}
# 改为0em
:where(.wp-block-columns){margin-bottom:0em}# 两端对齐文本
我就说浏览博客的时候怎么总感觉怪怪的。
在[latex]\text{style.css}[/latex]中新加以下部分：
.entry-content {
text-align: justify;
}# 缩小正文中的图片
比与正文同宽时美观。
添加\(\textit{Additional CSS}\)
.contentPic img, video {
max-width:616px;
height: auto !important;
border-radius:5px;
box-shadow:2px 2px 9px 0px rgba(0,0,0,0.4);
}
.noShadowContentPic img{
max-width:616px;
height: auto !important;
border-radius:5px;
}
@media screen and (max-width: 900px) {
.contentPic img, video {
max-width:90%;
border-radius:5px;
box-shadow:2px 2px 9px 0px rgba(0,0,0,0.4);
}
.noShadowContentPic img, table, video {
max-width:90%;
border-radius:5px;
}
}在主体目录下\(\text{index.php}\)的\(\text{</body>}\)标签之前加入一段更改题注宽度的代码：
<script>
const figureElements = document.querySelectorAll('figure.wp-block-image');
figureElements.forEach(figure => {
const img = figure.querySelector('img');
if (img) {
const imgWidth = img.width;
const figcaption = figure.querySelector('figcaption');
if (figcaption) {
figcaption.style.maxWidth = `666px`;
figcaption.style.margin = 'auto';
}
}
});
</script># 缩小动漫帖正文中的图片
与其他正文不同。
添加\(\textit{Additional CSS}\)
/* 电脑端 Anime 用图 */
.animePic img {
max-width:800px;
height: auto !important;
border-radius:5px;
box-shadow:2px 2px 9px 0px rgba(0,0,0,0.4);
}
/* 限制大小Anime用图 */
.noShadowAnimePic img {
max-width:800px;
height: auto !important;
border-radius:5px;
}
@media screen and (max-width: 900px) {
.animePic img {
max-width:90%;
border-radius:5px;
box-shadow:2px 2px 9px 0px rgba(0,0,0,0.4);
}
.noShadowAnimePic img {
max-width:90%;
border-radius:5px;
}
}# 美化表格
将 WordPress 自带表格更改为三线表。具体补充主题文件夹下的[latex]\textbf{style.css}[/latex]文件：
/* 自定义表格*/
.wp-block-table {
max-width: 666px;
margin: auto;
overflow: auto !important;
text-align: left !important;
white-space: nowrap !important;
}
thead {
border-top: 3px solid;
border-bottom: 2px solid
}
th {
font-family: 'Zpix'
}
table {
border-bottom: 3px solid
}
table>thead {
border-bottom: 2px solid!important
}
table>th,
tabel>td {
text-align: center;
background: transparent;
}
.wp-block-table td,
.wp-block-table th {
padding: 0px;
text-align: center;
border: none
}
.wp-block-table td {
padding-left: 1em;
}
/* 自定义表格美化滚动条，注：两个冒号前不要有空格*/
.wp-block-table::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.wp-block-table::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
.wp-block-table::-webkit-scrollbar-thumb {
background: #9c9c9c;
border: 0px none #fff;
border-radius: 50px;
}
.wp-block-table::-webkit-scrollbar-track {
background: #e3e3e3;
border: 0px none #fff;
border-radius: 50px;
}
.wp-block-table::-webkit-scrollbar-thumb:hover {
background: #6e6e6e
}
.wp-block-table::-webkit-scrollbar-corner {
background: transparent;
}将表格的题注移到表格上边，并修改题注样式
在主题目录下\(\text{index.php}\)的\(\text{</body>}\)标签之前加入一段更改子元素顺序的代码：
<script>
const elements = document.querySelectorAll('figure.wp-block-table');
elements.forEach(element => {
const children = Array.from(element.children);
if (children.length >= 2) {
element.insertBefore(children[1], children[0]);
}
});
</script>增添主题目录下\(\text{style.css}\)文件关于题注样式的代码：
/* 修改题注样式*/
figcaption.wp-element-caption {
font-size: small;
font-weight: bold;
text-align: left;
}