Typecho美化记录
更新优化记录,参考全站友链作者kano酱-【备忘】Handsome主题修改记录
vditor静态资源加速
vditor静态资源加速
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
配置Google Analytics
配置Google Analytics
在文件:
/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>
友链页面优化
友链页面优化
源码完全参考全站友链作者kano酱-【备忘】Handsome主题修改记录。
文件路径:/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 -->
2022年3月25日更新分割线
本文引用自全站友链作者Lime's Blog - Handsome美化记录
主题标题居中
主题标题居中
效果
步骤
开发者设置➡自定义CSS
/*主题标题居中*/
header.bg-light.lter.wrapper-md {
text-align: center;
}
多彩标签云
多彩标签云
效果
步骤
开发者设置➡自定义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
}
}
左侧导航栏多彩图标
左侧导航栏多彩图标
效果
步骤
开发者设置➡自定义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
}
复制弹窗提醒
复制弹窗提醒
效果
步骤
开发者设置➡自定义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"
})
}}
/* 复制成功提示代码结束 */
右侧导航栏美化
右侧导航栏美化
效果
步骤
/*右侧导航栏*/
.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;}
底部页脚美化
底部页脚美化
效果
步骤
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扫光效果
步骤
开发者设置➡自定义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);
}
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>
2 条评论
用的jsdelivr cdn太慢了,文章首次打开加载时间很长。
我看看怎么加快下速度