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

本文基于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

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

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

在阅读模式下收缩框的内容显示不正常

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

.panel-body.collapse:not([aria-expanded=true]) {
    display: none !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/libs/Content.php。找到

<div id="morphing-content" class="hidden read_mode_article">

修改为

<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。找到

<span class="comment-content-true">

修改为

<span class="markdown-body comment-content-true">

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

.markdown-body.comment-content-true {
    line-height: 1.42857143 !important;
}

即可在评论中也使用这个样式。


Last modification:August 18th, 2019 at 08:21 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment

29 comments

  1. marTixx

    感谢博主!不过这个markdown可以调大字体吗,感觉字有点小影响阅读

    1. Android
      @marTixx

      可以修改github.md.mod.css,找到以下选择器。

      .markdown-body,.markdown-body blockquote {
          /*省略部分代码*/
          font-size: 14px;
          /*省略部分代码*/
      }

      编辑font-size的值就可以了,目前是14像素,数字越大字体越大。

      1. marTixx
        @Android

        改了好像没有用额

        1. marTixx
          @marTixx

          博主,改了'font-size',但是没有用,是不是跟原来的冲突了?

          1. Android
            @marTixx

            可能是其他样式在起作用,用审核元素可以看出来。
            可以发一下博客地址,我帮你看下。

            1. marTixx
              @Android
              该评论仅登录用户及评论双方可见
              1. marTixx
                @marTixx

                感谢博主,似乎解决了,昨天还是小字今天就变大了,可能是浏览器缓存问题⌇●﹏●⌇

      2. marTixx
        @Android

        谢谢OωO

  2. Haleclipse

    博主目前这个代码块样式也还是用的Code Prettify吗还是魔改js里的?大佬有时间的话帮我看看我的小破站,footer那里被我搞漂移了不知道是哪里弄错了

    1. Android
      @Haleclipse

      我现在代码块样式是用的神代綺凜大佬的,没有用Code Prettify。

      footer (评论?) 可能是编辑post.php导致的问题,可以检查一下idpost-panel的标签的范围。
      如果是5.2.0版本,代码大约是在第81行。
      这个div标签应当将评论包含起来,否则会导致样式选择不到评论的标签。

      刚刚码完字发现好像已经解决了? XD

      更新:好像又变回去了……

      再更新:好像变成重新安装了,害怕.jpg。

  3. 爱与正义的彩虹魔法少女

    有个问题,感觉綺凜大佬点击文章是先返回顶部再加载的。按照这个教程魔改貌似是边返回顶部边加载,不知道是不是我的错觉。

    1. Android
      @爱与正义的彩虹魔法少女

      这个应该是Handsome自带的PJAX功能,你可以在设置外观里的PJAX找到相关设置。

  4. Qing

    支持支持

  5. 九七

    为什么我修改完,没有背景图片?

    1. Android
      @九七

      得自己改CSS样式文件里的图片路径 (看起来已经解决了)。

      1. 九七
        @Android

        找到办法了。
        右侧边栏元素控制
        [右侧边栏整体]不显示

      2. 九七
        @Android

        第一次搞网站。看着都懵逼,自己删除好几次网站目录 才成功得。

        CSS样式 也找了半天哈哈。

      3. 九七
        @Android

        还有个问题就是 右侧边栏 怎么全部隐藏?

  6. 博主牛逼

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

    1. Android
      @博主牛逼

      之前是使用的Code Prettify插件。

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

      1. 博主牛逼
        @Android

        感谢博主 太牛逼了

        1. Android
          @博主牛逼

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

  7. newcoderlife

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

    1. Android
  8. dayday

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

    1. Android
      @dayday

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

    2. Android
      @dayday

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

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

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

  9. qihaimi

    nb!

  10. Macye

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