Loading...

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

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

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

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

这是重写的!!即便是学习,也是太累了啊!!!

本站环境

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压缩

添加GZIP压缩

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

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

去掉地址栏的index.php

去掉地址栏的index.php

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

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

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

Gravatar国内源

Gravatar国内源

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

自定义后台路径

自定义后台路径

1、将 Typecho程序根目录中的后台文件夹 "admin"改名,名字即为你想自定义的地址名,例如:将 "admin"改为 "xxx" 2、修改根目录文件 "config.inc.php",打开该文件后找到:
/* 后台路径(相对路径) / define(' **TYPECHO_ADMIN_DIR** ', '/admin/');

每日新闻自动更新

每日新闻自动更新

使用方法 首先先创建一个独立页面,名称随意,将以下代码放在独立页面内:
<img src="https://api.4rz.cn/zbPhoto.jpg" />

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

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

初级设置

博主介绍闪字效果

博主介绍闪字效果

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

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

高级设置

左侧边栏导航

左侧边栏导航

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

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

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

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

顶部导航栏目

顶部导航栏目

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

或者:

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

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

首页轮播图

首页轮播图

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

格式:

{"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: 简单描述(不要太长)

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

时光机配置

时光机社会化图标

时光机社会化图标

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

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

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

时光机联系方式

时光机联系方式

默认已经填写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动态内容配置

时光机栏目增添额外内容

时光机栏目增添额外内容

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

开发者设置

全局右侧边栏广告位

全局右侧边栏广告位

<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 助力:提升阅读观影体验的书单电影界面设计

End
文章标签:handsome主题美化typehco主题

本文标题: Handsome 主题大升级(一)系统后台设置

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

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

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

最后修改:2024 年 10 月 22 日
如果觉得我的文章对你有用,请随意赞赏