本来不想做这个记录的,但发现主题好像被我修改出了一点问题,所以必须要记录一下所修改的地方,方便查找问题。
除了自用也会搜集一些备用。

1.开启伪静态并隐藏index.php

点击查看
登录后台-设置-永久链接-是否使用地址重写功能-是
登录后台-设置-永久链接-自定义文章路径-个性化定义-/{slug}.html
服务器的rewrite规则
nginx配置
BT面板-配置文件(伪静态)-添加以下代码:
非BT在网站根目录新建一个.htaccess然后加入以下代码:

if (!-e $request_filename) {
rewrite ^(.*)$ /index.php$1 last;
}

apache配置
在网站根目录新建一个.htaccess然后加入以下代码:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.php/$1 [L]
</IfModule>

2.开启网页压缩加速

点击查看
将以下代码加到Typecho主程序index.php文件/** 载入配置支持 */上面即可

/** 开启gzip压缩 */
ob_start('ob_gzhandler');

3.不让移动端后台导航栏点击自动跳转

点击查看

4.首页文章版式圆角化

点击查看
下面代码放到设置外观-开发者设置-自定义CSS

/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 8px;
}

.panel-small{
    border: none;
    border-radius: 8px;
}

.item-thumb{
    border-radius: 8px;  
}

5.打赏图标跳动

点击查看
设置外观-开发者设置-自定义CSS

/* 打赏图标跳动 */
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

6.彩色标签云

点击查看
设置外观-开发者设置-自定义JavaScript

// 彩色标签云
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;
});

如果你开启了PJAX,还需要在设置外观-PJAX-PJAX回调函数 填入相同JS代码

7.利用主题自带弹窗增加提示

点击查看
复制版权提示
设置外观-开发者设置-自定义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: "10000"
    })
}}

加载完成提示
设置外观-开发者设置-自定义输出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: "6000"
}) 
</script>

注意,要放在广告异步推送代码之前,放在后面可能会影响加载。
独立页面提示

<script>
$.message({
    message: "想对博主说一些什么呢?",
    title: "欢迎给我留言!",
    type: "info",
    autoHide: !1,
    time: "10000"
})
</script>

如果开启了PJAX,还需要在设置外观-PJAX-PJAX回调函数 填入kaygb_copy();
title:弹窗的标题
message:弹窗标题下方的文字
type: 弹窗类型
autoHide:默认即可
time:停留时间(毫秒,1秒为1000毫秒)

8.透明背景下文章目录Bug

点击查看
设置外观-开发者设置-自定义CSS

/*透明背景下文章目录bug*/
#toc {
background-color:rgba(255, 255, 255, .15) !important;
}

9.透明背景下时光机右侧Bug

点击查看
设置外观-开发者设置-自定义CSS

/*透明背景下时光机右侧bug*/
.bg-light .lter, .bg-light.lter {
text-align: justify;
}

10.博主头像设置成QQ头像

点击查看
设置外观-初级设置-头像图片地址
QQ头像接口地址

https://q1.qlogo.cn/g?b=qq&nk=10001&s=640
https://q.qlogo.cn/g?b=qq&nk=10001&s=100
https://q.qlogo.cn/headimg_dl?bs=qq&dst_uin=10001&src_uin=gordsky.cn&fid=blog&spec=100
https://q.qlogo.cn/headimg_dl?dst_uin=10001&spec=640
https://q2.qlogo.cn/headimg_dl?spec=100&dst_uin=10001
http://q3.qlogo.cn/g?b=qq&nk=10001&s=100

把10001修改成你的QQ号即可。

11.Pjax无刷新加载后百度统计失效解决办法

点击查看
设置外观-PJAX-PJAX回调函数

_hmt.push(['_trackPageview', document.location.pathname+document.location.search+document.location.hash]);

上面写法是记录整个URL信息,即包含查询参数以及hash锚点。
如果想要像网络上其他教程一样只记录页面地址,可以换成如下代码:

_hmt.push(['_trackPageview', document.location.pathname]);

12.评论一键打卡赞踩

