本篇文章将持续更新

任何问题请评论留言

最后更新2022年3月1日

新更3.1 |
---|
入站提示 |
美化记录
主题标题居中
主题标题居中
效果
步骤
开发者设置➡自定义CSS
/*主题标题居中*/
header.bg-light.lter.wrapper-md {
text-align: center;
}
文章版式阴影
文章版式阴影
效果见本站盒子模型边缘
步骤
开发者设置➡自定义CSS
/*文章版式阴影*/
.panel{
box-shadow: 1px 1px 5px 5px rgba(232, 212, 220, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255,112,173,0.35);
}
.panel:hover{
box-shadow: 1px 1px 5px 5px rgba(232, 212, 220, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255,112,173,0.35);
}
.panel-small{
box-shadow: 1px 1px 5px 5px rgba(232, 212, 220, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255,112,173,0.35);
}
.panel-small:hover{
box-shadow: 1px 1px 5px 5px rgba(232, 212, 220, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255,112,173,0.35);
}
.app.container {
box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}
多彩标签云
多彩标签云
效果
步骤
开发者设置➡自定义JavaScript
PJAX➡PJAX回调函数
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;
});
多彩标签云(推荐)
多彩标签云及博客信息中多彩数字
效果
步骤
开发者设置➡自定义JavaScript
PJAX➡PJAX回调函数
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
info.style.backgroundColor = infosColor;
});
function addNumber(a) {
var length = document.getElementById("comment").value.length;
if(length> 0){
document.getElementById("comment").focus()
document.getElementById("comment").value += '\n' + a + new Date
}else{
document.getElementById("comment").focus()
document.getElementById("comment").value += a + new Date
}
}
等距标签云
等距标签云
步骤
开发者设置➡自定义CSS
/*词云等距美化*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}
赞赏和点赞图标跳动
赞赏和点赞图标跳动
步骤
开发者设置➡自定义CSS
/*赞赏按钮跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
左侧导航多彩图标
左侧导航多彩图标
步骤
开发者设置➡自定义JavaScript
PJAX➡PJAX回调函数
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");let leftHeaderColorArr=["#FF69B4","#58c7ea","#E066FF","#FF69B4","#FFA54F","#90EE90","#0043ff","#cc00ff","#8e7cc3","#A0522D","#FF7256","#FFA500","#8B0000","#7CFC00","#4EEE94","#00FFFF","#EE0000"];leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});
右侧滚动条美化
右侧滚动条美化
步骤
开发者设置➡自定义CSS
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 8px;
height: 6px
}
/*定义滚动条轨道*/
::-webkit-scrollbar-track {
background-color: transparent;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
background-color: #30B07F;
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em
}
侧栏头像羽毛背景
侧栏头像羽毛背景
步骤
开发者设置➡自定义CSS
/*羽毛_css*/
.dropdown.wrapper {
background:url(https://blog.qninq.cn/file/img/static/yumao.webp) right bottom no-repeat;
}
复制弹窗提醒
复制弹窗提醒
步骤
开发者设置➡自定义JavaScript
/* 复制成功提示代码开始 */
kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
message: "尊重原创,转载请注明出处!<br> 本文作者:青柠<br>原文链接:"+sitesurl,
title: "复制成功",
type: "warning",
autoHide: !1,
time: "3000"
})
}}
/* 复制成功提示代码结束 */
右侧导航图标美化
右侧导航图标美化
效果
步骤
/*右侧导航栏*/
.sidebar-icon svg.feather.feather-thumbs-up{color: #ff0000;}
.sidebar-icon svg.feather.feather-message-square{color:#495dc3;}
.sidebar-icon svg.feather.feather-gift{color:#52DE97;}
博主介绍闪字效果
博主介绍闪字效果
教程
主题设置➡初级设置➡博主的介绍
<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>
自定义右键美化
自定义右键美化
效果
步骤
开发者设置➡自定义输出body 尾部的HTML代码
此处内容需要评论回复后(审核通过)方可阅读。
全站打字烟花特效
全站打字烟花特效
开发者设置➡自定义输出body 尾部的HTML代码
<script type="text/javascript"src="https://blog.qninq.cn/file/js/commentTyping.js"></script>
评论边框美化
评论边框美化
步骤
开发者设置➡自定义CSS
/*评论边框*/
.comment-parent {
margin: 20px;
padding: 20px;
border-radius: 25px;
border: 1px solid rgba(255,255,255,.3);
}
底部页脚美化
底部页脚美化
步骤
usr/themes/handsome/component/footer.php
自行删去多余代码
开发者设置➡自定义CSS
/*底部页脚*/
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
background-color: #abbac3;
margin-bottom: 5px
}
.github-badge .badge-subject {
display: inline-block;
background-color: #4d4d4d;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px
}
.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px
}
.github-badge .bg-blue {
background-color: #007ec6
}
.github-badge .bg-orange {
background-color: #ffa500
}
.github-badge .bg-red {
background-color: #f00
}
.github-badge .bg-green {
background-color: #3bca6e
}
.github-badge .bg-purple {
background-color: #ab34e9
}
博客底部左侧信息
<a class="github-badge">
<span class="badge-subject">Copyright</span>
<span class="badge-value bg-orange">©2022 Lime's Blog</span>
</a>
|
<a class="github-badge" target="_blank" href="https://beian.miit.gov.cn/">
<span class="badge-subject">粤ICP备</span>
<span class="badge-value bg-green">2021014387号</span>
</a>
博客底部右侧信息
<a class="github-badge" target="_blank" href="https://www.ihewro.com/">
<span class="badge-subject">Themes</span>
<span class="badge-value bg-blue">Handsome</span>
</a>
|
<a class="github-badge" target="_blank" href="https://typecho.org">
<span class="badge-subject">Powered</span>
<span class="badge-value bg-purple">Typecho</span>
</a>
博客字体美化
Logo扫光效果
Logo扫光效果
效果
看本站logo处即可
步骤
开发者设置➡自定义CSS
/* logo扫光 */
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
粗体上色
粗体上色
效果
粗体上色,颜色可自定义修改
步骤
开发者设置➡自定义CSS
/* 粗体上色 */
strong{
color: rgb(230, 145, 56);
}
正文结束及版权
正文结束及版权
效果
步骤
开发者设置➡自定义CSS
/*版权信息&正文结束分割线CSS*/
.cutline {
border-top: 1px dotted #ccc;
height: 1px;
margin: 20px 0;
text-align: center;
width: 100%;
}
.cutline span {
background-color: rgb(236, 237, 238);
border: 1px solid #d6d6d6;
font: 12px Arial,Microsoft JhengHei;
padding: 2px 4px;
position: relative;
top: -10px;
}
.post-copyright {
font-size: 13px;
margin: 8px 0;
padding: 10px;
border-left: 4px solid #3bd58a;
background-color: rgba(220, 220, 220, 0.1);
list-style: none;
word-break: break-all;
position: relative;
overflow: hidden;
}
.post-copyright li {
display: list-item;
text-align: -webkit-match-parent;
}
.post-copyright a {
color: rgba(0, 120, 231, 1);
text-decoration: none;
transition: color .1s;
}
/usr/themes/handsome/post.php
如图插入以下代码

<!--版权信息&正文结束分割线-->
<div class="cutline">
<span><a style="color:#F17B8F; border-bottom: 0px solid #999!important;"> 正文到此结束 </a></span>
</div>
<ul class="post-copyright">
<li class="post-copyright-author"><strong>本文作者:</strong><?php $this->author(); ?></li>
<li class="post-copyright-link"><strong>本文链接:</strong><a href="<?php $this->permalink() ?>" title="<?php $this->title() ?>"><?php $this->permalink() ?></a></li>
<li class="post-copyright-license"><strong>版权声明:</strong>本博客所有文章除特别声明外,均默认采用<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener" title="CC BY-NC-SA 4.0 "><strong> CC BY-NC-SA 4.0 </strong></a> 许可协议。</li>
</ul>
时光机头像圆形
时光机头像圆形
效果
将时光机的原本方形头像重设为圆形头像
步骤
开发者设置➡自定义CSS
/* 时光机圆形头像 */
.img-square {border-radius: 50%;}
.list-group-item .thumb-sm .img-square {border-radius: 5px;}
handsome原生入站提示
handsome原生入站提示
效果:
教程:
自定义输出body尾部的html代码
<script>
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if (kaygb_referrer != ""){
return "感谢您的访问! 您来自:<br>" + document.referrer;
}else{
return "";
}}
$.message({
message: "为了网站的正常运行,请不要使用广告屏蔽插件,谢谢!<br >" + kaygb_referrer(),
title: "网站加载完成",
type: "success",
autoHide: !1,
time: "3000"
})
</script>
每日60S早报
后台模板三款
后台美化插件SimpleAdmin
后台美化插件SimpleAdmin
鼠标美化插件HoerMouse
鼠标美化插件HoerMouse
Handsome友链自助申请插件
Hansome专用的UserAgent插件
Hansome主题专用的UserAgent插件
优化记录
Typecho开启Gzip压缩
Typecho开启Gzip压缩
复制下方代码粘贴到config.inc.php相应位置
/** 开启gzip压缩 */
ob_start('ob_gzhandler');
使Typecho支持emoji
使Typecho支持emoji
效果
🍕🍔🍟🌭🍿😀😁😂
教程
进入博客的数据库,执行下方SQL查询指令
alter table typecho_comments convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_contents convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_fields convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_metas convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_options convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_relationships convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_users convert to character set utf8mb4 collate utf8mb4_unicode_ci;
最后将 Typecho 配置文件中数据库定义参数中的 charset 为 utf8mb4
:
$db->addServer(array (
'host' => localhost,
'user' => 'root',
'password' => 'root',
'charset' => 'utf8mb4', //修改这一行
'port' => 3306,
'database' => ''
), Typecho_Db::READ | Typecho_Db::WRITE);
解决QQ微信内置浏览器评论失败
解决QQ微信内置浏览器评论失败
进入数据库,执行下方SQL查询命令
ALTER TABLE `typecho_comments` CHANGE `agent` `agent` VARCHAR(512)
如果你启用了插件Access,建议执行下方SQL查询命令
ALTER TABLE `typecho_access_log` CHANGE `ua` `ua` VARCHAR(512)
设置静态资源云储存
主题本地静态资源自定义cdn加速
主题静态资源分为两部分:
1.外部框架库;
2.主题自身的js/css资源
都在主题目录下的
你需要把
在当前框中就填入该地址,主题就会引用你搭建的cdn上面的资源,而不再引用当前服务器上的资源
1.外部框架库;
2.主题自身的js/css资源
都在主题目录下的
/assets/
目录下。你需要把
asset
目录上传到你的cdn服务器上,比如CDN服务器的handsome目录
里,地址即为https://cdn.ihewro.com/handsome/assets/
在当前框中就填入该地址,主题就会引用你搭建的cdn上面的资源,而不再引用当前服务器上的资源
公益加速地址
此处内容需要评论回复后(审核通过)方可阅读。
本站自建的,可达阿里云储存的速度,拥有Vditor本地化资源
如需要在
assets
目录添加其他文件,请压缩后发送至邮箱2338174386@qq.com
并说明要求。
博客图片采用WebP格式
WebP格式工具
设置gravatar国内源
gravatar国内源
一个国际通用头像源,但是官方源国内被墙,下面列出一些国内源。
V2EX:https://cdn.v2ex.com/gravatar/
极客族:https://sdn.geekzu.org/avatar/
loli:https://gravatar.loli.net/avatar/
本站:https://gravatar.qninq.cn/wavatar/(需联系我加白名单)
文章标签选择插件tagshelper
插件tagshelper
启用后写文章界面会列出已有标签,快捷选择
此处内容需要评论回复后(审核通过)方可阅读。
网站地图生成插件Sitemap
插件Sitemap
启用后生成网站地图,并带有百度推送接口
此处内容需要评论回复后(审核通过)方可阅读。
174 条评论
kankan
爱了 爱了!感谢博主
又从emlog转回ty咯
学习一下
浅浅看一下
求看!!
看一个
来学习学习,膜拜
tqltql
大老在吗,有事那个左边中国那个怎么搞
https://www.52txr.cn/2022/ipsvg.html看他这篇文章
博主好厉害~小学生在线崇拜
谢谢分享
瞅一瞅
学习一下
学习学习
学习学习
让我来看看
看看
问恶气额为
xxxxx
6666,有实力
学习学习学习
来捞一点代码)
来学习学习
太好了!
学习学习
学习学习吖
学习学习
让我看看
swswws
学习学习
666
右键菜单很个性
rty
看一看
学习了!!!
学习了!!!
岁的法国如果
不错的美化,学习。
测试测试
挺喜欢这个右键美化的。
wowo 不错嘛
不错不错
感谢大佬分享
炒鸡感谢
来了
学习一下
学习
太强了,来虚心学习~
谢谢分享
学习
很有帮助,感谢dalao
66666
支持
来了来了,赞
看到这篇美化教程,我就知道我又可以节省一半的时间了
好厉害,小白前来学习。
真不错
看看看
fsgjmynrsyjnmyr
跟大佬学习
静安寺
害
谢谢
来学习一下
厉害了
害
咦,忘记那个自助友链的模板了
浏览器cookik清除之后,每次都要重新评论……
学习一下
6666
右键菜单很有意思哦
666666666666666666
666666666666666666
666666666666666666
看卡
看看。
学习一下
学学
大佬,我又来看你的博客啦。最近在傲云的博客上看到了一个叫做监控的页面,感觉挺好的,主要那里可以显示自己服务器的状况,实时了解,如果有时间麻烦大佬把他爬下来,顺便写个教程,我爬的还不是特别完美,麻烦你啦!
哦不对,是傲绝的博客
教程真好,那个打字有烟花的是不是还要增加别的东西
学习
过来取点装修代码
过来取点装修代码
逛一逛
感谢分享
学习一下
谢谢分享!
高级
6666666
多学习多学习
看看
看看
看看
学习
来看看大佬学习一下
我来康康
支持
比较喜欢你这个前台样式,可以分享下吗?
666
学习
haoya
整体很美观
感谢分享
让我也看看
学习
6666666
6656
再来逛一逛
想大佬学习
支持
学习
非常好
看看隐藏了什么
看看地址
非常好
非常有用
非常有用谢谢,大佬
谢谢,可以都学习一下
谢谢分享
网站地图生成正是需要
牛啊!
谢谢分享
学习下
大佬厉害
为啥回复了还是不显示
只有极少部分人浏览器问题,首页公告小程序获取
新年喝彩我为什么不好用呢
不知道为什么
位置不对好像
麻烦您看一下
学习学习
大佬大佬,可以搬砖吗?会标明出处的,联系不到你的QQ,只能在这里发送了
可以的
啧,效果真不错!
啧,效果真不错!
大佬太强了
666
学习一下
11111111111111111111
非常有用的笔记
233333333333333333333333333333333333333333333
举手想看右键自定义美化
来学习学习
牛哇牛哇
谢谢博主分享。
没有wordpress,难过
有几个对于wordpress同样适用,比如那个logo扫光
评论测试
加入CSS样式,新年喝彩横图就无法显示啦
除了那个图片链接,其他地方不要动,html是和css对应的
可能你加的方式不对
插入完html那个代码,然后加入css不就行了
KK
感谢分享!!!!
你好,想请教博主关于每日60s的设立过程|´・ω・)ノ
我博客前端时间有60s的教程,不过数据库没了,等明天我把教程复现出了,到时候提醒你
好好,谢谢博主
快来