Handsome 主题大升级（一）系统后台设置

Mz Xi2025-04-302025-09-10

主题整体细节设置以及美化方案

该站的所有修改项均在本文列出，实际效果看本站即可。若您也想拥有类似的效果，欢迎借鉴~~
注意：以下代码出现/* */ 、或//字符均为注释，即不会有实际效果，仅仅是给人看的一个标记。
在这里不建议删除，因为会影响后期修改时的辨别。悉知~

为了给小白讲明白，这里记录的已经很细了。老博主的话，拿着代码按自己意愿改即可，懂得都懂~

原本在浏览器写完了，但是发布的时候出了问题导致瞬间没有了。。。哭死！！

这是重写的！！即便是学习，也是太累了啊！！！

本站环境

Typecho：1.2.1正式版
HandSome：9.2.1 Pro
其他版本的Typecho和HandSome不确定其可行性，请自行测试~

[collapse status=”false” title=”目录结构”]

component/comments.php     评论区
component/footer.php       底部版权、音乐播放器之类
component/header.php       页面头，没啥要改的
component/headnav.php      顶部导航
component/say.php          时光机动态
component/sidebar.php      右侧栏目
component/third_party_comments.php    3.3.0新增，第三方评论
css/        博客CSS，一般不要改
fonts/      博客字体，一般不要改
img/        图像，一般不要改
js/         js文件，一般不要改
lang/       语言文件
libs/Content.php    文章内容
libs/...    一般不要改
usr/        另一个语言文件？
404.php     404界面
archive.php    整合
booklist.php   书单
cross.php      时光机
files.php      归档
functions.php  配置界面的东西
guestbook.php  留言板
index.php      首页
links.php      友链
page.php       文章页面整合
post.php       文章输出

color： 选填，不填默认为success（绿色），可选值：
light：白色
info：蓝色
dark：深色
success：绿色
black：黑色
warning：黄色
primary：紫色
danger：红色

[/collapse]

系统后台设置

这些设置有些可能是开站都必须的吧。

添加GZIP压缩

[collapse status=”false” title=”添加GZIP压缩”]

这个主要是减小带宽压力，以达到加快网站加速速度的目的。
和上面的HTTPS一样，在 config.inc.php内加入以下配置即可：

1 2	/** 开启gzip压缩 */ ob_start('ob_gzhandler');

[/collapse]

去掉地址栏的index.php

[collapse status=”false” title=”去掉地址栏的index.php”]

更改前是这样的：https://blog.demius.tech/index.php/archives/368.html
更改后是这样的：https://blog.demius.tech/archives/368.html

首先进入后台，找到设置 - 永久链接，改成如下图所示:

然后我们需要配置伪静态规则
如果使用的面板，就在网站-设置-伪静态-选择Typecho-保存即可

[/collapse]

Gravatar国内源

[collapse status=”false” title=”Gravatar国内源”]

找到Typecho的安装目录中的 config.inc.php文件，添加一行代码更换为国内v2ex源 define('__TYPECHO_GRAVATAR_PREFIX__', 'https://cdn.v2ex.com/gravatar/');
Handsome主题可以直接在 外观设置-速度优化-Gravatar镜像源地址中填入 https://cdn.v2ex.com/gravatar/

[/collapse]

自定义后台路径

[collapse status=”false” title=”自定义后台路径”]1、将 Typecho程序根目录中的后台文件夹 “admin”改名，名字即为你想自定义的地址名，例如：将 “admin”改为 “xxx”
2、修改根目录文件 “config.inc.php”，打开该文件后找到：

