说明：
本文使用的Typecho版本为1.2.1版本主题版本为：handsome 9.2.1 Pro，使用的PHP7.4，Mysql5.7.44
主题基础美化
文章收集至：https://www.5k5b.com/archives/5.html
基础设置
开启全站HTTPS
1、首先在宝塔或通过配置文件给你的网站配置好证书，并开启强制HTTPS
2、去网站后台，找到设置 -> 基本设置 -> 站点地址将其改为https开头的网址。添加GZIP压缩
这个主要是减小带宽压力，以达到加快网站加速速度的目的。
和上面的HTTPS一样，在config.inc.php内加入以下配置即可：
/** 开启gzip压缩 */
ob_start('ob_gzhandler');去掉地址栏的index.php
首先进入后台，找到 设置 - 永久链接，是否使用地址重写功能：启用，自定义文章路径：选择：wordpress风格 /archives/{slug}.html
更改前是这样的：https://lqza.cn/index.php/archives/hanbl.html
更改后是这样的：https://lqza.cn/archives/hanbl.html
使Typecho支持emoji
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;执行上述 sql语句来修改表的编码，如果用的是宝塔面板和 MySQL数据库，一般有可视化的 phpmyadmin界面，可以在 phpmyadmin的控制台里面执行上面的语句。
最后将 Typecho 目录下的 config.inc.php 配置文件中数据库定义参数中的 charset 为 utf8mb4：
$db->addServer(array (
'host' => localhost,
'user' => 'root',
'password' => 'root',
'charset' => 'utf8mb4', //修改这一行
'port' => 3306,
'database' => ''
), Typecho_Db::READ | Typecho_Db::WRITE);添加左侧导航
以下代码放在 后台-外观设置-高级设置-左侧边栏导航内容请自行更改
{"name":"名称","class":"图标","link":"链接位置","target":"_blank"}
{"name":"名称","class":"图标","link":"链接位置","target":"_blank"}自定义音乐播放器音量
后台-设置外观-开发者设置-自定义JS 添加以下代码
setTimeout(function (){document.querySelector(".skPlayer-source").volume=0.3;}, 3000);其中 volume=0.3为播放器音量控制，默认为 0.3支持修改范围为 0.0 - 1可自行设置
自定义CSS
该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义CSS处
部分提到PJAX回调的部分添加到主题后台-外观-外观设置-PJAX-PJAX回调函数内
文章标题居中
/*首页标题文字居中*/
.m-t-none.text-ellipsis.index-post-title.text-title
{
text-align:center !important;
}首页标题文字居中
/*首页标题文字居中*/ .m-t-none.text-ellipsis.index-post-title.text-title { text-align:center !important; }左上角博客LOGO/博客名称的扫光效果
/* 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;}}左上角博主信息羽毛背景
background:url后面括号里的网址就是羽毛动画的网址，你也可以把它保存下来放到自己网站的根目录的某个位置内，然后将网址改为自己的博客，防止该效果失效（也就是做了个备份的意思，当然如果你嫌麻烦也可以不做）
/* 羽毛_css */
.dropdown.wrapper {
background:url(https://您的博客网址/yumao.webp) right bottom no-repeat;
}鼠标路过头像时放大并旋转
/* 鼠标经过头像旋转放大 */
.img-circle {
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: all 0.5s;
}
.img-circle:hover {
transform: scale(1.15) rotate(720deg);
}
@keyframes light {
0% {
box-shadow: 0 0 4px #f00;
}
25% {
box-shadow: 0 0 16px #0f0;
}
50% {
box-shadow: 0 0 4px #00f;
}
75% {
box-shadow: 0 0 16px #0f0;
}
100% {
box-shadow: 0 0 4px #f00;
}
}首页文章图片获取焦点放大
/* 首页文章图片获取焦点放大 */
.item-thumb{
cursor: pointer;
transition: all 0.6s;
}
.item-thumb:hover{
transform: scale(1.05);
}
.item-thumb-small{
cursor: pointer;
transition: all 0.6s;
}
.item-thumb-small:hover{
transform: scale(1.05);
}时光机内圆形头像
顾名思义，就是将独立页面-时光机里的头像都更改为圆形(原版是方形圆角样式)
/* 时光机圆形头像 */
.img-square {border-radius: 50%;}
.list-group-item .thumb-sm .img-square {border-radius: 5px;}网站右侧滚动条样式
此处的#949494;即为滚动条的颜色，你可以去 http://tools.jb51.net/static/colorpicker/ 这个链接去找到你喜欢的颜色然后替换
注意：替换的是#后面的6位数字，#不要动\\~
/* 美化网站右侧滚动条样式 */
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-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: #949494;
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
}文章版式阴影化
可能这个项目看名称比较晦涩，其实就是你现在看到的各个边框散发的蓝(色的)光效果。
所有rgba后面的，如26, 169, 255都可以进行修改，它代表的是散发出来的颜色类型。
你同样可以去 http://tools.jb51.net/static/colorpicker/ 这个网站去选自己喜欢的颜色，但更改的时候一定注意"标点"，不要出现类似少逗号的问题哦\\~
/* 首页文章版式阴影颜色 */
.panel{
box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}
.panel:hover{
box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}
.panel-small{
box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}
.panel-small:hover{
box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}
.app.container {
box-shadow: 0 0 30px rgba(26, 169, 255, 0.35);
}右侧列表导航栏图标颜色
这一项是更改右上方三个图标(大拇指，信息，礼物)的颜色，默认是白色。
同样#后面的六位数字代表颜色，可以改\\~
/* 右侧列表导航栏图标颜色 */
.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;}
#post-content pre code {
display:block;
overflow-x:auto;
position:relative;
margin:0;
padding-left:50px;
}
pre code {
position:relative;
display:block;
overflow-x:auto;
margin:4.4px 0.px .4px 1px;
padding:0;
max-height:500px;
padding-left:3.5em
}
.img-square {
transition: all 0.3s;
}
.img-square:hover {
transform: rotate(360deg);
}
.glyphicon-fire {
color: #ff0000;
}
.nav-tabs-alt .glyphicon-comment {
color: #495dc3;
}
.glyphicon-transfer {
color: #0e5458;
}等距标签云
/*词云等距美化*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}首页文章列表悬停上浮
/*首页文章列表悬停上浮*/
.blog-post .panel:not(article) {
transition: all 0.3s;
}
.blog-post .panel:not(article):hover {
transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}赞赏按钮跳动
/*赞赏按钮跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}评论边框
/*评论边框*/
.comment-parent {
margin: 20px;
padding: 20px;
border-radius: 25px;
border: 1px solid rgba(255,255,255,.3);
}粗斜体上色
/* 粗斜体上色 */
strong{
color: #f26522;
}
em{
font-style: normal;
color: #fcaf17;
}开启全站变灰（黑白模式）
<!--开启黑白模式-->
html {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);}
html { filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1); }
html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);}
<!--黑白模式结束-->首页文章添加圆角效果
/*首页文章版式圆角化*/
.panel{
border: none;
border-radius: 15px;
}
.panel-small{
border: none;
border-radius: 15px;
}
.item-thumb{
border-radius: 15px;
}修改h1，h2标题背景颜色
/*文章页h标签背景颜色修改*/
#post-content h1, #post-content h2 {
background : linear-gradient(to bottom,transparent 60%,rgba(0,191,255,.3) 0) no-repeat
}手机端不显示热门文章和标签云
/*手机不显示*/
@media (max-width:767px) {
#tabs-4,#tag_cloud-2 {
display: none;
}
}自定义JavaScripts
该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义 JavaScript处
复制成功提示
使用方法：
复制下面代码到 handsome主题>设置外观>开发者设置>自定义 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: "5000"
})
}}
/* 复制成功提示代码结束 */复制文章带有文章版权
使用方法：
复制下面代码到 handsome主题>设置外观>开发者设置>自定义 JavaScript
/* 复制文章自动带版权开始 */
document.body.addEventListener('copy', function (e) {
if (window.getSelection().toString() && window.getSelection().toString().length > 42) {
setClipboardText(e);
notie({
type: 'info',
text: '商业转载请联系作者获得授权，非商业转载请注明出处，谢谢合作。',
autoHide: true
})
}
});
function setClipboardText(event) {
var clipboardData = event.clipboardData || window.clipboardData;
if (clipboardData) {
event.preventDefault();
var htmlData = ''
+ '著作权归作者所有。<br>'
+ '商业转载请联系作者获得授权，非商业转载请注明出处！<br>'
+ '本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！<br>'
+ '作者：陌独<br>'
+ '链接：' + window.location.href + '<br>'
+ '来源：https://lqza.cn/<br><br>'
+ window.getSelection().toString();
var textData = ''
+ '著作权归作者所有。\n'
+ '商业转载请联系作者获得授权，非商业转载请注明出处！\n'
+ '本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！\n'
+ '作者：陌独\n'
+ '链接：' + window.location.href + '\n'
+ '来源：https://lqza.cn/\n\n'
+ window.getSelection().toString();
clipboardData.setData('text/html', htmlData);
clipboardData.setData('text/plain',textData);
}
}
/* 复制文章自动带版权结束 */鼠标点击特效-爱心样式
//鼠标点击出现爱心特效
(function(window,document,undefined){
var hearts = [];
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback){
setTimeout(callback,1000/60);
}
})();
init();
function init(){
css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
}
function gameloop(){
for(var i=0;i<hearts.length;i++){
if(hearts[i].alpha <=0){
document.body.removeChild(hearts[i].el);
hearts.splice(i,1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent(){
var old = typeof window.onclick==="function" && window.onclick;
window.onclick = function(event){
old && old();
createHeart(event);
}
}
function createHeart(event){
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el : d,
x : event.clientX - 5,
y : event.clientY - 5,
scale : 1,
alpha : 1,
color : randomColor()
});
document.body.appendChild(d);
}
function css(css){
var style = document.createElement("style");
style.type="text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor(){
return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
}
})(window,document);网站加载完成提示
/* 网站加载完成提示开始 */
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"
})
/* 网站加载完成提示结束 */左侧图标颜色和彩色标签云
/* 左侧图标颜色and彩色标签云 */
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
}
}
let leftHeader = document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr = ["#FF69B4", "#58c7ea", "#E066FF", "#FF69B4", "#FFA54F", "#90EE90"];
leftHeader.forEach(tag => {
tagsColor = leftHeaderColorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.color = tagsColor;
});如果你博客开启了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
}
}打字动画效果（代码实现）
/* 打字动效 */
(function webpackUniversalModuleDefinition(a,b){if(typeof exports==="object"&&typeof module==="object"){module.exports=b()}else{if(typeof define==="function"&&define.amd){define([],b)}else{if(typeof exports==="object"){exports["POWERMODE"]=b()}else{a["POWERMODE"]=b()}}}})(this,function(){return(function(a){var b={};function c(e){if(b[e]){return b[e].exports}var d=b[e]={exports:{},id:e,loaded:false};a[e].call(d.exports,d,d.exports,c);d.loaded=true;return d.exports}c.m=a;c.c=b;c.p="";return c(0)})([function(c,g,b){var d=document.createElement("canvas");d.width=window.innerWidth;d.height=window.innerHeight;d.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999";window.addEventListener("resize",function(){d.width=window.innerWidth;d.height=window.innerHeight});document.body.appendChild(d);var a=d.getContext("2d");var n=[];var j=0;var k=120;var f=k;var p=false;o.shake=true;function l(r,q){return Math.random()*(q-r)+r}function m(r){if(o.colorful){var q=l(0,360);return"hsla("+l(q-10,q+10)+", 100%, "+l(50,80)+"%, "+1+")"}else{return window.getComputedStyle(r).color}}function e(){var t=document.activeElement;var v;if(t.tagName==="TEXTAREA"||(t.tagName==="INPUT"&&t.getAttribute("type")==="text")){var u=b(1)(t,t.selectionStart);v=t.getBoundingClientRect();return{x:u.left+v.left,y:u.top+v.top,color:m(t)}}var s=window.getSelection();if(s.rangeCount){var q=s.getRangeAt(0);var r=q.startContainer;if(r.nodeType===document.TEXT_NODE){r=r.parentNode}v=q.getBoundingClientRect();return{x:v.left,y:v.top,color:m(r)}}return{x:0,y:0,color:"transparent"}}function h(q,s,r){return{x:q,y:s,alpha:1,color:r,velocity:{x:-1+Math.random()*2,y:-3.5+Math.random()*2}}}function o(){var t=e();var s=5+Math.round(Math.random()*10);while(s--){n[j]=h(t.x,t.y,t.color);j=(j+1)%500}f=k;if(!p){requestAnimationFrame(i)}if(o.shake){var r=1+2*Math.random();var q=r*(Math.random()>0.5?-1:1);var u=r*(Math.random()>0.5?-1:1);document.body.style.marginLeft=q+"px";document.body.style.marginTop=u+"px";setTimeout(function(){document.body.style.marginLeft="";document.body.style.marginTop=""},75)}}o.colorful=false;function i(){if(f>0){requestAnimationFrame(i);f--;p=true}else{p=false}a.clearRect(0,0,d.width,d.height);for(var q=0;q<n.length;++q){var r=n[q];if(r.alpha<=0.1){continue}r.velocity.y+=0.075;r.x+=r.velocity.x;r.y+=r.velocity.y;r.alpha*=0.96;a.globalAlpha=r.alpha;a.fillStyle=r.color;a.fillRect(Math.round(r.x-1.5),Math.round(r.y-1.5),3,3)}}requestAnimationFrame(i);c.exports=o},function(b,a){(function(){var d=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"];var e=window.mozInnerScreenX!=null;function c(k,l,o){var h=o&&o.debug||false;if(h){var i=document.querySelector("#input-textarea-caret-position-mirror-div");if(i){i.parentNode.removeChild(i)}}var f=document.createElement("div");f.id="input-textarea-caret-position-mirror-div";document.body.appendChild(f);var g=f.style;var j=window.getComputedStyle?getComputedStyle(k):k.currentStyle;g.whiteSpace="pre-wrap";if(k.nodeName!=="INPUT"){g.wordWrap="break-word"}g.position="absolute";if(!h){g.visibility="hidden"}d.forEach(function(p){g[p]=j[p]});if(e){if(k.scrollHeight>parseInt(j.height)){g.overflowY="scroll"}}else{g.overflow="hidden"}f.textContent=k.value.substring(0,l);if(k.nodeName==="INPUT"){f.textContent=f.textContent.replace(/\s/g,"\u00a0")}var n=document.createElement("span");n.textContent=k.value.substring(l)||".";f.appendChild(n);var m={top:n.offsetTop+parseInt(j["borderTopWidth"]),left:n.offsetLeft+parseInt(j["borderLeftWidth"])};if(h){n.style.backgroundColor="#aaa"}else{document.body.removeChild(f)}return m}if(typeof b!="undefined"&&typeof b.exports!="undefined"){b.exports=c}else{window.getCaretCoordinates=c}}())}])});
POWERMODE.colorful=true;POWERMODE.shake=false;document.body.addEventListener("input",POWERMODE);添加复制弹窗
<!-- 复制样式CSS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>然后将以下代码加到 自定义JavaScripts，文字部分可以自行更改
/* 复制效果 */
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请自定义body
该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义输出body 尾部的HTML代码处
万能的控制台
<!--输出控制台-->
<script type="text/javascript">
console.clear(); //清空控制台
console.log("\n %c ModuのBlog 控制台--我还不知道写什么","color:#fff;background: linear-gradient(to right , #7A88FF, #d27aff);padding:5px;border-radius: 10px;"); //万能控制台，可写html代码
</script>自定义右键菜单美化
注意：一定首先在 主题后台-外观-设置外观-开发者设置-自定义输出head 头部的HTML代码位置添加以下代码。如果不添加将不会显
<!-- 图标添加 -->
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">加完之后再将下面的代码放到 自定义输出body 尾部的HTML代码处
另外，一定要把代码里的网址改成自己的！！\\~
<!-- 自定义右键菜单美化 -->
<style type="text/css">
a {text-decoration: none;}
div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
div.usercm ul li a{color:#666;padding:0 15px;display:block}
div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
div.usercm ul li a i{margin-right:10px}
a.disabled{color:#c8c8c8!important;cursor:not-allowed}
a.disabled:hover{background-color:rgba(255,11,11,0)!important}
div.usercm{background:#fff !important;}
</style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
<ul>
<li><a href="放你网站的对应网址"><i class="fa fa-home"></i><span>首页</span></a></li>
<li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy"></i><span>复制</span></a></li>
<li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search"></i><span>搜索</span></a></li>
<li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right"></i><span>前进</span></a></li>
<li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left"></i><span>后退</span></a></li>
<li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh"></i><span>重载网页</span></a></li>
<li><a href="放你网站的对应网址"><i class="fa fa-meh-o"></i><span>和我当邻居</span></a></li>
<li><a href="放你网站的对应网址"><i class="fa fa-pencil-square-o"></i><span>给我留言吧</span></a></li>
</ul>
</div>
<script type="text/javascript">
(function(a) {
a.extend({
mouseMoveShow: function(b) {
var d = 0,
c = 0,
h = 0,
k = 0,
e = 0,
f = 0;
a(window).mousemove(function(g) {
d = a(window).width();
c = a(window).height();
h = g.clientX;
k = g.clientY;
e = g.pageX;
f = g.pageY;
h + a(b).width() >= d && (e = e - a(b).width() - 5);
k + a(b).height() >= c && (f = f - a(b).height() - 5);
a("html").on({
contextmenu: function(c) {
3 == c.which && a(b).css({
left: e,
top: f
}).show()
},
click: function() {
a(b).hide()
}
})
})
},
disabledContextMenu: function() {
window.oncontextmenu = function() {
return !1
}
}
})
})(jQuery);
function getSelect() {
"" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢！") : document.execCommand("Copy")
}
function baiduSearch() {
var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
"" == a ? layer.msg("啊噢...你没还没选择文字呢！") : window.open("https://www.baidu.com/s?wd=" + a)
}
$(function() {
for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
d = !1;
break
}
d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
});
<script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>
</script>
<!-- 自定义右键菜单美化 -->防止他人F12抓你代码
首先要说，这个功能防君子不防小人。所以真的会扒你网站代码的人总是会有办法的(就不告诉你)。
提示内容可以自行修改哦
<!-- 防调试 -->
<script type="text/javascript">
$(document).ready(function () {
document.oncontextmenu = function () {
return false;
}
//document.onselectstart = function () {
// return false;
// }
//document.oncopy = function () {
//return false;
// }
document.onkeydown = function () {
//f12
if (window.event && window.event.keyCode == 123) {
event.keyCode = 0;
event.returnValue = false;
layer.msg("球球了，别再扒孩子了=.=")
return false;
}
//ctrl+u
if (event.ctrlKey && window.event.keyCode == 85) {
return false;
}
//ctrl+shift+i
if ((event.ctrlKey) && (event.shiftKey) && (event.keyCode == 73)) {
return false;
}
// Ctrl+S
else if ((event.ctrlKey) && (event.keyCode == 83)) {
return false;
}
};
});
</script>
<script>
//debug调试时跳转页面
var element = new Image();
Object.defineProperty(element,'id',{get:function(){window.location.href="https://www.5k5b.com"}});
console.log(element);
</script>顶部导航栏添加网页动态滚动进度条|滚动指示器
使用方法
将以下代码加到 后台设置->自定义输出head 头部的HTML代码
<!--动态滚动进度条-->
<div class="scroll-line" style="z-index: 999;position: fixed;height: 3px;margin-top: 0px;background-color: #6B999B;width: 0%;"></div>
<script type="text/javascript">
$(window).scroll(function() {
var winTop = $(window).scrollTop(), //滚动条的位置
docHeight = $(document).height(), //文档高度
winHeight = $(window).height(); //窗口高度
var scrolled = (winTop / (docHeight - winHeight))*100;
$('.scroll-line').css('width', (scrolled + '%'));
});
</script>需要注意的是，需要关闭后台的 固定头部和 固定导航，效果最佳，不然可能会看不到效果。
修改文件
这部分基本上全是通过修改文件来达到美化的目的，故一定要提前做好备份\\~
这部分基本上全是通过修改文件来达到美化的目的，故一定要提前做好备份\\~
这部分基本上全是通过修改文件来达到美化的目的，故一定要提前做好备份\\~
博主介绍文字动态化
将代码里的这是我的介绍这一部分修改称自己想要展示的内容即可，顺便那个❤也是可以改的，随你开心就是了
将以下代码放到 主题后台-外观-设置外观-初级设置-博主的介绍内即可
放之前记得先清空 博主的介绍栏内的所有内容
<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>给正文添加结束标识
效果就是像本博客的每篇博文正文下面有一个好看的END标识。
首先打开 网站根目录 /usr/themes/handsome的post.php文件
找到 <?php if ($this->options->adContentPost != ""): ?>（或者Ctrl+F搜索）这行代码，在其上方的空白位置添加以下代码
<!--内容结束分割线-->
<div class="tt-fenge-end">
<span>结束</span>
</div>
<!--/ 内容结束分割线-->并在改好保存后，在 自定义CSS处添加以下代码
/*文章正文下的结束End分割线样式*/
.tt-fenge-end{border-top: 2px dotted #eee;height: 0px;margin: 35px 0px;text-align: center;width: 100%;line-height: 1.6em;}
.tt-fenge-end span{background-color: #23b7e5;color: #fff;padding: 2px 8px;position: relative;top: -14px;border-radius: 12px;font-size: 12px;}
/*深色模式下文章正文下的结束End分割线颜色*/
html.theme-dark .tt-fenge-end{border-top: 2px dotted #4f4f4f;}正文下方添加版权声明
这个代码同样也是在 <?php if ($this->options->adContentPost != ""): ?>的上方
添加位置和上面正文结束功能的添加位置相同找到后添加以下代码(你也可以添加到其他你认为合适的地方)
<!--知识共享许可协议-->
<div
style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
<div class="tt-license">
<p><span class="tt-license-icon"><i data-feather="award"></i></span>本文标题：
<?php $this->title() ?>
</p>
<p><span class="tt-license-icon"><i data-feather="link"></i></span>本文链接：
<?php $this->permalink() ?>
</p>
<p><span class="tt-license-icon"><i data-feather="shield"></i></span>除非另有说明，本作品采用 <a rel="license"
href="http://creativecommons.org/licenses/by-nc-sa/4.0/"> 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>。</p>
<p><span class="tt-license-icon"><i data-feather="alert-circle"></i></span>声明：转载请注明文章来源。</p>
</div>
</div>
<!-- / 知识共享许可协议-->添加好后，在 自定义CSS中添加以下代码：
/文章正文下的知识共享许可协议/
.tt-license {font-size: 12px;font-weight: 600;padding: 1rem;background: repeating-linear-gradient(135deg,#f6f6f6,#f6f6f6 12px,#fff 0,#fff 24px);background-color: #f3f5f7;border-left: 3px solid #dde6e9;margin-bottom: 20px;}
.tt-license-icon {align-items: center;position: relative;float: left;margin: -10px -10px -10px 0;margin-right: 10px;overflow: hidden;text-align: center;display: flex;height: 40px;color: #ff5722;}
.tt-license a {color: #337ab7;text-decoration: underline;margin: 0 5px;}
/深色模式下的知识共享许可协议/
html.theme-dark .tt-license {background: repeating-linear-gradient(135deg,#191919,#191919 12px,#222 0,#222 24px);border-left: 3px solid #494949;}.tt-license p {line-height: 1.5em;margin: 5px 0!important;}右侧添加人生倒计时(岁月不待人)
首先找到网站根目录 /usr/themes/handsome/component
打开 sidebar.php文件，找到 <!--广告位置-->这一行内容。
在该内容向上两行找到 <?php endif; ?>，在该行紧接着下面添加如下代码：
<!-- 时间倒计时代码开始 -->
<section id="blog_info" class="widget widget_categories wrapper-md clear">
<h5 class="widget-title m-t-none text-md">
<?php _me("岁月不待人") ?>
</h5>
<div class="sidebar sidebar-count">
<div class="content">
<div class="item" id="dayProgress">
<div class="title">今日已经过去<span></span>小时</div>
<div class="progress">
<div class="progress-bar">
<div class="progress-inner progress-inner-1"></div>
</div>
<div class="progress-percentage"></div>
</div>
</div>
<div class="item" id="weekProgress">
<div class="title">这周已经过去<span></span>天</div>
<div class="progress">
<div class="progress-bar">
<div class="progress-inner progress-inner-2"></div>
</div>
<div class="progress-percentage"></div>
</div>
</div>
<div class="item" id="monthProgress">
<div class="title">本月已经过去<span></span>天</div>
<div class="progress">
<div class="progress-bar">
<div class="progress-inner progress-inner-3"></div>
</div>
<div class="progress-percentage"></div>
</div>
</div>
<div class="item" id="yearProgress">
<div class="title">今年已经过去<span></span>个月</div>
<div class="progress">
<div class="progress-bar">
<div class="progress-inner progress-inner-4"></div>
</div>
<div class="progress-percentage"></div>
</div>
</div>
</div>
</div>
</section>
<!-- 时间倒计时代码结束 -->改好后保存退出，进入网站根目录 /usr/themes/handsome/assets/js/的文件夹
创建一个名为 timeinfo.js的文件，并将以下代码放进该文件后，保存并退出
function init_life_time() {
function getAsideLifeTime() {
/* 当前时间戳 */
let nowDate = +new Date();
/* 今天开始时间戳 */
let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
/* 今天已经过去的时间 */
let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60;
/* 今天已经过去的时间比 */
let todayPassHoursPercent = (todayPassHours / 24) * 100;
$('#dayProgress .title span').html(parseInt(todayPassHours));
$('#dayProgress .progress .progress-inner').css('width', parseInt(todayPassHoursPercent) + '%');
$('#dayProgress .progress .progress-percentage').html(parseInt(todayPassHoursPercent) + '%');
/* 当前周几 */
let weeks = {
0: 7,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
6: 6
};
let weekDay = weeks[new Date().getDay()];
let weekDayPassPercent = (weekDay / 7) * 100;
$('#weekProgress .title span').html(weekDay);
$('#weekProgress .progress .progress-inner').css('width', parseInt(weekDayPassPercent) + '%');
$('#weekProgress .progress .progress-percentage').html(parseInt(weekDayPassPercent) + '%');
let year = new Date().getFullYear();
let date = new Date().getDate();
let month = new Date().getMonth() + 1;
let monthAll = new Date(year, month, 0).getDate();
let monthPassPercent = (date / monthAll) * 100;
$('#monthProgress .title span').html(date);
$('#monthProgress .progress .progress-inner').css('width', parseInt(monthPassPercent) + '%');
$('#monthProgress .progress .progress-percentage').html(parseInt(monthPassPercent) + '%');
let yearPass = (month / 12) * 100;
$('#yearProgress .title span').html(month);
$('#yearProgress .progress .progress-inner').css('width', parseInt(yearPass) + '%');
$('#yearProgress .progress .progress-percentage').html(parseInt(yearPass) + '%');
}
getAsideLifeTime();
setInterval(() => {
getAsideLifeTime();
}, 1000);
}
init_life_time()以下代码放在 后台-外观设置-开发者设置-自定义CSS
/* 时间流逝 */
.sidebar-count .content {
padding: 15px
}
.sidebar-count .content .item {
margin-bottom: 15px
}
.sidebar-count .content .item:last-child {
margin-bottom: 0
}
.sidebar-count .content .item .title {
font-size: 12px;
color: var(--minor);
margin-bottom: 5px;
display: flex;
align-items: center
}
.sidebar-count .content .item .title span {
color: var(--theme);
font-weight: 500;
font-size: 14px;
margin: 0 5px
}
.sidebar-count .content .item .progress {
display: flex;
align-items: center
}
.sidebar-count .content .item .progress .progress-bar {
height: 10px;
border-radius: 5px;
overflow: hidden;
background: var(--classC);
width: 0;
min-width: 0;
flex: 1;
margin-right: 5px
}
@keyframes progress {
0% {
background-position: 0 0
}
100% {
background-position: 30px 0
}
}
.sidebar-count .content .item .progress .progress-bar .progress-inner {
width: 0;
height: 100%;
border-radius: 5px;
transition: width 0.35s;
-webkit-animation: progress 750ms linear infinite;
animation: progress 750ms linear infinite
}
.sidebar-count .content .item .progress .progress-bar .progress-inner-1 {
background: #bde6ff;
background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
background-size: 30px 30px
}
.sidebar-count .content .item .progress .progress-bar .progress-inner-2 {
background: #ffd980;
background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
background-size: 30px 30px
}
.sidebar-count .content .item .progress .progress-bar .progress-inner-3 {
background: #ffa9a9;
background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
background-size: 30px 30px
}
.sidebar-count .content .item .progress .progress-bar .progress-inner-4 {
background: #67c23a;
background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
background-size: 30px 30px
}
.sidebar-count .content .item .progress .progress-percentage {
color: var(--info)
}最后一步,将以下代码放在 后台-外观设置-开发者设置-自定义输出body尾部
<!-- 时间流逝 -->
<script src="https://你的域名/usr/themes/handsome/assets/js/timeinfo.js"></script>步骤均完成后，即可去查看效果了\\~
取消时光机文字首字放大效果
修改 usr/themes/handsome/component/say.php文件，将以下代码注释掉
#talk .streamline>.comment-list > .comment-body >.time-machine > .panel-body p:first-letter {
font-size: 140%;
/* float: left; */
vertical-align: middle;
}信息统计增加全站字数、在线人数、响应耗时和访客总数
首先将以下代码加到 /usr/themes/handsome/libs/Content.php中，放在 class Content的上面
/*访问总量*/
function theAllViews(){
$db = Typecho_Db::get();
$row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
echo number_format($row[0]['SUM(VIEWS)']);
}
/*响应时间*/
function timer_start() {
global $timestart;
$mtime = explode( ' ', microtime() );
$timestart = $mtime[1] + $mtime[0];
return true;
}
timer_start();
function timer_stop( $display = 0, $precision = 3 ) {
global $timestart, $timeend;
$mtime = explode( ' ', microtime() );
$timeend = $mtime[1] + $mtime[0];
$timetotal = number_format( $timeend - $timestart, $precision );
$r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
if ( $display ) {
echo $r;
}
return $r;
}
/**
* 全站字数
*/
function allOfCharacters() {
$chars = 0;
$db = Typecho_Db::get();
$select = $db ->select('text')->from('table.contents');
$rows = $db->fetchAll($select);
foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
$unit = '';
if($chars >= 10000) { $chars /= 10000; $unit = '万'; }
else if($chars >= 1000) { $chars /= 1000; $unit = '千'; }
$out = sprintf('%.2lf %s',$chars, $unit);
return $out;
}
/**
* 在线人数
*/
function online_users() {
$filename='online.txt'; //数据文件
$cookiename='Nanlon_OnLineCount'; //Cookie名称
$onlinetime=30; //在线有效时间
$online=file($filename);
$nowtime=$_SERVER['REQUEST_TIME'];
$nowonline=array();
foreach($online as $line){
$row=explode('|',$line);
$sesstime=trim($row[1]);
if(($nowtime - $sesstime)<=$onlinetime){
$nowonline[$row[0]]=$sesstime;
}
}
if(isset($_COOKIE[$cookiename])){
$uid=$_COOKIE[$cookiename];
}else{
$vid=0;
do{
$vid++;
$uid='U'.$vid;
}while(array_key_exists($uid,$nowonline));
setcookie($cookiename,$uid);
}
$nowonline[$uid]=$nowtime;
$total_online=count($nowonline);
if($fp=@fopen($filename,'w')){
if(flock($fp,LOCK_EX)){
rewind($fp);
foreach($nowonline as $fuid=>$ftime){
$fline=$fuid.'|'.$ftime."\n";
@fputs($fp,$fline);
}
flock($fp,LOCK_UN);
fclose($fp);
}
}
echo "$total_online";
}然后在 /usr/themes/handsome/component/sidebar.php文件内，找到合适和位置添加以下代码： 注：<!--博客信息-->处就是添加代码的地方，（在这些同样代码的中间回车出一行再插入，不要放在最后或者最前面不然会报错）
<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-3"></i></span><span class="badge pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>
<li class="list-group-item"> <i class="glyphicon glyphicon-user text-muted text-muted"></i> <span class="badge pull-right"><?php echo online_users() ?></span><?php _me("在线人数") ?></li>
<li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="users"></i></span>
<span class="badge
pull-right"><?php echo theAllViews(); ?></span><?php _me("访客总数") ?></li>
<li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="refresh-ccw"></i></span>
<span class="badge
pull-right"><?php echo timer_stop(); ?></span><?php _me("响应耗时") ?></li>底部版权美化
左侧底部放在 后台-开发者设置-博客底部左侧信息
<!--左侧底部-->
<div class="github-badge">
<span class="badge-subject">Copyright</span>
<a href="https://lqza.cn" target="_blank">
<span class="badge-value bg-blue">©2024 Modu</span>
</a>
</div> |
<div class="github-badge">
<span class="badge-subject">桂ICP备</span>
<a href="http://beian.miit.gov.cn/" target="_blank">
<span class="badge-value bg-green">2024034040号</span></a>
</div>
|
<!-- 建站时间 -->
<div class="github-badge">
<span class="badge-subject">运行时间</span>
<span class="badge-value bg-green"><span id="span_dt_dt"></span></span>
<script>
/*建站时间*/
function show_date_time() {
window.setTimeout("show_date_time()", 1e3);
var BirthDay = new Date("2024/12/8 1:30:00"),
today = new Date,
timeold = today.getTime() - BirthDay.getTime(),
msPerDay = 864e5,
e_daysold = timeold / msPerDay,
daysold = Math.floor(e_daysold),
e_hrsold = 24 * (e_daysold - daysold),
hrsold = Math.floor(e_hrsold),
e_minsold = 60 * (e_hrsold - hrsold),
minsold = Math.floor(60 * (e_hrsold - hrsold)),
seconds = Math.floor(60 * (e_minsold - minsold));
span_dt_dt.innerHTML = daysold + "天" + hrsold + "小时" + minsold + "分" + seconds + "秒";
}
show_date_time();
</script>右侧底部放在 后台-开发者设置-博客底部右侧信息
<!--右侧底部-->
<div class="github-badge">
<span class="badge-subject">本站由</span>
<a href="https://www.huaweicloud.com/" target="_blank">
<span class="badge-value bg-blue">华为云云服务</span></a>
</div> |
<div class="github-badge">
<span class="badge-subject">Theme by</span>
<a href="https://www.ihewro.com/" target="_blank">
<span class="badge-value bg-orange">Handsome</span></a>
</div>css放在 主题设置-自定义css内
/*底部页脚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-green {
background-color: #3bca6e
}把下面代码放在主题目录 usr/themes/handsome/component/footer.php内大概在 177行，覆盖原来的即可
<footer id="footer" class="app-footer" role="footer">
<div class="wrapper bg-light">
<span class="pull-right hidden-xs text-ellipsis">
<?php $this->options->BottomInfo();
// 可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解
?>
</span>
<span class="text-ellipsis">
<?php
$this->options->BottomleftInfo(); ?>
</span>
</div>
</footer>添加网站加载效果
首先找到 /usr/themes/handsome/component/文件夹内的 header.php，将以下代码加到最后 </style>之后
<!--加载动画-->
<style>
#PageLoading {
background-color: #fff;
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
margin-top: 0px;
top: 0px;
}
#PageLoading-center {
width: 100%;
height: 100%;
position: relative;
}
#PageLoading-center-absolute {
position: absolute;
left: 50%;
top: 50%;
height: 200px;
width: 200px;
margin-top: -100px;
margin-left: -100px;
}
.object2 {
-moz-border-radius: 50% 50% 50% 50%;
-webkit-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
position: absolute;
border-left: 5px solid #FFB6C1;
border-right: 5px solid #b6def7;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
-webkit-animation: animate 2s infinite;
animation: animate 2s infinite;
}
#object_one {
left: 75px;
top: 75px;
width: 50px;
height: 50px;
}
#object_two {
left: 65px;
top: 65px;
width: 70px;
height: 70px;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
#object_three {
left: 55px;
top: 55px;
width: 90px;
height: 90px;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#object_four {
left: 45px;
top: 45px;
width: 110px;
height: 110px;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
@-webkit-keyframes animate {
50% {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes animate {
50% {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
</style>
<!--加载动画-->
<body id="body" class="fix-padding skt-loading">
<body id="body" class="fix-padding" style="overflow:hidden">
<div id="PageLoading" style="z-index:99999999;">
<div id="PageLoading-center">
<div id="PageLoading-center-absolute">
<div class="object2" id="object_four"></div>
<div class="object2" id="object_three"></div>
<div class="object2" id="object_two"></div>
<div class="object2" id="object_one"></div>
</div>
</div>
</div>
</body>
</body>加好后刷新博客会出现一直卡在加载页面的问题，我们再将以下代码放到 自定义JavaScripts里面
/* 加载动画 */
$(function(){
$("#PageLoading").fadeOut(400);
$("#body").css('overflow','');
});添加一键打卡功能
该功能在每篇博文的评论框底部
首先找到 /usr/themes/handsome/component/comments.php
将如下代码(可以直接搜 <div class="comment-form-comment form-group">)
更改为：
<div class="comment-form-comment form-group">
<label for="comment"><?php _me("评论") ?>
<span class="required text-danger">*</span></label>
<span class="required text-danger">（请使用真实邮箱地址，方便及时接收评论回复！）</span>
<textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" οnkeydοwn="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
<div class="OwO" style="display: inline;"></div>
<div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">打卡</span></div></div>
<div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div>
<div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div>
<div class="secret_comment" id="secret_comment" data-toggle="tooltip" data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">
<label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
<div class="secret_comment_check">
<label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
<input type="checkbox" id="secret_comment_checkbox">
<i></i>
</label>
</div>
</div>
</div>接着去 自定义JavaScript加入如下代码
<!--评论 打卡、赞、踩 功能-->
function a(a, b, c) {
if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();
else if (a.selectionStart || "0" == a.selectionStart) {
var l = a.selectionStart,
m = a.selectionEnd,
n = m;
c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);
c ? n += b.length + c.length : n += b.length - m + l;
l == m && c && (n -= c.length);
a.focus();
a.selectionStart = n;
a.selectionEnd = n
} else a.value += b + c, a.focus()
}
var b = (new Date).toLocaleTimeString(),
c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
daka: function() {
a(c, "滴！学生卡！打卡时间：" + b, "，请上车的乘客系好安全带~")
},
zan: function() {
a(c, " 文章写得不错，给你点个赞，继续加油哈！")
},
cai: function() {
a(c, "骚年，我怀疑你写了一篇假的文章！")
}
};在 自定义CSS处添加
/*评论一键打卡、赞、踩 */
.secret_comment {
top: 5px;
}
.OwO.OwO-open .OwO-body {
display:table
}小版图模式下列表美化(小图斜切效果)
这个项目就是将博客首页的小图模式下的栏目做一个斜切效果，具体可以看我博客首页的效果。
或者新建一个 .html文件，添加如下代码来预览效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.li-box{position:relative;z-index:1;display:flex;overflow:hidden;margin-top:50px;margin-right:auto;margin-left:auto;width:800px;background-color:#333;color:#fff}
.left-img{z-index:1;display:flex;margin:0;width:30%;height:190px;-webkit-clip-path:polygon(0 0,95% 0,100% 100%,0 100%);clip-path:polygon(0 0,95% 0,100% 100%,0 100%)}
.left-img img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.blur-img{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:14.5rem;background-position:center;background-size:cover;transform:scale(1.2);-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(1.875rem) brightness(.8);filter:blur(1.875rem) brightness(.8)}
.right-cont{z-index:1;display:flex;width:70%;text-shadow:0 .1875rem .3125rem rgb(0 0 0 / 30%);letter-spacing:.06rem;flex-direction:column;justify-content:space-between}
.right-cont a{color:inherit;text-decoration:none}
</style>
</head>
<body>
<div class="li-box">
<a class="left-img" href="#"><img src="https://img01.sogoucdn.com/app/a/200692/300_300_feedback_25fb6bfdbfe64e07bffb0ac725f9cb7b.jpg"/></a>
<div class="blur-img" style="background-image: url(https://img01.sogoucdn.com/app/a/200692/300_300_feedback_e308749875fa4b3bafc959762bacbc8b.jpg);"></div>
<div class="right-cont">
<a class="cont-title" href="#">Cesium - 开源好用的图片压缩软件</a>
<a class="cont-des">Cesium能将您的图片压缩高达90％，而不会出现明显的质量损失。你可以使用此软件将诸如JPG，JPEG，PNG，BMP或WMF等图片格式，压缩保存为JPG，PNG或BMP。</a>
<div class="cont-info"><a href="#">其它信息</a></div>
</div>
</div>
</body>
</html>注意该效果仅仅在小版图的模式下才有效果\\~
首先我们找到网站根目录 /usr/themes/handsome/libs/Content.php将
<div class="panel-small single-post box-shadow-wrap-normal">
<div class="index-post-img-small post-feature index-img-small">
<a href="{$parameterArray['linkUrl']}">
<div class="item-thumb-small lazy" {$backgroundImageHtml}>
</div>
</a>
</div>替换为
<div class="panel-small single-post box-shadow-wrap-normal tt-small-blur">
<div class="index-post-img-small post-feature index-img-small tt-left-box">
<a href="{$parameterArray['linkUrl']}">
<div class="item-thumb-small lazy tt-left-img" {$backgroundImageHtml}></div>
</a>
</div>
<div class="tt-blur-img" {$backgroundImageHtml}></div>并在 自定义CSS里面添加以下代码
/* 头图显示斜切样式 */
.tt-small-blur{position:relative;z-index:1;display:flex;overflow:hidden;background-color:#333;color:#fff;}
.tt-small-blur .tt-left-box{z-index:1;-webkit-clip-path:polygon(0 0,94% 0,100% 100%,0 100%);clip-path:polygon(0 0,94% 0,100% 100%,0 100%);}
.tt-small-blur .tt-left-img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;}
.tt-small-blur .tt-blur-img{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%;background-position:center;background-size:cover;transform:scale(1.4);-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(1.275rem) brightness(.83);filter:blur(1.275rem) brightness(.83);}
.tt-small-blur .post-meta{z-index:1;display:flex;color:inherit;flex-direction:column;justify-content:space-between;}
.tt-small-blur .text-title{color:inherit;}
.tt-small-blur .post-meta h2,.tt-small-blur .post-meta p{text-shadow:.1875rem .1875rem .3125rem #333;letter-spacing:.09rem;}
.tt-small-blur .text-muted{color:inherit;}
.tt-small-blur .post-meta {padding: 30px 30px 15px 30px;}
@media (max-width:500px){.tt-small-blur .index-post-title{display:-webkit-box;display:-moz-box;overflow:hidden;margin-bottom:2px;height:48px;text-overflow:ellipsis;white-space:normal;word-wrap:break-word;line-height:1.4;-webkit-line-clamp:2;-webkit-box-orient:vertical;-moz-line-clamp:2;-moz-box-orient:vertical;word-break:break-all;}}
@media (max-width:500px){.tt-small-blur .summary{display:none;}}
@media (max-width:380px){.tt-small-blur .post-meta{padding:10px 15px;}}
@media (min-width:768px) and (max-width: 1199px){.tt-small-blur .summary {height: 55px;}.tt-small-blur .line-lg {margin-top: 1px;margin-bottom: 1px;}}在博客顶部添加心知天气
首先去心知天气官网注册账号并申请API
之后在 /usr/themes/handsome/component/headnav.php文件中的动态日历中 <?php endif;?>下方添加以下代码
注意将API信息改成自己的
<!-- 知心天气-->
<div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>
<script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
<script>tpwidget("init", {
"flavor": "slim",
"location": "WX4FBXXFKE4F",
"geolocation": "enabled",
"language": "auto",
"unit": "c",
"theme": "chameleon",
"container": "tp-weather-widget",
"bubble": "enabled",
"alarmType": "badge",
"color": "#C6C6C6",
"uid": "公钥",
"hash": "密钥"
});
tpwidget("show");</script>
<!-- 知心结束-->404页面添加自动返回首页功能
找到 /usr/themes/handsome文件夹内的 404.php文件并打开。
在 h1 class="text-shadow text-white">404这一行下面加入以下代码：
<br>
<small class="text-muted letterspacing">
<b id="sp">2</b>秒后自动返回···<br>
<a class="text-muted letterspacing" href="#" onclick="javascript:history.go(-1);">立刻返回</a>再把下面的代码加入 404.php文件内最底下的 </body>前面
<script type="text/javascript">
onload = function(){setInterval(go, 1000);};var x=2;
function go() {x--;if(x>0) {document.getElementById("sp").innerHTML = x;}else{history.go(-1);}}
</script>文章底部添加标签
在主题目录下的 /usr/themes/handsome/post.php文件中的适当地方加入以下代码。
<!--文章底部添加标签-->
标签：<?php $this->tags('，', true, 'no tag'); ?>在文章顶部添加百度是否收录
使用方法
在 handsome/functions.php最底部添加代码
/**
* 提示文章百度是否收录
*
*/
function baidu_record() {
$url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
if(checkBaidu($url)==1){
echo "百度已收录";
}
else{
echo "<a style=\"color:red;\" rel=\"external nofollow\" title=\"点击提交收录！\" target=\"_blank\" href=\"http://zhanzhang.baidu.com/sitesubmit/index?sitename=$url\">百度未收录</a>";}
}
function checkBaidu($url) {
$url = 'http://www.baidu.com/s?wd=' . urlencode($url);
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$rs = curl_exec($curl);
curl_close($curl);
if (!strpos($rs, '没有找到')) { //没有找到说明已被百度收录
return 1;
} else {
return -1;
}
} 然后在 handsome/post.php在63行左右添加代码
<!--百度收录-->
<li><i class="glyphicon glyphicon-globe"></i> <?php echo baidu_record() ?></li>一言打字特效
第一步
先把这两个js放到：设置外观–开发者设置–自定义输出head头部的HTML代码
<script src="https://i.gordsky.cn/assets/weiyu/jquery.min.js"></script> <script src="https://i.gordsky.cn/assets/weiyu/typed.min.js"></script>第二步
把下面的js代码。复制到：设置外观–开发者设置–自定义JavaScript
function typedword(){ $.ajax({ type:"get", url:"https://api.gordsky.cn/Love/", data:{type:'json10'}, async:true, success:function(word){ var list = []; for(var i = 0 ;i < word.length ; i++){ list.push(word[i]['word']); } $("#word").typed({ strings: list, typeSpeed: 20, loop: true, backDelay: 3000, }); } }); }第三步
把下面的html代码复制到：设置外观–初级设置–首页一行文字介绍
<p><i style="color:red;" class="glyphicon glyphicon-heart" aria-hidden="true"></i><span id="word"><i class="glyphicon glyphicon-heart" aria-hidden="true"></i></span><i style="color:red;" class="glyphicon glyphicon-heart" aria-hidden="true"></i><script>$(function(){typedword();})</script></p>全站友链显示图片
打开/usr/themes/handsome/component/aside.php文件，大概在210左右，把这一段替换为以下代码
<!--使用links插件，输出全站友链-->
<?php $mypattern1 = "<li data-original-title=\"{title}\" data-toggle=\"tooltip\"
data-placement=\"top\"><a rel='noopener' href=\"{url}\" target=\"_blank\"><img style=\"width:18px;height:18px;border-radius:50%;margin-right:3px;\" src=\"{image}\" /><span>{name}</span></a></li>";
Handsome_Plugin::output($mypattern1, 0, "ten");?>
</ul>
</li>右侧添加“全屏显示按钮”
打开/usr/themes/handsome/component/fotter.php文件，找到“返回顶部”这段代码 大概在96行左右，在下方开始添加
<div class="f10 panel panel-default" style="position:fixed;top:450px;right:-240px;z-index:99;width:240px;-webkit-transition:all .2s;transition:all .2s;">
<button id="f10" class="fix-padding btn btn-default rightSettingBtn pos-abt
border-radius-half-left"
data-toggle="tooltip" data-placement="left" data-original-title="<?php _me("全屏切换") ?>" style="top:44px;border:none;box-shadow:-3px 0 2px 0 rgba(0,0,0,.02);background:rgba(255,255,255,.3) !important;color:#840606 !important;border-top-right-radius:0;border-bottom-right-radius:0;left:-43px;padding:10px 15px;position:absolute;">
<span class="icon1" id = "span1" style="display:;margin-left:1px;">
<i width="13px" height="13px" data-feather="maximize"></i>
</span>
<span class="icon2" id="span2" style="display:none;">
<i width="13px" height="13px" data-feather="minimize"></i>
</span>
<!--<i class="fontello fontello-chevron-circle-up" aria-hidden="true"></i>-->
</button>
<style>
/* .btn-default {*/
/*所有按钮颜色*/
/* color: #840606 !important*/
/*}*/
/* </style>*/
<script>
var button = document.getElementById('f10');
var myspan1 =document.getElementById('span1');
var myspan2 = document.getElementById('span2');
button.onclick = function(){
document.fullscreen ? closeMyFullScreen() : myFullScreen();
if(document.fullscreen )
{
// var name= document.getElementById('name');
// name.style.cssText = "border: 1px solid #95FF00;padding: 3px;"
myspan2.style.cssText="display:none;"
myspan1.style.cssText="display:;"
} else
{
myspan1.style.cssText="display:none;"
myspan2.style.cssText="display:;"
}
};
// 全屏
function myFullScreen() {
var docElm = document.documentElement;
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
// 退出全屏
function closeMyFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
</script>
</div>时光机去除蒙层
把以下代码添加到 自定义JavaScript代码内
/* 时光机去蒙版 */
try{
document.getElementsByClassName("wrapper-lg bg-white-opacity")[0].classList.remove("bg-white-opacity");
}catch(err){}本文作者： 站长 文章标题：handsome主题美化优化整合
本文地址：https://lqza.cn/archives/hanbl.html
版权说明：若无注明，本文由Mo陌独博客原创，转载请保留文章出处。
