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

[scode type="red"]本文基于Handsome v5.1.1 Pro撰写,自定义CSS版本 v1.6.4,自定义JS版本 v1.6.0[/scode]

[scode type="green"]欢迎有提出任何问题,若发现错误请及时联系我。[/scode]

[scode type="blue"]魔改整体效果取自神代綺凜的网站[/scode]

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

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

首先下载下面的css文件

[button color="primary" icon="" url="https://nai.si/usr/themes/handsome/assets/css/handsome.css" type=""]handsome.css[/button]

将这个文件放到你网站的如下目录中: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文件

[button color="primary" icon="" url="https://nai.si/usr/themes/handsome/assets/js/handsome.js" type=""]handsome.js[/button]

将这个文件放到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字体库,使用更多的图标

[tabs]
[tab name="使用方法" active="true"]
[scode type="green"]首先下载font-awesome字体库[/scode]
[button color="success" icon="" url="https://www.bootcss.com/p/font-awesome/" type=""]下载font-awesome[/button]
[scode type="green"]然后解压,放入你的CDN存储空间中,然后在主题外观设置-开发者选项-自定义head输出头部中引用
<link href="https://cdn.xxx.com/xxx/xxx/css/font-awesome.min.css" rel="stylesheet">
这个链接是你存储css文件的链接,
最后通过icon="icon icon-cloud-download"在handsome中引用即可[/scode]
[/tab]
[tab name="图标名称"]

请输入图片描述
请输入图片描述
[/tab]
[/tabs]