本文基于Handsome v5.2.0 Pro撰写

  • handsome.css版本 v1.6.4
  • handsome.js版本 v1.6.0
  • github.md.mod.css版本 v1.4.0

翻Handsome说明书的时候,偶然看到了这篇教程。
「神代綺凜式魔改出现的相关问题解决附魔改教程」
就觉得这个好棒,于是乎就尝试魔改一下。
过程中遇到几个坑,所以在这里完整记录一下,避免自己以后忘记。

最终效果参考,也就是魔改作者大佬的博客。
「神代綺凜の随波逐流」

魔改步骤

放置样式

将下载的自定义css文件放在/usr/themes/handsome/assets/css,文件名为handsome.css

由于设置了防盗链,请自行访问。

1
https://moe.best/usr/themes/handsome/assets/css/handsome.css?v=1.6.4

撰写教程时的备份,可能不是最新的。
神代綺凜式魔改备份.zip

放置脚本

将下载的自定义js文件放在/usr/themes/handsome/assets/js,文件名为handsome.js

由于设置了防盗链,请自行访问。

1
https://moe.best/usr/themes/handsome/assets/js/handsome.js?v=1.6.0

撰写教程时的备份,可能不是最新的。
神代綺凜式魔改备份.zip

载入样式

打开/usr/themes/handsome/component/header.php,找到注释
在以下位置增加

1
<link rel="stylesheet" href="css/handsome.css?v=1.6.4" type="text/css" />

载入脚本

打开/usr/themes/handsome/component/footer.php,找到注释
在以下位置增加

1
<script type="text/javascript" src="js/handsome.js?v=1.6.0">script>

打开Handsome主题的设置外观菜单,在开发者设置 > 自定义输出body 尾部的HTML代码增加以下内容。

1
<script type="text/javascript" src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js">script>

PJAX > PJAX回调函数增加以下内容。

1
needpjax();

关闭主题盒子模型

打开Handsome主题的设置外观菜单,在外观设置 > 外观设置开关找到盒子模型,取消勾选该项。

增加背景图嵌入点

打开/usr/themes/handsome/component/headnav.php,在第二行增加

设置背景图

打开/usr/themes/handsome/assets/css/handsome.css,在16行搜索img/bg
bg1.jpg为PC页面背景图。
bg2.jpg为手机页面背景图。
替换为想设置背景图的路径即可。

注明魔改主题的作者信息

打开Handsome主题的设置外观菜单,在开发者设置 > 博客底部右侧信息增加以下内容。

1
Theme modified by <a href="https://moe.best" target="_blank">Jindai Kirina> | 

魔改成功

至此已成功加载魔改,之后的内容并非必须要做。
如果出现相关问题,可参照下方内容。

小问题

右侧边栏不透明

打开/usr/themes/handsome/component/sidebar.php,找到

1
<aside class="asideBar col w-md bg-white-only b-l bg-auto no-border-xs" role="complementary">

修改为

1
<aside class="asideBar col w-md bg-white-only b-l no-border-xs" role="complementary">

文章无法点击图片进入

打开/usr/themes/handsome/libs/Content.php,找到注释
在下方增加一行

1
<a href="{$parameterArray['linkUrl']}" class="ahover">a>

主页两篇文章均为小头图时,仍然无法并行显示

打开/usr/themes/handsome/libs/Content.php,找到注释
删除与其下方EOF;之间的空行。
*这个弄了很久,没想到居然是因为一个空行。 ::aru:blood2:: *

在文章页面向下滚动时,目录会被隐藏的问题

打开/usr/themes/handsome/assets/js/handsome.js,搜索#sidebar
var a=$("#sidebar").children();修改为var a=$("#sidebar").find("section");

小头图的顶置文章在小屏状态下,图片下方有一条白边

打开Handsome主题的设置外观菜单,在开发者设置 > 自定义 CSS增加以下内容。

1
2
3
.panel-small>.post-meta {
padding-bottom: 0 !important;
}

在阅读模式下收缩框的内容显示不正常

打开Handsome主题的设置外观菜单,在开发者设置 > 自定义 CSS增加以下内容。

1
2
3
.panel-body.collapse:not([aria-expanded=true]) {
display: none !important;
}

「番外篇」Markdown与代码块样式魔改

「Github Markdown Style for Handsome」参考这篇文章。
最终效果可参照「神代綺凜の随波逐流」

放置样式

获取包含代码块的样式文件,放置于/usr/themes/handsome/assets/css,文件名为github.md.mod.css
代码块效果需要配合之前的handsome.js才能正常使用。

由于设置了防盗链,请自行访问。

1
https://moe.best/usr/themes/handsome/assets/css/github.md.mod.css?v=1.4.0

撰写教程时的备份,可能不是最新的。
神代綺凜式魔改备份.zip

载入样式

打开/usr/themes/handsome/component/header.php,找到注释
在以下位置增加

1
<link rel="stylesheet" href="css/github.md.mod.css?v=1.4.0" type="text/css" />

打开/usr/themes/handsome目录下的post.phppage.php。找到

1
2
<div id="post-content" class="wrapper-lg">
<div class="entry-content l-h-2x">

修改为

1
2
<div class="wrapper-lg">
<div class="markdown-body entry-content l-h-2x">

打开/usr/themes/handsome/libs/Content.php。找到

1
<div id="morphing-content" class="hidden read_mode_article">

修改为

1
<div id="morphing-content" class="markdown-body hidden read_mode_article">

打开/usr/themes/handsome/assets/js/core.min.js
将所有#post-content替换为.markdown-body

至此完成魔改。

在评论中使用样式

打开/usr/themes/handsome/component/comments.php。找到

1
<span class="comment-content-true">

修改为

1
<span class="markdown-body comment-content-true">

打开Handsome主题的设置外观菜单,在开发者设置 > 自定义 CSS增加以下内容。

1
2
3
.markdown-body.comment-content-true {
line-height: 1.5 !important;
}

即可在评论中也使用这个样式。


涉及文件列表:
/usr/themes/handsome/assets/css/handsome.css
/usr/themes/handsome/assets/js/handsome.js
/usr/themes/handsome/component/header.php
/usr/themes/handsome/component/footer.php
/usr/themes/handsome/component/headnav.php
/usr/themes/handsome/component/sidebar.php
/usr/themes/handsome/libs/Content.php

/usr/themes/handsome/assets/css/github.md.mod.css
/usr/themes/handsome/post.php
/usr/themes/handsome/page.php
/usr/themes/handsome/assets/js/core.min.js
/usr/themes/handsome/component/comments.php