前言
主题美化
美化头像
打开后台-外观-设置外观-开发者设置-复制代码粘贴至 自定义CSS
即可
#头像呼吸光环代码
.img-full {
width: 100px;
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: 0.5s;
}
@keyframes light {
0% {
box-shadow: 0 0 4px #f00;
}
25% {
box-shadow: 0 0 16px #0f0;
}
50% {
box-shadow: 0 0 4px #00f;
}
75% {
box-shadow: 0 0 16px #0f0;
}
100% {
box-shadow: 0 0 4px #f00;
}
}
添加天气
头像下面的城市和天气信息显示使用AliceStyle美化插件
插件功能还是比较强大的,但是我用到的比较少,根据自己的喜好使用。
代码高亮
如果主题自带的代码高亮不符合你的审美,那么推荐使用下面的这款插件
使用方法
第 1 步:下载本插件,解压,放到 usr/plugins/
目录中;
第 2 步:文件夹名改为 CodePrettify
;
第 3 步:登录管理后台,激活插件
(请勿与其它同类插件同时启用,以免互相影响)
第 4 步:设置:选择主题风格,是否显示行号等。
第 5 步:修改 /usr/themes/handsome/assets/css/
下的handsome.min.css文件
由于handsome主题最新加入授权,旧版本必须更新至最新版,按照以下手动修改
删除handsome.min.css
里的
pre {
padding:0
}
pre code {
display:block;
overflow-x:auto;
position:relative;
margin:0;
padding:15px
}
然后添加以下css
代码即可
#post-content pre code {
display:block;
overflow-x:auto;
position:relative;
margin:0;
padding-left:50px;
}
pre code {
position:relative;
display:block;
overflow-x:auto;
margin:4.4px 0.px .4px 1px;
padding:0;
max-height:500px;
padding-left:3.5em
}
插件用法
\```php(语言类型必填)
<?php echo 'hello jrotty!'; ?>
\```
删除上边代码中的\
若不填写语言类型,则无效果
Pjax
如果你的网站有开启Pjax(handsome主题
默认开启)
请把以下代码添加到回调函数的地方,在你使用的主题设置里看看
以 Handsome主题
为例:
主题
-->设置外观
-->Pjax
-->PJAX回调函数
if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
for (var i = 0; i < pres.length; i++){
if (pres[i].getElementsByTagName('code').length > 0)
pres[i].className = 'line-numbers';}
Prism.highlightAll(true,null);}
若插件里设置不显示行号,PJAX
函数要改为
if (typeof Prism !== 'undefined') {
Prism.highlightAll(true,null);}
重要说明
1. 选择高亮主题风格
- coy.css
- dark.css
- BlackMac.css(黑色Mac风格)
- GrayMac.css (默认选中:Mac风格(灰色))
- WhiteMac.css(白色Mac风格)
- twilight.css
- tomorrow-night.css
2. 是否在代码左侧显示行号 (默认开启)
彩色标签云
开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript
添加以下代码:
<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
永久链接地址
index.php
宝塔用户进入控制面板
方法一:网站 -> 设置 -> 伪静态 -> 选择typecho 模板
方法二:直接在0.当前
下添加以下代码:
if (!-e $request_filename) {
rewrite ^(.*)$ /index.php$1 last;
}
保存即可
时光机添加RSS
https://rsshub.app
这个域名已经失效了,需要替换成最新的 https://rsshub.rssforever.com
才可以使用。
最简单的解决办法是:在原有的RSS源地址前面加上https://cors-anywhere.herokuapp.com/
举例:
https://api.fanfou.com/statuses/user_timeline/~k40sgjV_6kg.rss
该源是禁止跨域的,所有无法请求到(浏览器可以正常访问,但是无法通过代码获取数据),修改后的源地址为:
https://cors-anywhere.herokuapp.com/https://api.fanfou.com/statuses/user_timeline/~k40sgjV_6kg.rss
填url
属性就填后者即可。(可能速度会有些影响)
左侧侧边栏
找到主题文件夹下的 aside.php
文件,找到文件中 组成
的相关代码大概 134-214
行,替换成下面的代码(本站使用的):
<div class="line dk hidden-folded"></div>
<li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
<span><?php _me("分类") ?></span>
</li>
<li>
<a href="https://www.gaohanas.com/category/android/" class="auto">
<span class="nav-icon"><i data-feather="coffee"></i></span>
<span><?php _me("安卓开发") ?></span>
</a>
</li>
<li>
<a href="https://www.gaohanas.com/category/crack/" class="auto">
<span class="nav-icon"><i data-feather="key"></i></span>
<span><?php _me("逆向技术") ?></span>
</a>
</li>
<li>
<a href="https://www.gaohanas.com/category/archives/" class="auto">
<span class="nav-icon"><i data-feather="feather"></i></span>
<span><?php _me("心情随笔") ?></span>
</a>
</li>
<li>
<a href="https://www.gaohanas.com/category/share/" class="auto">
<span class="nav-icon"><i data-feather="share"></i></span>
<span><?php _me("资源分享") ?></span>
</a>
</li>
常见问题
时光机评论图片不展示
进入Typecho后台,选择设置 -> 评论
允许使用的HTML标签和属性框内输入以下代码:
<img src="">
<audio class="" src="" preload>
<video src=""></video>
评论大图后台展示优化
进入网站根目录
#打开如下文件
../admin/css/normalize.css
在最后添加以下代码:
.comment-content img{max-width:50%;}
如果使用了美化插件,也要到插件目录找到该文件一起修改。
保存即可,需要清理浏览器缓存才能看到效果。
9 comments
代码高亮插件设置后,handsome设置里的代码风格应该怎么选?
感谢
复制了没用丫
哪个问题啊
这个页面是单独写的代码嘛?
是啊,这就是一篇文章啊
有用!哈哈
bingo解决了我很多问题!(´இ皿இ`)
::QQ:Y.qq51::