槐序二三煊

神代綺凜式魔改出现的相关问题解决附魔改教程
Head Pic ：【セイバー】「森♂之妖精」/「Magicians」的插画 效果见本站主要样式及大佬博...
扫描右侧二维码阅读全文
16
2019/04

神代綺凜式魔改出现的相关问题解决附魔改教程

  1.  首页
  2. 正文  
    3. 分享到：

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

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

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

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

效果见本站主要样式及大佬博客

神代綺凜の萌化小基地

MOE IS JUSTICE ✟ TECHNOLOGY IS POWER
萌は正義なのです ✟ テクノロジーがあれば何でもできるです

壹、魔改教程

一、下载样式文件

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

注意本站的文件可能不是最新的.
大佬博客貌似配置权限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;
}

叁


欢迎有提出任何问题。

版权声明：本文为原创文章，版权 槐序二三煊 归所有。

本文链接：https://www.sukeycz.com/course/mod-jk

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

最后修改：2020 年 04 月 23 日 07 : 14 PM
© 著作权归作者所有
如果你觉得有用，可以赞赏

发表评论

36 条评论

  1. DylanLi     Windows 10 /    Google Chrome

    请问下handsome6.0没有handsome.js文件，如何修改目录

    回复
    1. 槐序二三煊     MacOS /    Google Chrome
      @DylanLi

      让我来研究下
      回复
  2. yuuxeun     Windows 10 /    Google Chrome

    二那个下图是不是挂了
    回复
    1. 槐序二三煊     MacOS /    Google Chrome
      @yuuxeun

      图片已修复，更新域名的时候疏忽了，抱歉。
      回复
  3. yuuxeun     Windows 10 /    Google Chrome

    请问第二点的位置在哪里呀handsome6.0版本好像不是行数左右 html优化办法没效果
    回复
    1. 槐序二三煊     MacOS /    Google Chrome
      @yuuxeun

      会在近期更新6.0版本的教程
      回复
  4. young     Windows 10 /    Google Chrome

    你好博主，评论区的系统和浏览器标识是哪个插件呢
    回复
    1. 槐序二三煊     MacOS /    Google Chrome
      @young

      抱歉这么久没回复，教程：https://www.zrahh.com/archives/298.html
      回复
  5. Graue Neko     Windows 10 /    Google Chrome

    请问文章开头的几种不同样式的block是怎样加入的~
    还有文章开头的“这是一篇xxx天前的文章”
    是使用插件还是手动实现的呢？
    回复
    1. 槐序二三煊     Windows 7 /    Google Chrome
      @Graue Neko

      是Handsome自带的，在文章编辑器的末尾有文章过时提醒。
      回复
  6. 肖     Windows 10 /    QQ浏览器

    当一个 大头图 的文章置顶 下面有两个小头图的文章 能并排显示 但是 中间没有隔开 怎么办
    回复
  7. 阿龙     Android Oreo /    FireFox

    觉得非常不错。
    回复
  8. 热心网友     Windows 10 /    QQ浏览器

    那个 第六点 六、小头图的顶置文章在小屏状态下，图片下方有一条白边
    按照这个添加了css以后 小头图置顶文章 小屏幕状态下 图片下面还是有白边
    回复
  9. 热心市民     Windows 10 /    QQ浏览器

    请问小板样式，不能并排吗。神代的首页可以小板4个
    回复
    1. 槐序二三煊     Windows 7 /    Google Chrome
      @热心市民

      可以。都置顶，选择小头图。
      回复
  10. abc     Windows 10 /    Google Chrome

    二、主页面无法点击图片进入文章
    没有图片显示。
    回复
    1. 热心网友     Windows 10 /    QQ浏览器
      @abc

      我也想改这个问题 上面描述不清楚 没有图片显示 不知道改哪里
      回复
      1. 槐序二三煊     Windows 7 /    Google Chrome
        @热心网友

        不好意思，学业繁忙，已修改。
        回复
  11. aa     Windows 10 /    Google Chrome

    右侧栏按照你的代码改了还是会隐藏呀
    回复
    1. 槐序二三煊     Windows 7 /    Google Chrome
      @aa

      你应该是设置里隐藏了右侧边栏整体
      回复
  12. 九七     Windows 10 /    Google Chrome

    大佬 你这个右侧边栏 怎么全部隐藏阿

    回复
    1. 槐序二三煊     Windows 7 /    Google Chrome
      @九七

      Handsome自带外观里-页面元素设置控制-右侧边栏元素控制-【右侧边栏整体】不显示
      回复
  13. 皮皮凛     Windows 10 /    Google Chrome

    原来还有教程呐。当时我f12对比他的站加载的资源、翻网页源码、CSS样式差异，最后才魔改成功，折腾了老半天。
    回复
    1. 槐序二三煊     Windows 7 /    Google Chrome
      @皮皮凛

      OωO同道中人，我更多的是参照别人的教程。
      回复
  14. Cai     Windows 10 /    Google Chrome

    打赏页面有点问题，看下怎么修改。
    回复
    1. Cai     Windows 10 /    Google Chrome
      @Cai

      补充下，貌似是浏览器的问题，使用 Chrome 就有问题，用 Edge 却没有，其它的没试。
      回复
      1. 槐序二三煊     Windows 7 /    Google Chrome
        @Cai

        打赏的随意了哈哈→_→
        回复
  15. Cai     Windows 10 /    Google Chrome

    不错的文章，可以转载么？
    回复
    1. 槐序二三煊     MacOS /    Google Chrome
      @Cai

      转载时须注明出处⌇●﹏●⌇
      回复
  16. 较痩的熊猫     MacOS /    Google Chrome

    不好意思，我也不知道怎么就刷屏了，还删不了，我其实是打算说“主页面无法点击图片进入文章”的解决办法不恰当，正确办法在我发的图片里
    回复
    1. 槐序二三煊     MacOS /    Google Chrome
      @较痩的熊猫

      没事的，我的评论出现了点问题。
      你的方法可行的话，近期我会放上去。
      回复
      1. 较痩的熊猫     MacOS /    Google Chrome
        @槐序二三煊

        可行的，就将另外一个评论url 里图片标黄的 a 标签加上去就好，相关的样式已经在 handsome.css 里有了
        回复
  17. 较痩的熊猫     MacOS /    Google Chrome

    为啥评论不了？
    回复
  18. ThinPanda     MacOS /    Google Chrome

    https://ws3.sinaimg.cn/large/005BYqpgly1g3n3bdphk4j311i07w3zp.jpg?referrer=https://cdn.sinaimg.cn.52ecy.cn
    回复
  19. SkyeWine     Android Oreo /    Google Chrome

    确定是在16行吗。。。。
    好像是在165行
    而且替换第二个链接没用手机端和电脑端背景一致。。。
    回复
    1. 槐序二三煊     MacOS /    Google Chrome
      @SkyeWine

      Get It.
      不知道你是怎么替换的，刷新浏览器缓存试试。
      回复