Loading... # Typecho美化记录 <!--more--> **更新优化记录，参考全站友链作者[kano酱-【备忘】Handsome主题修改记录](https://kanochan.net/archives/1003.html)** ## vditor静态资源加速 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c27e60a07d27d947bc3f2fe1dbc16dca16" aria-expanded="true"><div class="accordion-toggle"><span>vditor静态资源加速</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-c27e60a07d27d947bc3f2fe1dbc16dca16" class="collapse collapse-content"><p></p> jsdelivr以及被屏蔽，handsome的vditor静态资源使用的是jsdelivr的CDN，因此更换jsdelivr。 配置文件：`/usr/themes/handsome/libs/CDN.php` ``` https://cdn.jsdelivr.net/npm/vditor@3.8.10 ``` 替换为 ``` https://jsd.sorkai.com/web/npm/vditor@3.8.10 ``` <p></p></div></div></div> ## 配置Google Analytics <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1a16e71bf380bd8a769b8eb6cba815c173" aria-expanded="true"><div class="accordion-toggle"><span>配置Google Analytics</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-1a16e71bf380bd8a769b8eb6cba815c173" class="collapse collapse-content"><p></p> 在文件： `/usr/themes/handsome/component/header.php` `<head>`下添加谷歌统计代码： ``` <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-KRWHE9WXLD"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-KRWHE9WXLD'); </script> ``` <p></p></div></div></div> ## 友链页面优化 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-62334336eee129f02dc75ccbddc96b6685" aria-expanded="true"><div class="accordion-toggle"><span>友链页面优化</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-62334336eee129f02dc75ccbddc96b6685" class="collapse collapse-content"><p></p> **源码完全参考全站友链作者[kano酱-【备忘】Handsome主题修改记录](https://kanochan.net/archives/1003.html)**。 文件路径：`/usr/themes/handsome/links.php` ``` <?php /** * 友情链接 * * @package custom */ if (!defined('__TYPECHO_ROOT_DIR__')) exit; $this->need('component/header.php'); ?> <style type="text/css"> </style> <!-- aside --> <?php $this->need('component/aside.php'); ?> <!-- / aside --> <!-- <div id="content" class="app-content"> --> <a class="off-screen-toggle hide"></a> <main class="app-content-body <?php Content::returnPageAnimateClass($this); ?>"> <div class="hbox hbox-auto-xs hbox-auto-sm"> <div class="col center-part" id="post-panel"> <div class="bg-light lter wrapper-md"> <h1 class="entry-title m-n font-thin text-black l-h"><span class="title-icons"><i data-feather="link"></i></span><?php _me ("海内存知己，天涯若比邻") ?></h1> <?php if (trim($this->fields->intro) !== ""): ?> <div class="entry-meta text-muted m-b-none small post-head-icon"><?php echo $this->fields->intro; ?></div> <?php endif ?> </div> <div class="wrapper-md"> <div class="tab-container post_tab"> <div class="tab-content"> <!-- list --> <div id="my-info" class="tab-pane fade in active"> <?php echo Content::returnLinkList("ten","tab_4"); ?> <div class="wrapper ng-binding" id="post-content"> <?php Content::postContentHtml($this,$this->user->hasLogin()); ?> </div> <!--评论--> <div class="bg-white wrapper border-radius-6"> <?php $this->need('component/comments.php') ?> </div> </div> </div> </div> </div> </div> <!--首页右侧栏--> <?php $this->need('component/sidebar.php') ?> </div> <!-- /content --> </main> <!-- footer --> <?php $this->need('component/footer.php'); ?> <!-- / footer --> ``` <p></p></div></div></div> --- **2022年3月25日更新分割线** --- **本文引用自全站友链作者[Lime's Blog - Handsome美化记录](https://blog.qninq.cn/archives/handsome.html)** ## 主题标题居中 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-2cbbcf26c3b9cd7d586b000b449f9d5b84" aria-expanded="true"><div class="accordion-toggle"><span>主题标题居中</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-2cbbcf26c3b9cd7d586b000b449f9d5b84" class="collapse collapse-content"><p></p> ### 效果  ### 步骤 开发者设置➡自定义CSS ``` /*主题标题居中*/ header.bg-light.lter.wrapper-md { text-align: center; } ``` <p></p></div></div></div> ## 多彩标签云 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-4f9469479add0de502f661f68813b63e5" aria-expanded="true"><div class="accordion-toggle"><span>多彩标签云</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-4f9469479add0de502f661f68813b63e5" class="collapse collapse-content"><p></p> ### 效果  ### 步骤 开发者设置➡自定义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; }); ``` <p></p></div></div></div> ## 博客信息多彩数字 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f1dda5ac6e61bea9e07da482aa1e3ee153" aria-expanded="true"><div class="accordion-toggle"><span>博客信息多彩数字</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-f1dda5ac6e61bea9e07da482aa1e3ee153" class="collapse collapse-content"><p></p> ### 效果  ### 步骤 开发者设置➡自定义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 } } ``` <p></p></div></div></div> ## 左侧导航栏多彩图标 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-bfec870d34c1cb3d1608a6d4d012c04765" aria-expanded="true"><div class="accordion-toggle"><span>左侧导航栏多彩图标</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-bfec870d34c1cb3d1608a6d4d012c04765" class="collapse collapse-content"><p></p> ### 效果  ### 步骤 开发者设置➡自定义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}); ``` <p></p></div></div></div> ## 右侧滚动条美化 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-6f09689dfb92322dd24564b0ea986fe524" aria-expanded="true"><div class="accordion-toggle"><span>右侧滚动条美化</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-6f09689dfb92322dd24564b0ea986fe524" class="collapse collapse-content"><p></p> ### 步骤 开发者设置➡自定义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 } ``` <p></p></div></div></div> ## 复制弹窗提醒 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1f7a6fb59db6b8f432d884335fce3c4328" aria-expanded="true"><div class="accordion-toggle"><span>复制弹窗提醒</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-1f7a6fb59db6b8f432d884335fce3c4328" class="collapse collapse-content"><p></p> ### 效果  ### 步骤 开发者设置➡自定义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> 本文作者：MatthewLXJ'Blog<br>原文链接："+sitesurl, title: "复制成功", type: "warning", autoHide: !1, time: "3000" }) }} /* 复制成功提示代码结束 */ ``` <p></p></div></div></div> ## 右侧导航栏美化 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e942607065c6ceba5dd8c7556f9cc16494" aria-expanded="true"><div class="accordion-toggle"><span>右侧导航栏美化</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-e942607065c6ceba5dd8c7556f9cc16494" class="collapse collapse-content"><p></p> ### 效果  ### 步骤 ``` /*右侧导航栏*/ .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;} ``` <p></p></div></div></div> ## 底部页脚美化 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c0cf282ac4145cc4091f850dadb971395" aria-expanded="true"><div class="accordion-toggle"><span>底部页脚美化</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-c0cf282ac4145cc4091f850dadb971395" class="collapse collapse-content"><p></p> ### 效果  ### 步骤 `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> ``` <p></p></div></div></div> ## 博客字体美化 [ZFonts](https://blog.qninq.cn/archives/ZFonts.html) ## Logo扫光效果 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-3be3ec36dc42d91c3ac197b95acfff1315" aria-expanded="true"><div class="accordion-toggle"><span>Logo扫光效果</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-3be3ec36dc42d91c3ac197b95acfff1315" class="collapse collapse-content"><p></p> ### 步骤 开发者设置➡自定义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;}} ``` <p></p></div></div></div> ## 粗体上色 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-339a7ce946fb25dddf92e3e9004389da11" aria-expanded="true"><div class="accordion-toggle"><span>粗体上色</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-339a7ce946fb25dddf92e3e9004389da11" class="collapse collapse-content"><p></p> ### 效果 **粗体上色，颜色可自定义修改** ### 步骤 开发者设置➡自定义CSS ``` /* 粗体上色 */ strong{ color: rgb(230, 145, 56); } ``` <p></p></div></div></div> ## handsome原生入站提示 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-4f499443b831c23d387b86b29292d77559" aria-expanded="true"><div class="accordion-toggle"><span>handsome原生入站提示</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-4f499443b831c23d387b86b29292d77559" class="collapse collapse-content"><p></p> ### 效果：  ### 步骤 自定义输出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> ``` <p></p></div></div></div> 最后修改：2022 年 04 月 13 日 © 允许规范转载 赞 1 如果觉得我的文章对你有用，请随意赞赏
2 条评论
用的jsdelivr cdn太慢了，文章首次打开加载时间很长。
我看看怎么加快下速度