点击查看
设置外观-开发者设置-自定义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, "骚年,我怀疑你写了一篇假的文章!")
}
};

PJAX回调函数也加入以上代码
在主题目录component/comments.php里面搜索<div class="OwO" style="display: inline;"></div>(126行到144行左右)下面添加如下代码。

<!-- 打卡代码开始 -->
<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>
<!-- 打卡代码结束 -->

设置外观-开发者设置-自定义CSS

/*私密评论按钮位置*/
.secret_comment {
top: 5px;
}
.OwO.OwO-open .OwO-body {
display:table
}

13.自定义pjax动画

点击查看
设置外观-PJAX-选择pjax动画-选择自定义pjax动画
自定义pjax动画的HTML结构

<section id="loading" class="loading hide">
<div class="containerss">
        <div class="one common"></div>
        <div class="two common"></div>
        <div class="three common"></div>
        <div class="four common"></div>
        <div class="five common"></div>
        <div class="six common"></div>
        <div class="seven common"></div>
        <div class="eight common"></div>
    </div>
</section>

自定义pjax动画的CSS代码

@charset "utf-8";.loading{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;}.containerss{width:40vw;height:40vw;left:0;right:0;top:0;bottom:0;margin:auto;}.common{height:5vw;max-height:100%;overflow:auto;width:2vw;margin:auto;max-width:100%;position:absolute;background-color:;border-radius:0vw 10vw 0vw 10vw;box-shadow:inset 0vw 0vw 0vw .1vw #E645D0,0vw 0vw 1.5vw 0vw #E645D0;}.one{transform:rotate(45deg);left:0;right:0;top:0;bottom:7.5vw;}.two{transform:rotate(90deg);left:5.5vw;right:0;top:0;bottom:5.5vw;}.three{transform:rotate(135deg);left:7.5vw;right:0;top:0;bottom:0;}.four{transform:rotate(180deg);left:5.5vw;right:0;top:5.5vw;bottom:0;}.five{transform:rotate(225deg);left:0;right:0;top:7.5vw;bottom:0;}.six{transform:rotate(270deg);left:0;right:5.5vw;top:5.5vw;bottom:0;}.seven{transform:rotate(315deg);left:0;right:7.5vw;top:0;bottom:0;}.eight{transform:rotate(360deg);left:0;right:5.5vw;top:0;bottom:5.5vw;}.one{animation:one 1s ease infinite;-moz-animation:one 1s ease infinite;-webkit-animation:one 1s ease infinite;-o-animation:one 1s ease infinite;}@keyframes one{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.two{animation:two 1s .125s ease infinite;-moz-animation:two 1s .125s ease infinite;-webkit-animation:two 1s .125s ease infinite;-o-animation:two 1s .125s ease infinite;}@keyframes two{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.three{animation:three 1s .25s ease infinite;-moz-animation:three 1s .25s ease infinite;-webkit-animation:three 1s .25s ease infinite;-o-animation:three 1s .25s ease infinite;}@keyframes three{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.four{animation:four 1s .375s ease infinite;-moz-animation:four 1s .375s ease infinite;-webkit-animation:four 1s .375s ease infinite;-o-animation:four 1s .375s ease infinite;}@keyframes four{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.five{animation:five 1s .5s ease infinite;-moz-animation:five 1s .5s ease infinite;-webkit-animation:five 1s .5s ease infinite;-o-animation:five 1s .5s ease infinite;}@keyframes five{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.six{animation:six 1s .625s ease infinite;-moz-animation:six 1s .625s ease infinite;-webkit-animation:six 1s .625s ease infinite;-o-animation:six 1s .625s ease infinite;}@keyframes six{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.seven{animation:seven 1s .750s ease infinite;-moz-animation:seven 1s .750s ease infinite;-webkit-animation:seven 1s .750s ease infinite;-o-animation:seven 1s .750s ease infinite;}@keyframes seven{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.eight{animation:eight 1s .875s ease infinite;-moz-animation:eight 1s .875s ease infinite;-webkit-animation:eight 1s .875s ease infinite;-o-animation:eight 1s .875s ease infinite;}@keyframes eight{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.containerss{animation:containerss 5s linear infinite;-moz-animation:containerss 5s linear infinite;-webkit-animation:containerss 5s linear infinite;-o-animation:containerss 5s linear infinite;}@keyframes containerss{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}

14.时光机RSS动态内容配置

点击查看

设置外观-时光机配置-RSS动态内容配置

{"id":"guanzhi","name":"每日一文","url":"https://cors-anywhere.herokuapp.com/https://rsshub.app/guanzhi"},
{"id":"zgdxmooc","name":"慕课","url":"https://cors-anywhere.herokuapp.com/https://rsshub.app/icourse163/newest"},
{"id":"juejin","name":"掘金","url":"https://cors-anywhere.herokuapp.com/https://rsshub.app/juejin/category/frontend"},
{"id":"bilibili_zf","name":"追番","url":"https://cors-anywhere.herokuapp.com/https://rsshub.app/bilibili/user/bangumi/21462274"}

15.首页轮播设置

点击查看

{"title":"Handsome主题夜间模式插件 fo Typecho","link":"https://www.ddg.ink/69.html","cover":"https://cdn.jsdelivr.net/gh/freecdn/images/usr/uploads/2020/05/797406831.png","desc":"白天演示图片"},
{"title":"Handsome主题夜间模式插件 fo Typecho","link":"https://www.ddg.ink/69.html","cover":"https://cdn.jsdelivr.net/gh/freecdn/images/usr/uploads/2020/05/888696165.png","desc":"夜晚演示图片"}

16.删除顶部博客名称

点击查看
打开/usr/themes/handsome/index.php
搜索<h1 class="m-n font-thin text-black l-h"><?php $this->options->title(); ?></h1>
删除或注解掉

17.博客信息添加全站字数和加载耗时

点击查看
/usr/themes/handsome/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;
}
//加载耗时
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;
}

