本篇文章将持续更新

任何问题请评论留言


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

博客字体美化

博客字体美化


字体美化插件ZFonts

ZFonts插件CDN字体源CDN服务商提供者https://zfonts.ghproxy.ga/CloudFla...

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

每日60S早报


为博客加一个自动更新的60S早报

60S每日早报第一种：小白级别教程第二种：基础级别教程第三种：全面级别教程说明

后台模板三款

后台模板三款


分享三款Typecho后台模板

Typecho后台模板第一款：Simple演示获取第二款：Fresh演示获取第三款：Apex演示获取教程

后台美化插件SimpleAdmin

后台美化插件SimpleAdmin


Typecho后台美化插件SimpleAdmin

SimpleAdmin介绍插件，即插即用安全，不会破坏您的原有文件轻量级，几乎纯js,css修改支持 gogobo...

鼠标美化插件HoerMouse

鼠标美化插件HoerMouse


鼠标美化插件HoerMouse

HoerMouse演示下载

Handsome友链自助申请插件

Handsome友链自助申请插件


Handsome友链自助申请插件

插件ErcerLink演示下载原文https://blog.ccdalao.cn/archives/197.html代码

Hansome专用的UserAgent插件

Hansome主题专用的UserAgent插件


Hansome主题专用的UserAgent插件

UserAgent插件效果下载教程注意//** 防止CDN造成无法获取客户真实IP地址 */ if(isset($...

优化记录

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资源
都在主题目录下的/assets/目录下。
你需要把asset目录上传到你的cdn服务器上，比如CDN服务器的
handsome目录里，地址即为
https://cdn.ihewro.com/handsome/assets/
在当前框中就填入该地址，主题就会引用你搭建的cdn上面的资源，而不再引用当前服务器上的资源

公益加速地址

此处内容需要评论回复后（审核通过）方可阅读。

本站自建的，可达阿里云储存的速度，拥有Vditor本地化资源
如需要在assets目录添加其他文件，请压缩后发送至邮箱2338174386@qq.com并说明要求。

博客图片采用WebP格式

WebP格式工具


WebpConverter工具

WebpConverter预览下载

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


启用后生成网站地图，并带有百度推送接口

此处内容需要评论回复后（审核通过）方可阅读。

玩转Handsome时光机

玩转Handsome时光机


玩转Handsome时光机

Handsome时光机预览正文首先https://rss.qninq.cn&https://rss.attainm...

正文到此结束
最后修改：2023 年 03 月 21 日
© 允许规范转载
觉得文章不错的话可以点一下文章底部的广告呦！