本文转载修改于神代綺凜式魔改出现的相关问题解决附魔改教程。
欢迎有提出任何问题,若发现错误请及时联系我。
效果见本站主要样式及大佬博客
魔改教程
下载样式文件
下载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。多篇文章可以用,
隔开
<span class='sticky label text-base bg-danger'>置顶</span>
注明魔改主题的作者信息
打开Handsome主题的设置外观菜单,在开发者设置 > 博客底部右侧信息增加以下内容。Theme modified by <a href="https://moe.best" target="_blank">Jindai Kirin</a> |
大功告成
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");
。
六、小头图的顶置文章在小屏状态下,图片下方有一条白边
打开Handsome主题的设置外观菜单,在开发者设置 > 自定义 CSS增加以下内容。
.panel-small>.post-meta {
padding-bottom: 0 !important;
}
致谢
版权属于:Sanakey(特殊声明除外)
本文链接:https://keymoe.com/archives/8/
所有原创文章采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。 您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
大佬,CSS下载地址 403 Forbidden,可以更新下吗
大佬 魔改插件和魔改教程是一样的效果吗?还是使用魔改插件后还要按照教程再改一遍?
魔改插件和魔改教程是二选一还是先一后二?
魔改插件是基于这个教程做的,所以现在不建议使用这篇教程了,插件已经完全整合了这个教程里的魔改过程,直接使用插件就行。
蟹蟹|´・ω・)ノ