对Handsome主题functions.php加密的解决办法:
1.可以将上面的代码存放到usr/themes/handsome/libs/Content.phpclass Content的上边。
2.在/usr/themes/handsome/component/sidebar.php的开头加入下面的代码也可达到同样效果。

<?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;
}
//加载耗时
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的博客信息处,选择合适位置加入以下代码(位置大概在 90 多行)

 <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-time text-muted"></i> <span class="badge
       pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li>

18.删除左侧边栏的分割线和组成二字

点击查看
打开跟目录/usr/themes/handsome/component/aside.php搜索<?php if (@!in_array('component',$this->options->asideSetting)): ?>(在125行左右)将以下代码删除或注解掉

          <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
            <span><?php _me("组成") ?></span>
          </li>

如果你想把导航二字也去掉,搜索<div class="line dk hidden-folded"></div>(在78行左右)下面代码删除或注解掉

            <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
            <span><?php _me("导航") ?></span>
          </li>

19.左侧边栏导航栏二级菜单

点击查看
①添加判断字段
打开跟目录/usr/themes/handsome/component/aside.php搜索$asideItemsOutput = "";(第87行左右)在下面添加asideGongjuItemsOutput的定义:

$asideGongjuItemsOutput = "";

搜索if (trim($itemFeather)!==""){(105行左右)将其删除掉或注解掉,在下面添加status字段的判断:

                  if (strtoupper($itemStatus) === 'GJX'){ //判断status字段
                  if (trim($itemFeather)!==""){
                      $asideGongjuItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'" class ="auto"><span class="nav-icon"><i data-feather="'.$itemFeather.'"></i></span><span>'._mt($itemName).'</span></a></li>';
                  }else if (trim($itemClass)!==""){
                      $asideGongjuItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'" class ="auto"><span class="nav-icon"><i class="'.$itemClass.'"></i></span><span>'._mt($itemName).'</span></a></li>';
                      }
                  }
              else if (trim($itemFeather)!==""){ //判断status字段结束

②添加二级菜单输出
搜索<?php if (@!in_array('component',$this->options->asideSetting)): ?>(在132行左右)上面添加:

          <!--工具菜单-->
          <?php if (@$asideGongjuItemsOutput): ?>
          <li><a class="auto"><span class="pull-right text-muted">
          <i class="fontello icon-fw fontello-angle-right text"></i>
          <i class="fontello icon-fw fontello-angle-down text-active"></i>
          </span>
          <span class="nav-icon"><i class="glyphicon glyphicon-wrench"></i></span><span><?php _me("工具"); ?></span></a><!-- 可修改默认图标与名称 -->
          <ul class="nav nav-sub dk"><li class="nav-sub-header"><a data-no-instant><span><?php _me("工具"); ?></span></a></li>
          <?php echo @$asideGongjuItemsOutput ?>
          </ul></li>
          <?php endif; ?>

使用方法
设置外观-高级设置-左侧边栏导航

{"name":"图床","class":"fontello fontello-picture","link":"https://tuchuang.ddg.ink/","status":"gjx"},
{"name":"在线扒站","class":"fontello fontello-emo-sunglasses","link":"https://wget.ddg.ink/","status":"gjx"}

其中"status":"gjx"即表示将该条目放置于二级菜单中。

20.开启全站灰色(黑白模式)

点击查看
设置外观-开发者设置-自定义CSS

<!--开启黑白模式-->
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);}
<!--黑白模式结束-->

