前言
接上一篇，我们已成功安装typecho程序来「强力驱动」我们网站
这一期我们来美化自己的网站
演示站点：https://yzyee.cn/
选择主题
这里我们选择handsome主题
1.精心搭配和设计的纯白色调，适应各个设备和分辨率。十四种色调、多种布局可以随心切换。 ——— 引自ihewro.com
2. handsome 时光机支持网页端、手机端、微信公众号、浏览器、chrome、Firefox、edge浏览器扩展，让你随时随时记录。 ——— 引自ihewro.com
3. handsome主题首次将vditor 现代化markdown编辑器移植入typecho博客，完美支持附件上传和主题的相应功能，让图片上传、文字写作变得更加舒畅。 ——— 引自ihewro.com
4. 喜欢变化，不拘泥于已有的设置，handsome后台设置让一切变得更简单。
5. 使用人数众多，美化教程多样，使用教程丰富
Handsome为付费主题，官方及购买地址（唯一！！）
安装主题
下载主题文件，一般为压缩包，解压得到主题文件夹；
将主题目录上传至 Typecho 网站目录的 usr/themes 文件夹里；
进入网站后台：控制台 → 外观，启用该主题即可。
提醒
可参考这期文章来为文章做图床
美化记录
1. 博客底部右侧信息
展示网站云计算提供商，备案号，版权等信息
将一下代码放置在 设置外观=>开发者设置=>博客底部右侧信息内
<div class="github-badge">
<span class="badge-subject"><i class="iconfont icon-tengxunyun"></i>本站由</span>
<a href="https://rainyun.com" target="_blank">
<span class="badge-value bg-blue">雨云提供服务</span>
</a>
</div>
<div class="github-badge">
<span class="badge-subject"><i class="iconfont icon-beian"></i>Copyright</span>
<a href="#" target="_blank">
<span class="badge-value bg-orange"> © 2023 夜盏小窝</div>
</div>
将一下代码放置在 设置外观=>开发者设置=>自定义CSS内
/*底部页脚css*/
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
/*background-color: #abbac3;*/
background-color:#4d4d4d;
margin-bottom: 5px;
text-shadow:0px 0.86px 0.2px #3333336b;
}
.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: #00a1fd;
}
.github-badge .bg-orange {
background-color: #ffa500;
}
.github-badge .bg-green {
background-color: #3bca6e;
}
.github-badge .bg-purple{
background-color:#ab34e9;
}
.github-badge .bg-red{
background-color:#ff1010;
}
.glyphicon-fire {
color: #ff0000;
}
.nav-tabs-alt .glyphicon-comment {
color: #495dc3;
}
.glyphicon-transfer {
color: #0e5458;
}
@media (max-width:767px) {
#tabs-4,#tag_cloud-2 {
display: none;
}
}
2.赞赏按钮跳动
将一下代码放置在 设置外观=>开发者设置=>自定义CSS内
/*赞赏按钮跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from { transform: scale(1); }
to { transform: scale(1.1); }
}
3.左侧彩色图标&右侧彩色标签云
将一下代码放置在 设置外观=>PJAX=>PJAX回调函数内
此美化教程来自猫不吃鱼-Handsome主题美化记录，如有侵权请留言删除！
//左侧图标多彩
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr=["#ff3300","#ff3399","#54d100","#9900cc","#0033ff","#FF6699","#FF33FF","#ff8100","#33CC00","#FF1493","#8A2BE2","#8B3E2F","#00CC33"];
leftHeader.forEach(
tag=>{
tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];
tag.style.color=tagsColor
}
);
// 右侧彩色标签云
let tags = document.querySelectorAll("#tag_cloud a,#tag_cloud-post a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#0089ff", "#00c919", "#ff4747", "#c052ff", "#ff8939","#ff1200","#ff3399","#ffde00","#6000ff"];
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
}
}
$(function(){
$("#PageLoading").fadeOut(400);
$("#body").css('overflow','');
});
4.禁用F12
将一下代码放置在 设置外观=>开发者设置=>JavaScript内
document.onkeydown = function(){
if(window.event && window.event.keyCode == 123) {
layer.msg("F12被禁用");
event.keyCode=0;
event.returnValue=false;
}
}
5.看板娘插件
此为猫不吃鱼大佬魔改而成，请大家移步佬的文章进行下载文章/下载地址