本文基于 Handsome v5.2.0 Pro 撰写

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

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

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

魔改步骤

放置样式

将下载的自定义样式文件放在 /usr/themes/handsome/assets/css，命名为 handsome.css。

由于设置了防盗链，请复制粘贴访问。

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

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

放置脚本

将下载的自定义脚本文件放在 /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; 之间的空行。
这个琢磨了很久，没想到居然只是因为一个空行。

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

打开 /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