21.美化主页文章列表宽度

点击查看
设置外观-开发者设置-自定义CSS

/* 非盒子模式页面宽度 */
.no-container #post-panel, .no-container .blog-posts {
max-width: 90%;
}

PS:需关闭盒子类型,不然没效果。

22.使用CDN后获取用户真实IP

点击查看
打开网站根目录config.inc.php,在最下方加入以下代码:

//防止 CDN 造成无法获取客户真实 IP 地址
if(isset($_SERVER['HTTP_X_FORWARDED_FOR']))
{
$list = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']);
$_SERVER['REMOTE_ADDR'] = $list[0];
}

23.比删除线更高级的伪装

点击查看
效果演示→被你发现了~
设置外观-开发者设置-自定义CSS

span.heimu a.external,span.heimu a.external:visited,span.heimu a.extiw,span.heimu a.extiw:visited {
color: #252525
}
.heimu,.heimu a,a .heimu,.heimu a.new {
background-color: #252525;
color: #252525;
text-shadow: none
}
body:not(.heimu_toggle_on) .heimu:hover,body:not(.heimu_toggle_on) .heimu:active,body:not(.heimu_toggle_on) .heimu.off {
transition: color .13s linear;
color: #fff
}
body:not(.heimu_toggle_on) .heimu:hover a,body:not(.heimu_toggle_on) a:hover .heimu,body:not(.heimu_toggle_on) .heimu.off a,body:not(.heimu_toggle_on) a:hover .heimu.off {
transition: color .13s linear;
color: #add8e6
}
body:not(.heimu_toggle_on) .heimu.off .new,body:not(.heimu_toggle_on) .heimu.off .new:hover,body:not(.heimu_toggle_on) .new:hover .heimu.off,body:not(.heimu_toggle_on) .heimu.off .new,body:not(.heimu_toggle_on) .heimu.off .new:hover,body:not(.heimu_toggle_on) .new:hover .heimu.off {
transition: color .13s linear;
color: #ba0000
}

如果你使用其他主题,请在CSS头尾分别添加<style type="text/css"></style>放在主题post.php或其他文件内。
使用方法:

<span class="heimu" title="被你发现了!">伪装内容</span>

24更改博客评论显示日期格式

点击查看
后台设置→评论→修改成Y-m-d H:i:s

25.将头图默认模式改为图片样式

点击查看
Handsome作者加密了Config.php所以无法将此加入后台设置,只能改Content.php

方法:

打开主题文件夹libs/Content.php在967行后加入以下代码即可实现头图默认为图片样式:

$parameterArray['thumbStyle'] = "PICTURE";

26.自定义Handsome主题默认头图(支持多站点)

27.首页文章标题居中显示

点击查看

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

插件

Last modification:June 2nd, 2020 at 11:07 pm
如果觉得文章对你有所帮助,请随意赞赏!