本文基于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，找到注释<!--本地css静态资源-->。
在以下位置增加

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

载入脚本

打开/usr/themes/handsome/component/footer.php，找到注释<!--主题核心js-->。
在以下位置增加

1
<script type="text/javascript" src="<?php echo STATIC_PATH ?>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，在第二行增加<div id="bg"></div>。

设置背景图

打开/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 Kirin</a>&nbsp;|&nbsp;

魔改成功

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

小问题

右侧边栏不透明

打开/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，找到注释<!--text-muted-->。
在下方增加一行

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

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

打开/usr/themes/handsome/libs/Content.php，找到注释<!--panel/panel-small-->。
删除<!--panel/panel-small-->与其下方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，找到注释<!--本地css静态资源-->。
在以下位置增加

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

打开/usr/themes/handsome目录下的post.php与page.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