1 2	/* 后台路径(相对路径) / define(' TYPECHO_ADMIN_DIR ', '/admin/');

[/collapse]

每日新闻自动更新

[collapse status=”false” title=”每日新闻自动更新”]使用方法
首先先创建一个独立页面，名称随意，将以下代码放在独立页面内：

1	<img src="https://api.4rz.cn/zbPhoto.jpg" />

在我给大家增加一个接口，二选一感觉哪个速度快就用哪个：

1	<img src="http://api.03c3.cn/zb" />

[/collapse]

初级设置

博主介绍闪字效果

[collapse status=”false” title=”博主介绍闪字效果”]

打开后台-更改外观-设置外观-初级设置-复制代码粘贴至博主的介绍即可

<span class="text-muted text-xs block"><div id="chakhsu"></div> <script> var chakhsu = function (r) {function t() {return b[Math.floor(Math.random() * b.length)]} function e() {return String.fromCharCode(94 * Math.random() + 33)} function n(r) {for (var n = document.createDocumentFragment(), i = 0; r > i; i++) { var l = document.createElement("span"); l.textContent = e(), l.style.color = t(), n.appendChild(l) } return n}function i() {var t = o[c.skillI]; c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d) }  var l = "❤", o = ["这里是介绍，改成你自己的内容即可" ].map(function (r) {return r + ""}), a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"], c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g}; i() }; chakhsu(document.getElementById('chakhsu')); </script> </span> </span>

[/collapse]

高级设置

左侧边栏导航

[collapse status=”false” title=”左侧边栏导航”]

[tabs]
[tab name=”添加自定义按钮” active=”true”]

name：代表显示栏目/按钮的名称
class：表示栏目/按钮的网页图标的样式
link：代表栏目/按钮的链接
target（可选）: 代表定在何处打开链接文档，如 _blank:浏览器总在一个新打开、未命名的窗口中载入目标文档。_self:代表在当前窗口打开。不填则为：_blank。

1 2	{"name":"名称","class":"图标","link":"链接位置","target":"_blank"} {"name":"名称","class":"图标","link":"链接位置","target":"_blank"}

每两项之间，用英文逗号(,)隔开，最后一项请勿加上逗号。

[/tab]
[tab name=”隐藏默认栏目”]

左侧边栏目默认加载首页按钮。隐藏方法：

1	{"name":"home","status":"hide"}

[/tab]
[/tabs]

[/collapse]

顶部导航栏目

[collapse status=”false” title=”顶部导航栏目”]

[tabs]
[tab name=”添加自定义按钮“ active=”true”]

{"name":"音乐","class":"fa fa-music","link":"xxx.com"}

或者：

{"name":"RSS","class":"fontello fontello-rss icon-fw","link":"https://blog.demius.tech/","target":"_blank"}

[/tab]
[tab name=”隐藏默认栏目“]

{"name":"talk","status":"hide"}

[/tab]
[/tabs]

[/collapse]

首页轮播图

[collapse status=”false” title=”首页轮播图”]

在外观设置——高级设置——首页轮播图中可以配置首页的轮播图

格式：

1
2
3

{"title":"第一篇文章","link":"","cover":"","desc":""},
{"title":"第一篇文章","link":"","cover":"","desc":""}

示例：

1
2
3

{"title":"handsome主题基于原版修改项，美化适配网站风格记录","link":"https://blog.demius.tech/archives/368.html", "cover":"https://tc.demius.tech/i/2024/09/11/66e0fdff49f74.webp","desc":"在复杂中，保持简洁。 一款精心打磨后的typecho主题。"},
{"title":"typecho的插件推荐，持续更新...","link":"https://blog.demius.tech/archives/453.html","cover":"https://tc.demius.tech/i/2024/09/11/66e0fe0eba820.webp","desc":"拒绝信息化的算法推送"}

属性介绍：

title: 文章标题
link: 文章的地址
cover: 文章图片地址，比例建议8：3，不要太小，否则显示的不清楚
desc: 简单描述（不要太长）

最后一个 }后面不要加上英文逗号

[/collapse]

时光机配置

时光机社会化图标

[collapse status=”false” title=”时光机社会化图标”]

默认已经填入了配置，书写规则和上面基本类似：

name：代表显示按钮的名称
class：表示按钮的网页图标的样式
link：代表按钮的链接
status：当 status值为 single时，特指页面中的绿色文字按钮，此时无需填写 class项。

{"name":"twitter","class":"fa fa-twitter","link":"#"},
{"name":"facebook","class":"fa fa-facebook","link":"#"},
{"name":"googlepluse","class":"fa fa-google-plus","link":"#"},
{"name":"github","status":"single","link":"#"}

简单配置，只需要修改”value”和”link”的值。高级配置，模仿上面的写法，增加或者删除相应的项目即可。

每两项之间，用英文逗号(,)隔开，最后一项请勿加上逗号。

[/collapse]

时光机联系方式

[collapse status=”false” title=”时光机联系方式”]

默认已经填写email、QQ、微博以及网易云音乐的配置：

name：代表显示栏目的名称
img：表示该联系方式的图标（图片格式）
link：代表联系方式的地址

{"name":"email","img":"图片地址","value":"ihewro@163.com","link":"#"},
{"name":"QQ","img":"图片地址","value":"535425690","link":"#"},
{"name":"微博","img":"图片地址","value":"昵称","link":"地址"},
{"name":"网易云音乐","img":"图片地址","value":"昵称","link":"地址"}

简单配置，只需要修改”value”和”link”的值。高级配置，模仿上面的写法，增加或者删除相应的项目即可。

每两项之间，用英文逗号(,)隔开，最后一项请勿加上逗号。

[/collapse]

RSS动态内容配置

时光机栏目增添额外内容

[collapse status=”false” title=”时光机栏目增添额外内容”]

使用方法
将以下代码按照需求自行修改后放到主题 后台-时光机配置-RSS动态内容配置内即可

{"id":"iciba","name":"每日一句","url":"https://proxy.attainment.cn/https://rss.attainment.cn/iciba/7/poster"},
{"id":"oschina","name":"开源中国","url":"https://proxy.attainment.cn/https://rss.attainment.cn/oschina/news"},
{"id":"bing","name":"Bing 壁纸","url":"https://proxy.attainment.cn/https://rss.attainment.cn/bing"},
{"id":"sspai","name":"少数派","url":"https://proxy.attainment.cn/https://sspai.com/feed"},
{"id":"DailyArt","name":"每日艺术","url":"https://proxy.attainment.cn/https://rss.attainment.cn/dailyart/zh"}

[/collapse]

开发者设置

全局右侧边栏广告位

[collapse status=”false” title=”全局右侧边栏广告位”]

1
2
3

<a href="跳转链接" target="_blank">
<img src="图片地址" >
</a>

[/collapse]

文章页脚广告位

[collapse status=”false” title=”文章页脚广告位”]

1
2
3

<a href="跳转链接" target="_blank">
    <img src="图片地址" style="width: 100%;height: 150px;">
</a>

[/collapse]

独立页面

文章中嵌入网页

[collapse status=”false” title=”文章中嵌入网页”]

在独立页面上放置一个单独的网页页面
使用方法
在文章中添加代码即可，将链接地址修改为你需要展示的网站地址

1	<iframe align="center" width="100%" height="740px" src="链接地址" frameborder="no" border="0" scrolling="no" marginwidth="0" marginheight="0" ></iframe>

[/collapse]