Android

Handsome主题 神代綺凜式魔改折腾记录
翻Handsome说明书的时候,偶然看到了这篇教程。就觉得这个好棒,于是乎就尝试魔改一下。过程中遇到几个坑,所以在...
扫描右侧二维码阅读全文
01
2019/06

Handsome主题 神代綺凜式魔改折腾记录

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

翻Handsome说明书的时候,偶然看到了这篇教程。

就觉得这个好棒,于是乎就尝试魔改一下。
过程中遇到几个坑,所以在这里完整记录一下,避免自己以后忘记。


最终效果参考,也就是魔改作者大佬的博客。


魔改步骤

放置样式

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

来自大佬博客:
由于设置了防盗链,请自行访问。

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

来自本博客:

放置脚本

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

来自大佬博客:
由于设置了防盗链,请自行访问。

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

来自本博客:

载入样式

打开/usr/themes/handsome/component/header.php,找到注释<!--本地css静态资源-->
在以下位置增加

<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-->
在以下位置增加

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

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

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

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

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主题的设置外观菜单,在开发者设置 > 博客底部右侧信息增加以下内容。

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

魔改成功

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


小问题

解决右侧边栏不透明

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

<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">

解决文章无法点击图片进入

打开/usr/themes/handsome/libs/Content.php,找到注释<!--text-muted-->
在下方增加一行

<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增加以下内容。

.panel-small>.post-meta {
    padding-bottom: 0 !important;
}
Last modification:June 7th, 2019 at 02:09 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment

4 comments

  1. dayday

    这个handsome.js文件和clipboard.min.js文件有何作用?

    1. Android
      @dayday

      handsome.js我没有仔细研究过。
      目前知道的作用有:
      · 右侧侧边栏无内容时,自动隐藏。
      · 页面不可见时修改网页标题,可见时再改回去。

      clipboard.min.js是因为handsome.js用到了这个,所以不加上会报错……
      推测是实现代码块中复制代码按钮的,不过我没研究出魔改带的代码块怎么用。

  2. qihaimi

    nb!

  3. Macye

    ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄ 打卡支持