-Arek- – 散装学术

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，导致代码块的滚动条显示错误。
//修改/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;*/}

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">&nbsp;' . $content . '&nbsp;</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">&nbsp;' . $content . '&nbsp;</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

让我康康！

Wordpress 5.7 更新了 wp-separator ，还挺难看的。得把它改回去，毕竟本博客太多 wp-separator 了。~~不过值得庆祝的是，5.7版本终于修复了Code Block因代码行数太多而导致覆盖其他block的bug。~~

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改为其他数值，以使用最新的样式表。