Head Pic ：【セイバー】「森♂之妖精」/「Magicians」的插画

[noti本主题魔改需要替换文件，并且会修改原主题代码，请要魔改的小伙伴备份好自己的样式文件！[/notice]

本文基于Handsome v5.1.1 Pro撰写，自定义CSS版本 v1.6.4，自定义JS版本 v1.6.0

欢迎有提出任何问题,若发现错误请及时联系我。

效果见本站主要样式及大佬博客
[post url="https://moe.best/" title="神代綺凜の萌化小基地" intro="MOE IS JUSTICE ✟ TECHNOLOGY IS POWER<br/>萌は正義なのです ✟ テクノロジーがあれば何でもできるです" cover="https://moe.best/usr/img/avatar1.png" /]

壹、魔改教程

原文链接：handsome主题魔改教程

一、下载样式文件

下载css至将文件放在/usr/themes/handsome/assets/css中,文件名为handsome.css

注意本站的文件可能不是最新的.<br/>大佬博客貌似配置权限403.


CSS下载：大佬直达 | 本站下载

二、导入样式文件

1、打开 /usr/themes/handsome/component/header.php
2、在48行下多加一行

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

然后保存。

三、关闭主题盒子模型

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

四、增加背景图嵌入点

1、打开 /usr/themes/handsome/component/headnav.php
2、在第一行后加一行 <div id="bg"></div>
3、保存。

五、魔改背景图片设置

1、打开/usr/themes/handsome/assets/css/handsome.css，在16行搜索img/bg。

bg1.jpg为PC页面背景图。
bg2.jpg为手机页面背景图。

2、替换为想设置背景图的路径即可。

注明魔改主题的作者信息

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

Theme modified by <a href="https://moe.best" target="_blank">Jindai Kirin</a>&nbsp;|&nbsp;

六、大功告成

尽情享用吧！

贰、FAQ常见问题

一、文章出现白色背景

1、到文件/usr/themes/handsome/assets/css/handsome.min.css,
2、CTRL+F搜索entry-content{background:#fff}#post-content,
3、修改其中的#fff为#fff0即可解决.

二、主页面无法点击图片进入文章

(一)简单粗暴方法

1、进入网站根目录下的usr/themes/handsome/libs/Content.php文件
如

2、在大约883行、885行分别找到“首页文章”和“头图部分”。
按如下图所示的三个

标签中加入如下代码。

onclick="location.href='{$parameterArray['linkUrl']}'"

3、清除缓存刷新页面即可解决。

(二)HTML优化方法

1、打开/usr/themes/handsome/libs/Content.php，找到注释<!--text-muted-->。
2、在下方增加一行
<a href="{$parameterArray['linkUrl']}" class="ahover"></a>

三、右侧边栏不透明

1、打开/usr/themes/handsome/component/sidebar.php，
2、找到
<aside class="asideBar col w-md bg-white-only b-l bg-auto no-border-xs" role="complementary">
替换为
<aside class="asideBar col w-md bg-white-only b-l no-border-xs" role="complementary">

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

1、打开/usr/themes/handsome/libs/Content.php，找到注释<!--panel/panel-small-->。
2、删除<!--panel/panel-small-->与其下方EOF;之间的空行。

这个弄了很久，没想到居然是因为一个空行。

五、解决在文章页面向下滚动，目录会被隐藏的问题

1、打开/usr/themes/handsome/assets/js/handsome.js，搜索#sidebar。
2、将var a=$("#sidebar").children();替换为var a=$("#sidebar").find("section");。

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

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

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

叁

感谢Android:神代綺凜式魔改折腾记录[/scode]

欢迎有提出任何问题。

版权属于：张煊

转载时须注明出处及本声明