主题整体细节设置以及美化方案
该站的所有修改项均在本文列出,实际效果看本站即可。若您也想拥有类似的效果,欢迎借鉴~~
注意:以下代码出现/* */ 、或//字符均为注释,即不会有实际效果,仅仅是给人看的一个标记。
在这里不建议删除,因为会影响后期修改时的辨别。悉知~
为了给小白讲明白,这里记录的已经很细了。老博主的话,拿着代码按自己意愿改即可,懂得都懂~
原本在浏览器写完了,但是发布的时候出了问题导致瞬间没有了。。。哭死!!
这是重写的!!即便是学习,也是太累了啊!!!
本站环境
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压缩
这个主要是减小带宽压力,以达到加快网站加速速度的目的。
和上面的HTTPS一样,在 config.inc.php内加入以下配置即可:
/** 开启gzip压缩 */
ob_start('ob_gzhandler');
去掉地址栏的index.php
更改前是这样的:https://blog.demius.tech/index.php/archives/368.html
更改后是这样的:https://blog.demius.tech/archives/368.html
首先进入后台,找到 设置 - 永久链接,改成如下图所示:
然后我们需要配置伪静态规则
如果使用的面板,就在 网站-设置-伪静态-选择Typecho-保存即可
Gravatar国内源
- 找到Typecho的安装目录中的
config.inc.php
文件,添加一行代码更换为国内v2ex源define('__TYPECHO_GRAVATAR_PREFIX__', 'https://cdn.v2ex.com/gravatar/');
Handsome
主题可以直接在外观设置-速度优化-Gravatar镜像源地址
中填入https://cdn.v2ex.com/gravatar/
自定义后台路径
/* 后台路径(相对路径) /
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>
3 条评论
滴!学生卡!打卡时间:04:25:19,请上车的乘客系好安全带~
天空是连着的,如果我们也能各自发光的话,无论距离有多远,都能看到彼此努力的身影。
...