Android

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

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

本文基于Handsome v5.1.1 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

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

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;
}

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

参考这篇文章。
最终效果可参照本文。

放置样式

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

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

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

来自本博客:
可能不是最新的,并且经过修改。

载入样式

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

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

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

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

将其改为

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

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

至此完成魔改。


Last modification:July 8th, 2019 at 02:47 am
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment

11 comments

  1. 博主牛逼

    博主请问代码框是怎么弄的

    1. Android
      @博主牛逼

      之前是使用的Code Prettify插件。

      PS: 填写虚假邮箱是收不到回复提醒的哦。

      1. 博主牛逼
        @Android

        感谢博主 太牛逼了

        1. Android
          @博主牛逼

          (╯‵□′)╯︵┴─┴ 所以说,不要乱填评论信息呀。

  2. newcoderlife

    等我有空了也要把 blog 优化的像你这么美观(

    1. Android
  3. dayday

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

    1. Android
      @dayday

      我搞懂魔改的代码块要怎么配置了,现在可以参照新更新的「番外篇」Markdown与代码块样式魔改部分。

    2. Android
      @dayday

      handsome.js我没有仔细研究过。
      目前知道的作用有:

      • 右侧侧边栏无内容时,自动隐藏。
      • 页面不可见时修改网页标题,可见时再改回去。

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

  4. qihaimi

    nb!

  5. Macye

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