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

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

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

魔改整体效果取自神代綺凜的网站

首先,在handsome的后台设置 > 外观设置 > 外观设置开关中关闭盒子模型

添加CSS(实现网站整体效果)

首先下载下面的css文件

将这个文件放到你网站的如下目录中:usr/themes/handsome/assets/css/

然后打开usr/themes/handsome/component/header.php,在53行附近添加一行<link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/handsome.css" type="text/css">

然后打开usr/themes/handsome/component/headnav.php,在第一行后加一行 <div id="bg"></div>

最后全部保存

修改网站背景

打开usr/themes/handsome/assets/css/handsome.css

在96行附近改掉PC端背景图片。

163行附近修改移动端背景图片。

添加js(实现首页右边栏自动隐藏,网页标题自动变化等)

下载下面的js文件

将这个文件放到typecho的如下路径中:./usr/themes/handsome/assets/js/

然后打开usr/themes/handsome/component/footer.php,在350行附近添加一行<script type="text/javascript" src="<?php echo STATIC_PATH; ?>js/handsome.js"></script>

最后保存。

贰、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,找到注释<!--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;
}

七、扩充webfont字体库,使用更多的图标


首先下载font-awesome字体库


然后解压,放入你的CDN存储空间中,然后在主题外观设置-开发者选项-自定义head输出头部中引用
<link href="https://cdn.xxx.com/xxx/xxx/css/font-awesome.min.css" rel="stylesheet">
这个链接是你存储css文件的链接,
最后通过icon="icon icon-cloud-download"在handsome中引用即可

请输入图片描述

最后修改:2019 年 12 月 12 日 05 : 59 PM