Sanakey

神代綺凜式魔改折腾记录
本文转载修改于神代綺凜式魔改出现的相关问题解决附魔改教程。欢迎有提出任何问题,若发现错误请及时联系我。效果见本站主...
扫描右侧二维码阅读全文
29
2019/10

神代綺凜式魔改折腾记录

本人已基于本文写了魔改插件,建议前往食用

本文转载修改于神代綺凜式魔改出现的相关问题解决附魔改教程

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

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

欢迎有提出任何问题,若发现错误请及时联系我。
效果见本站主要样式及大佬博客

魔改教程

下载样式文件

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

注意本站的文件可能不是最新的,建议前往原作者处下载。

CSS下载:

导入样式文件

1、打开 /usr/themes/handsome/component/header.php
2、找到 <!--主题组件css文件加载-->,在上面添加一行<link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/handsome.css?v=1.6.4" type="text/css">,修改后的代码为

    <!-- 本地css静态资源 -->
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/function.min.css?v=<?php echo Handsome::$version.Handsome_Config::$versionTag ?>" type="text/css" />
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/handsome.min.css?v=<?php echo Handsome::$version.Handsome_Config::$versionTag ?>" type="text/css" />
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/handsome.css?v=1.6.4" type="text/css">
    <!--主题组件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、替换为想设置背景图的路径即可。

实现首页右边栏自动隐藏,网页标题自动变化效果

将这个文件放到typecho的如下路径中:/usr/themes/handsome/assets/js/handsome.js,注意文件名需要是handsome.js
然后打开/usr/themes/handsome/component/footer.php,搜索<!--主题核心js-->,在后面添加一行<script type="text/javascript" src="<?php echo STATIC_PATH; ?>js/handsome.js"></script>,下面是添加完后的代码

<!--主题核心js-->
    <script src="<?php echo STATIC_PATH ?>js/function.min.js?v=<?php echo Handsome::$version.Handsome_Config::$versionTag
    ?>"></script>
    <script src="<?php echo STATIC_PATH ?>js/core.min.js?v=<?php echo Handsome::$version.Handsome_Config::$versionTag
?>"></script>
    <script type="text/javascript" src="<?php echo STATIC_PATH; ?>js/handsome.js"></script>

文章置顶

文章置顶功能使用了Sticky插件
安装插件后在后台管理 -> 控制台 -> 插件开启,输入想要置顶的文章cid。多篇文章可以用,隔开

如果想得到和神代綺凜大佬一样的置顶效果,只需要把置顶标题的 html替换为以下代码

<span class='sticky label text-base bg-danger'>置顶</span>

注明魔改主题的作者信息

打开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即可解决.

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

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">
删掉bg-auto,变为
<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");

本站的js文件已经修复该问题

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

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

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

本站的css文件已经修复该问题

致谢

感谢神代綺凜大佬的主题与槐序二三煊大佬写的修改教程

Last modification:November 3rd, 2019 at 04:26 pm
如果觉得我的文章对你有用,请随意赞赏

5 comments

  1. lsaiah     Windows 10 /    Google Chrome

    大佬,CSS下载地址 403 Forbidden,可以更新下吗

    1. Sanakey     Windows 10 /    Google Chrome
      @lsaiah

      这里还是再回复一下,建议去食用插件,插件里有源代码。

      1. lsaiah.cn     Windows 7 /    Google Chrome
        @Sanakey

        大佬 魔改插件和魔改教程是一样的效果吗?还是使用魔改插件后还要按照教程再改一遍?
        魔改插件和魔改教程是二选一还是先一后二?

        1. Sanakey     Windows 10 /    Google Chrome
          @lsaiah.cn

          魔改插件是基于这个教程做的,所以现在不建议使用这篇教程了,插件已经完全整合了这个教程里的魔改过程,直接使用插件就行。

          1. lsaiah.cn     Windows 7 /    Google Chrome
            @Sanakey

            蟹蟹|´・ω・)ノ

Leave a Comment

kotori.png