该站的所有修改项均在本文列出，实际效果看本站即可。若您也想拥有类似的效果，欢迎借鉴~~
注意：以下代码出现/* */、<!-- --> 或 // 字符均为注释，即不会有实际效果，仅仅是给人看的一个标记。
在这里不建议删除，因为会影响后期修改时的辨别。悉知~
为了给小白讲明白，这里记录的已经很细了。老博主的话，拿着代码按自己意愿改即可，懂得都懂~
[scode type="green" size=""]这篇文章作为本站美化的记录，有新增时会实时更新。[/scode]
[scode type="green" size=""]如果您有好玩的效果也欢迎在评论区提出，若可以的话我也会加到文章并实现其效果。[/scode]
[scode type="green" size=""]更新时间：2023-10-21[/scode]
本站环境：
[scode type="yellow" size=""]PHP：PHP-8.0[/scode]
[scode type="yellow" size=""]MySQL：MySQL 5.7[/scode]
[scode type="yellow" size=""]Typecho：1.2.1正式版[/scode]
[scode type="yellow" size=""]HandSome 9.2.1 Pro 主题版本[/scode]
[scode type="yellow" size=""]其他版本的Typecho和HandSome不确定其可行性，请自行测试~[/scode]
[collapse title="食用插件" status="false"]
typecho插件
- AbnormalLinks 异常友链检查插件
- AccessoriesPro 附件下载增强插件
- BaiduTextCensor 内容审核API过滤评论敏感内容
Clogin 彩虹聚合登录- Handsome handsomePro
- ErcerLink handsome友链快速申请
- ShortLinks 外链转内链插件
- CommentNotifier 评论通过时发送邮件提醒
- UserAgent 显示评论人使用的操作系统和浏览器信息
- TePass 支付会员中心
- BlueSky LskyPro企业版图床
[/collapse]
[collapse title="浏览器动态标题" status="false"]
浏览器动态标题
主题设置-开发者设置-自定义输出body尾部的HTML代码添加以下代码
</script>
<!--浏览器动态标题开始-->
<script>
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "//这里替换为你需要显示的favicon链接");
document.title = 'ヽ(●-`Д´-)ノ我藏好了哦！';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "//这里替换为你需要显示的favicon链接");
document.title = 'ヾ(Ő∀Ő3)ノ被你发现啦~！' + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
</script>
<!--浏览器动态标题结束-->[/collapse]
[collapse title="博主介绍" status="false"]
博主介绍
将以下代码加入后台设置->博主介绍中，当然，介绍文字要改成你自己的。
</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 = ["No one indebted for others,while many people don\'t know how to cherish others."].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>
<!--博主介绍闪字效果结束-->[/collapse]
[collapse title="网站加载耗时" status="false"]
网站加载耗时
在主题的functions.php文件中添加以下代码
//加载耗时
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;
}然后再/usr/themes/handsome/component/sidebar.php中添加以下代码
<li class="list-group-item"> <i class="glyphicon glyphicon-time text-muted"></i> <span class="badge
pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li>[/collapse]
[collapse title="访客总数" status="false"]
访客总数
在主题的functions.php文件中添加以下代码
//访问总量
function theAllViews(){
$db = Typecho_Db::get();
$row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
echo number_format($row[0]['SUM(VIEWS)']);
}然后再/usr/themes/handsome/component/sidebar.php中添加以下代码
<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>[/collapse]
[collapse title="全站字数" status="false"]
全站字数
在主题的functions.php文件中添加以下代码
//字数统计
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;
}然后再/usr/themes/handsome/component/sidebar.php中添加以下代码
<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-2"></i></span>
<span class="badge
pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>[/collapse]
[collapse title="在线人数" status="false"]
在线人数
在主题的functions.php文件中添加以下代码
//在线人数开始
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"> <i class="glyphicon glyphicon-user text-muted text-muted"></i> <span class="badge pull-right"><?php echo online_users() ?></span><?php _me("在线人数") ?></li>[/collapse]
[collapse title="添加二维码" status="false"]
添加二维码
/usr/themes/handsome/component/sidebar.php中添加以下代码
<section id="blog_qrurl" class="widget widget_categories wrapper-md clear">
<script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>
<h5 class="widget-title m-t-none text-md"><?php _me("移动端阅读") ?></h5>
<style>
#qrcode img{
max-width: 100%;
}
@media (max-width: 767px){
#qrcode{
display: none;
}
}
</style>
<div id="qrcode"></div>
<script>
var elText = window.location.href;
new QRCode(document.getElementById("qrcode"), elText);
</script>
</section>[/collapse]
[collapse title="评论添加一键打卡" status="false"]
评论添加一键打卡
主题设置 - 开发者设置 - 自定义JavaScript 和 PJAX回调函数 均添加上以下代码
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();
elseif (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 = (newDate).toLocaleTimeString(),
c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
daka: function() {
a(c, "滴！学生卡！打卡时间：" + b, "，请上车的乘客系好安全带~")
},
zan: function() {
a(c, " 写得好好哟,我要给你生猴子！::funny:04:: ")
},
cai: function() {
a(c, "骚年,我怀疑你写了一篇假的文章！::funny:03:: ")
}
};主题目录的component/comments.php里面的130行左右参照下面代码进行修改
<label for="comment"><?php _me("评论") ?>
<span class="required text-danger">*</span></label>
<textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="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("开启该功能，您的评论仅作者和评论双方可见") ?>">主题设置 - 开发者设置 - 自定义CSS 添加以下代码
.secret_comment {
top: 5px;
}
.OwO.OwO-open.OwO-body {
display:table
}[/collapse]
[collapse title="打赏图片" status="false"]
打赏图片
<style>
.support-author{background-repeat:round;background-image:url(https://blog.dwoyun.com/file/MenheraSauce.png);}.article__reward-info{color:#00a0ed!important;font-weight:bold;}</style>[/collapse]
[collapse title="文章中嵌入网页" status="false"]
文章中嵌入网页
在文章中添加代码即可，将链接地址修改为你需要展示的网站地址
<iframe align="center" width="100%" height="740px" src="链接地址" frameborder="no" border="0" scrolling="no" marginwidth="0" marginheight="0" ></iframe>[/collapse]
[collapse title="网站加载完成提示" status="false"]
网站加载完成提示
复制下面代码到 handsome主题>设置外观>开发者设置>自定义 JavaScript
/* 网站加载完成提示开始 */
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"
})
/* 网站加载完成提示结束 */[/collapse]
[collapse title="预加载页面实现网站页面秒开 - instant.page" status="false"]
预加载页面实现网站页面秒开 - instant.page
GitHub项目：https://github.com/instantpage/instant.page
bootcdn加速：
https://www.bootcdn.cn/instant.page/
<script type="module" src="https://cdn.bootcss.com/instant.page/3.0.0/instantpage.js"></script>定义预加载
白名单标签属性： data-instant ，例：
<a href="https://blog.dwoyun.com/" data-instant>呆窝云</a>黑名单标签属性： data-no-instant ，例：
<a href="https://www.baidu.com" data-no-instant>百度</a>全局允许：在 <body> 中添加 data-instant-allow-query-string 属性
局部允许：在使用的标签中添加 data-instant 属性（和白名单属性一样）
仅预加载部分指定链接（白名单模式）：如果只想预加载特定的链接，请在 <body> 中添加一个 data-instant-whitelist 标签，并通过向其添加 data-instant 属性来标记要预加载的链接。
[/collapse]
[collapse title="评论增加图片上传" status="false"]
评论增加图片上传
复制下面代码到174行 /usr/themes/handsome/component/comments.php
<script LANGUAGE="JavaScript"> function openimgtp() {window.open ("https://stock.dwoyun.com/", "newwindow", "height=600, width=800, top=100px,left=400px,toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")} </script>
<div class="padder-v-sm smallscreen">
<span style="display: inline-block;padding: 0;width: 66px;height: 24px;color: #99a2aa;border-radius: 4px;position: relative;z-index: 101;font-size: 12px;text-align: center;line-height: 23px;margin-top: 3px;background: #fff;">
<a data-chevereto-pup-trigger data-target="#comment" onclick="openimgtp()" title="上传到图床后插入HTML代码">
<span class="smile-icons">
<i class="fontello fontello-picture text-muted"></i>
</span>
<span class="OwOlogotext">图片</span>
</a></span>
<span class="OwO padder-v-sm" title="表情"></span>
</div>[/collapse]
Last modification：December 14, 2023
© Allow specification reprint
Appreciate the author
如果觉得我的文章对你有用，请随意赞赏，但也要理性！