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

博主： demius
发布时间：2024 年 10 月 14 日
80 次浏览
3 条评论
8294字数
分类： typecho

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

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

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

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

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

### 本站环境

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

```
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：红色
```

### 系统后台设置

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

#### 添加GZIP压缩

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-9d251b77c9abc930bd05569e02de888541" aria-expanded="true"><div class="accordion-toggle"><span style="">添加GZIP压缩</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-9d251b77c9abc930bd05569e02de888541" class="collapse collapse-content"><p></p>

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

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

#### 去掉地址栏的index.php

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-fe62aac93b18ba00776a9159363f1ec00" aria-expanded="true"><div class="accordion-toggle"><span style="">去掉地址栏的index.php</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-fe62aac93b18ba00776a9159363f1ec00" class="collapse collapse-content"><p></p>

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

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

![](https://imgs.demius.tech//imgs/2024/08/202408262118776.webp)

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

#### Gravatar国内源

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-9fef99bda86266edbe77fb522766bc2946" aria-expanded="true"><div class="accordion-toggle"><span style="">Gravatar国内源</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-9fef99bda86266edbe77fb522766bc2946" class="collapse collapse-content"><p></p>

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

#### 自定义后台路径

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-fb5774efee0ebff49061cb8bddd2c66586" aria-expanded="true"><div class="accordion-toggle"><span style="">自定义后台路径</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-fb5774efee0ebff49061cb8bddd2c66586" class="collapse collapse-content"><p></p>1、将 Typecho程序根目录中的后台文件夹 "admin"改名，名字即为你想自定义的地址名，例如：将 "admin"改为 "xxx"
2、修改根目录文件 "config.inc.php"，打开该文件后找到：

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

#### 每日新闻自动更新

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e4d949dd47cd2600bdc9a69bf311aa1c98" aria-expanded="true"><div class="accordion-toggle"><span style="">每日新闻自动更新</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-e4d949dd47cd2600bdc9a69bf311aa1c98" class="collapse collapse-content"><p></p>使用方法
首先先创建一个独立页面，名称随意，将以下代码放在独立页面内：

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

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

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

### 初级设置

#### 博主介绍闪字效果

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-07eeeb44164783db98d00b49bfd3daeb81" aria-expanded="true"><div class="accordion-toggle"><span style="">博主介绍闪字效果</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-07eeeb44164783db98d00b49bfd3daeb81" class="collapse collapse-content"><p></p>

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

```
<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>
```

### 高级设置

#### 左侧边栏导航

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-20767ce660b645b4b7b13db5345547a636" aria-expanded="true"><div class="accordion-toggle"><span style="">左侧边栏导航</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-20767ce660b645b4b7b13db5345547a636" class="collapse collapse-content"><p></p>

<div class="tab-container post_tab box-shadow-wrap-lg">
<ul class="nav no-padder b-b scroll-hide" role="tablist">
<li class='nav-item active' role="presentation"><a class='nav-link active' style="" data-toggle="tab" 
aria-controls='tabs-98b6504b33a01d00d2373c3ee49072b960' role="tab" data-target='#tabs-98b6504b33a01d00d2373c3ee49072b960'>添加自定义按钮</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" 
aria-controls='tabs-6084ea116486280a30b0d912d0c29d4b671' role="tab" data-target='#tabs-6084ea116486280a30b0d912d0c29d4b671'>隐藏默认栏目</a></li>
</ul>
<div class="tab-content no-border">
<div role="tabpanel" id='tabs-98b6504b33a01d00d2373c3ee49072b960' class="tab-pane fade active in">

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

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

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

</div><div role="tabpanel" id='tabs-6084ea116486280a30b0d912d0c29d4b671' class="tab-pane fade  ">

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

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

</div>
</div>
</div>

#### 顶部导航栏目

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-8329bd33c038dc0d7627b1a970ee1f1999" aria-expanded="true"><div class="accordion-toggle"><span style="">顶部导航栏目</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-8329bd33c038dc0d7627b1a970ee1f1999" class="collapse collapse-content"><p></p>

<div class="tab-container post_tab box-shadow-wrap-lg">
<ul class="nav no-padder b-b scroll-hide" role="tablist">
<li class='nav-item active' role="presentation"><a class='nav-link active' style="" data-toggle="tab" 
aria-controls='tabs-be31aa74776a8745bc2d08484f02dccb760' role="tab" data-target='#tabs-be31aa74776a8745bc2d08484f02dccb760'>**添加自定义按钮**</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" 
aria-controls='tabs-01f2ad6c6eea96f948c55e040bcf7ef9761' role="tab" data-target='#tabs-01f2ad6c6eea96f948c55e040bcf7ef9761'>**隐藏默认栏目**</a></li>
</ul>
<div class="tab-content no-border">
<div role="tabpanel" id='tabs-be31aa74776a8745bc2d08484f02dccb760' class="tab-pane fade active in">

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

或者：

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

</div><div role="tabpanel" id='tabs-01f2ad6c6eea96f948c55e040bcf7ef9761' class="tab-pane fade  ">

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

</div>
</div>
</div>

#### 首页轮播图

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-725245beb5a379792e4c2685fdb3470153" aria-expanded="true"><div class="accordion-toggle"><span style="">首页轮播图</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-725245beb5a379792e4c2685fdb3470153" class="collapse collapse-content"><p></p>

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

格式：

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

```

示例：

```
{"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: 简单描述（不要太长）

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

### 时光机配置

#### 时光机社会化图标

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e9b1c2b3b9e3c795c6da1b182a78f13f32" aria-expanded="true"><div class="accordion-toggle"><span style="">时光机社会化图标</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-e9b1c2b3b9e3c795c6da1b182a78f13f32" class="collapse collapse-content"><p></p>

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

* `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”的值。高级配置，模仿上面的写法，增加或者删除相应的项目即可。

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

#### 时光机联系方式

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-3aeafdb038f7ddbe4cc43b492116121d74" aria-expanded="true"><div class="accordion-toggle"><span style="">时光机联系方式</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-3aeafdb038f7ddbe4cc43b492116121d74" class="collapse collapse-content"><p></p>

默认已经填写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”的值。高级配置，模仿上面的写法，增加或者删除相应的项目即可。

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

#### RSS动态内容配置

时光机栏目增添额外内容

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-21f531ecac8781945242c7eb9351284943" aria-expanded="true"><div class="accordion-toggle"><span style="">时光机栏目增添额外内容</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-21f531ecac8781945242c7eb9351284943" class="collapse collapse-content"><p></p>

使用方法
将以下代码按照需求自行修改后放到主题 `后台-时光机配置-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"}
```

### 开发者设置

#### 全局右侧边栏广告位

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-23322d0737ffe234f63564bf00c8abd556" aria-expanded="true"><div class="accordion-toggle"><span style="">全局右侧边栏广告位</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-23322d0737ffe234f63564bf00c8abd556" class="collapse collapse-content"><p></p>

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

#### 文章页脚广告位

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e13a7e4b18dc80a5ed94942e5ec9aa8977" aria-expanded="true"><div class="accordion-toggle"><span style="">文章页脚广告位</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-e13a7e4b18dc80a5ed94942e5ec9aa8977" class="collapse collapse-content"><p></p>

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

### 独立页面

#### 文章中嵌入网页

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7338aee84e360c67b6fa0816e7b7d2fd4" aria-expanded="true"><div class="accordion-toggle"><span style="">文章中嵌入网页</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-7338aee84e360c67b6fa0816e7b7d2fd4" class="collapse collapse-content"><p></p>

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

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

#### 书单电影页面

看这篇[Handsome 助力：提升阅读观影体验的书单电影界面设计](https://blog.demius.tech/archives/496.html)

End

文章标签：handsome，主题美化，typehco主题

本文标题： Handsome 主题大升级（一）系统后台设置

本文链接： https://blog.demius.tech/archives/503.html

除非注明，均默认采用 CC BY-NC-SA 4.0许可协议。

声明：转载请注明文章来源。

最后修改：2024 年 10 月 22 日

如果觉得我的文章对你有用，请随意赞赏

3 条评论

递四方速递 Microsoft Edge 129.0.0.0 Windows 10 中国江苏移动
October 14th, 2024 at 04:25 am

滴！学生卡！打卡时间：04:25:19，请上车的乘客系好安全带~

回复
1. 递四方速递 Microsoft Edge 129.0.0.0 Windows 10 中国江苏移动
  October 14th, 2024 at 04:26 am
  
  @递四方速递
  
  天空是连着的，如果我们也能各自发光的话，无论距离有多远，都能看到彼此努力的身影。
  
  回复
Handsome 主题大升级：（快速跳转） - Demius`Blog 非主流浏览器非主流操作系统中国香港
October 14th, 2024 at 01:48 am

...

回复

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

打卡

语录

私密评论

名称 *

🎲

邮箱 *

地址

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

demius • 2024 年 10 月 14 日

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

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

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

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

### 本站环境

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

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

### 系统后台设置

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

#### 添加GZIP压缩

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

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

#### 去掉地址栏的index.php

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

![](https://imgs.demius.tech//imgs/2024/08/202408262118776.webp)

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

#### Gravatar国内源

#### 自定义后台路径

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

#### 每日新闻自动更新

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

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

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

### 初级设置

#### 博主介绍闪字效果

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

### 高级设置

#### 左侧边栏导航

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

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

</div><div role="tabpanel" id='tabs-6084ea116486280a30b0d912d0c29d4b671' class="tab-pane fade  ">

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

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

</div>
</div>
</div>

#### 顶部导航栏目

<div class="tab-container post_tab box-shadow-wrap-lg">
<ul class="nav no-padder b-b scroll-hide" role="tablist">
<li class='nav-item active' role="presentation"><a class='nav-link active' style="" data-toggle="tab" 
aria-controls='tabs-be31aa74776a8745bc2d08484f02dccb760' role="tab" data-target='#tabs-be31aa74776a8745bc2d08484f02dccb760'>**添加自定义按钮**</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" 
aria-controls='tabs-01f2ad6c6eea96f948c55e040bcf7ef9761' role="tab" data-target='#tabs-01f2ad6c6eea96f948c55e040bcf7ef9761'>**隐藏默认栏目**</a></li>
</ul>
<div class="tab-content no-border">
<div role="tabpanel" id='tabs-be31aa74776a8745bc2d08484f02dccb760' class="tab-pane fade active in">

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

或者：

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

</div><div role="tabpanel" id='tabs-01f2ad6c6eea96f948c55e040bcf7ef9761' class="tab-pane fade  ">

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

</div>
</div>
</div>

#### 首页轮播图

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

格式：

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

```

示例：

```

属性介绍：

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

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

### 时光机配置

#### 时光机社会化图标

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

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

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

#### 时光机联系方式

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

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

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

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

#### RSS动态内容配置

时光机栏目增添额外内容

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

### 开发者设置

#### 全局右侧边栏广告位

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

#### 文章页脚广告位

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

### 独立页面

#### 文章中嵌入网页

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

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

#### 书单电影页面

看这篇[Handsome 助力：提升阅读观影体验的书单电影界面设计](https://blog.demius.tech/archives/496.html)

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

※相关文章推荐※

※热评文章推荐※

3 条评论

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Handsome 主题大升级：原版基础上的惊艳修改与网站风格完美适配全记录（总）

思源笔记配置PicGo实现一键同步多平台发布文章，保姆级教程

Handsome 助力：提升阅读观影体验的书单电影界面设计

《探索 Stable Diffusion：开启 AI 绘画的奇幻之旅》

Handsome 主题大升级：（快速跳转）

电脑桌面美化系列教程，全部是轻量级更改哦......

兴趣与搞笑的担当之狗狗币-TURP的升降起伏

国漫崛起，朝花夕拾，数不尽的浪漫与惆怅

wordpress常用插件（持续补充更新......）

TVBox简单教程

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

※相关文章推荐※

※热评文章推荐※

3 条评论

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

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

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款