typecho设置备忘录

博主： anyfan
发布时间：2020 年 03 月 11 日
2165次浏览
暂无评论
3441字数
分类：学习

右侧全站字数

在 /handsome/component/sidebar.php文件的第 1行追加了以下代码

<?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;
   }
   ?>

在修改后的文件第 111行追加了以下代码

<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>

文字黑色背景加颜色反转

使用实列:

!!!
<span class="heimu" title="这是一段文字">hello!</span>
!!!

hello!

心知天气

将以下代码复制到 handsome/component/headnav.php搜索提示下面，大概在 55行，
uid公钥和 hash私钥自己到心知天气注册获取，一个账号可以注册一个免费的，其余可自己DIY。

<!-- 知心天气-->
<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": "PpllKULMboB_K4-_P",
"hash": "SlpCFwmk62QPKzbvp"
});
tpwidget("show");</script>
<!-- 知心结束-->

解决后台图片过大

目录 /admin/css/style.css追加以下代码

.comment-content img{border: 0;max-height: 240px; max-width: 480px}.comment-content video{border: 0;max-height: 240px; max-width: 480px}

支持emoji表情

注意：utf8mb4编码在 PHP5.5以后才支持
进入 PhpMyadmin，选择对应的数据库，选择 操作——排序规则——选择 utf8mb4_unicode_ci并 执行。
选择SQL-复制下面sql语句代码-点击右下角执行

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;

网站根目录 config.inc.php配置文件中找到以下代码

'host' => localhost,
'user' => 'youruser',
'password' => 'yourpassword',
'charset' => 'utf8mb4', //将utf8修改为utf8mb4

文章声明

在 /handsome/post.php文件中的 文章页脚的广告位行上方，添加了以下代码

<br>
   <style>
       .cutline {
           border-top: 1px dotted #ccc;
           height: 1px;
           margin: 20px 0;
           text-align: center;
           width: 100%;
       }
       .cutline span {
           background-color: rgb(236, 237, 238);
           border: 1px solid #F17B8F;
           font: 12px Arial, Microsoft JhengHei;
           padding: 2px 4px;
           position: relative;
           top: -10px;
       }
       .cpright {
           padding: 10px;
           background: rgba(190, 190, 190, 0.1);
           margin: 8px 0;
           font-size: 13px;
           border-left: 3px #00bfff9f solid;
           position: relative;
           z-index: 1;
           font-family: "Microsoft Yahei", "Droid Serif", Georgia, "Times New Roman", STHeiti, serif;
           text-align: left;
       }
       .cpright a:hover {
           color: #ff7979e8 !important;
       }
       .cpright a {
           color: #00bfff ;
           margin: 4px;
       }
   </style>
   <div class="cutline">
       <span>
           <a style="color:#00BFFF;">正文到此结束</a>
       </span>
   </div>
   <div class="cpright">
       <span>
           本文作者: <a href="<?php $this->author->permalink(); ?>"><?php $this->author(); ?></a>
       </span>   文章标题：<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>
       <br>
       <span>
           本文地址：<a style="color: #ff7979e8;" href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a>
       </span>   
       <br>
       <span>
           版权说明：若无注明，本文皆为“<a href="<?php $this->options->siteUrl(); ?>"
               target="_blank"><?php $this->options->title() ?></a>”原创，转载请保留文章出处。
       </span>
   </div>

typecho开启Gzip压缩

在根目录下的 index.php文件里面加上下面这一句就可以了：

/*添加Gzip*/
ob_start('ob_gzhandler');

建议加在最上面。

UserAgent插件

在 /handsome/component/comments.php文件的 73 行修改了代码

修改前

<b class="fn"><?php echo $author; ?></b>

修改后

<b class="fn"><?php echo $author; ?></b>
<?php UserAgent_Plugin::get_useragent($comments->agent,$comments->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];
  }

左侧栏友链添加头像

在 /handsome/component/aside.php文件中修改以下代码

修改前
修改后

<!--友情链接-->
<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 data-feather="user"></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>
        <!--使用links插件，输出全站友链-->
        <?php $mypattern1 = "<li data-original-title=\"{title}\" data-toggle=\"tooltip\" 
data-placement=\"top\"><a href=\"{url}\" target=\"_blank\"><span>{name}</span></a></li>";
                  Handsome_Plugin::output($mypattern1, 0, "ten");?>
    </ul>
</li>

<!--友情链接-->
<style>
    #user_img{
        width: 24px;
        border-radius: 50%;
    }
</style>
<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 data-feather="user"></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>
        <!--使用links插件，输出全站友链-->
        <?php $mypattern1 = "<li data-original-title=\"{title}\" data-toggle=\"tooltip\" 
data-placement=\"top\"><a href=\"{url}\" target=\"_blank\"><img src=\"{image}\" id=\"user_img\" \><span>{name}</span></a></li>";
                  Handsome_Plugin::output($mypattern1, 0, "ten");?>
    </ul>
</li>

部分设置在handsomeh后台的代码

博主介绍（需要自己取压缩代码）

这一种用到了js,文字是写入进去的，所以标题常常鬼畜。当然可以给它增加样式，固定它的位置宽度来解决。

<!--博主介绍的闪字特效-->
<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>

这一种则是纯css,对比上一款，个人现在比较喜欢这个，等看腻了在改别的吧。

<style type="text/css">.js_splitting .js_char {  display: inline-block;}.js_splitting .js_char {  position: relative;}.js_splitting .js_char::before,.js_splitting .js_char::after {  content: attr(data-js_char);  position: absolute;  top: 0;  left: 0;  visibility: hidden;  transition: inherit;  user-select: none;}.js_splitting {  --word-center: calc((var(--word-total) - 1) / 2);  --js_char-center: calc((var(--js_char-total) - 1) / 2);  --line-center: calc((var(--line-total) - 1) / 2);}.js_splitting {  --word-percent: calc(var(--word-index) / var(--word-total));  --line-percent: calc(var(--line-index) / var(--line-total));}.js_splitting .js_char {  --js_char-percent: calc(var(--js_char-index) / var(--js_char-total));  --js_char-offset: calc(var(--js_char-index) - var(--js_char-center));  --distance: calc(     (var(--js_char-offset) * var(--js_char-offset)) / var(--js_char-center)  );  --distance-sine: calc(var(--js_char-offset) / var(--js_char-center));  --distance-percent: calc((var(--distance) / var(--js_char-center)));}.js_loading .js_char {  overflow: hidden;  color: transparent;}.js_loading .js_char:before, .js_loading .js_char:after {  visibility: visible;  color: #000;}.js_loading .js_char:before {  animation: _before 1.8s cubic-bezier(0.9, 0, 0.2, 1) infinite;  animation-delay: calc( 0.9s + ( 0.1s * ( var(--js_char-index)) ) );  transform: translateY(0);  opacity: 1;}.js_loading .js_char:after {  animation: _after 1.8s cubic-bezier(0.9, 0, 0.2, 1) infinite;  animation-delay: calc( 0.9s + ( 0.1s * ( var(--js_char-index)) ) );  transform: translateY(100%);  opacity: 0;}@keyframes _before {  to {    transform: translateY(-100%);    opacity: 0;  }}@keyframes _after {  to {    transform: translate(0);    opacity: 1;  }}</style><span class="js_loading js_splitting">        <span class="js_char" data-js_char="中" style="--js_char-index:0;">中</span>        <span class="js_char" data-js_char="国" style="--js_char-index:1;">国</span>        <span class="js_char" data-js_char="当" style="--js_char-index:2;">当</span>        <span class="js_char" data-js_char="代" style="--js_char-index:3;">代</span>        <span class="js_char" data-js_char="粪" style="--js_char-index:4;">粪</span>        <span class="js_char" data-js_char="青" style="--js_char-index:5;">青</span></span>

自定义 CSS

/*头像呼吸光环和鼠标悬停旋转放大*/
.img-full {
width: 100px;
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: 0.5s;
}
.img-full: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;
}
}

/*章图标和评论头像鼠标悬停旋转*/
.img-square {
transition: all 0.3s;
}
.img-square:hover {
transform: rotate(360deg);
}

/*文章内打赏动态图标*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}

/*表情自定义大小*/
.emotion-zcs_22/**(zcs_22为表情文件夹名称)**/ {
width: 45px;/*宽度，高度不用写，自适应*/
}
.comment-content-true img.emotion-zcs_22/*(zcs_22为表情文件夹名称)*/ {
max-width: 100%!important;
}

自定义 JavaScript

//禁用F12
document.onkeydown = function(){
if(window.event && window.event.keyCode == 123) {
    $.message({
    message: "这里真的没什么秘密。",
    title: "F12已禁用",
    type: "error",
    autoHide: !1,
    time: "2000"
    });
event.keyCode=0;
event.returnValue=false;
}
}

// 复制弹窗
kaygb_copy();
function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});
function hellolayer(){
$.message({
    message: "尊重原创，转载请注明出处！",
    title: "复制成功",
    type: "warning",
    autoHide: !1,
    time: "3000"
    })
}}

自定义输出head 头部的HTML代码

<!--标题栏自动变化-->
<script>
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
    if (document.hidden) {
        //$('[rel="shortcut icon"]').attr("href", "//www.dreamwings.cn/queue/wp-content/uploads/2016/05/fail.ico");
        document.title = "快回来吧！";
        clearTimeout(titleTime)
    } else {
        //$('[rel="shortcut icon"]').attr("href", "//www.ihewro.com/favicon.ico");
        document.title = "(/≧▽≦/)你又回来了！ " ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
});
</script>

自定义输出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(4, 250, 250, 0.726)
    }

    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="https://www.anyfan.top/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a>
        </li>
        <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
        <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
        <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i
                    class="fa fa-refresh fa-fw"></i><span>重载网页</span></a></li>
        <li><a href="https://anyfan.top/links.html"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></li>
        <li><a href="https://anyfan.top/reply.html"><i class="fa fa-pencil-square-o fa-fw"></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) ? $.message({
        message: "你想让我复制空气吗？",
        title: "你还没有选择文本",
        type: "warning",
        autoHide: !1,
        time: "2000"
        }) : document.execCommand("Copy")
    }
    $(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>

最后修改：2021 年 09 月 24 日 04 : 33 PM

赏口饭吃，行行好吧，客官！

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

搭建mindustry“像素工厂”服务器
浏览次数: 7927
使用Cloudflare Workers反代Pixiv图片
浏览次数: 6688
网站开启cdn加速
浏览次数: 4708
hello world
浏览次数: 4159
血小板
浏览次数: 3948

lht
用的是手机，直接复制过去的，我也不清楚为什么会有第14行，所以...
lht
佬，把你给的代码直接复制过去报错了是怎么回事？Uncaught...
光之小牙疼
时隔一年多，当时我自己瞎搞成功了，但是我又忘记了
Pang
求教右边底下的又拍云图片怎么设置的，我格式总是乱
沧笙踏歌
请问如果要在WordPress的HTML小工具里面应该怎么调用...

使用Cloudflare Workers反代Pixiv图片
浏览次数: 6688
MARKDOWN常用的语法
浏览次数: 1449
git的基本使用方法
浏览次数: 1192
hello world
浏览次数: 4159
single dog
浏览次数: 961

31文章数目
66评论数目
4年277天运行天数
27.15 万全站字数
4 个月前最后活动

typecho设置备忘录

anyfan • 2020 年 03 月 11 日

右侧全站字数

在 /handsome/component/sidebar.php文件的第 1行追加了以下代码

<?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;
   }
   ?>

在修改后的文件第 111行追加了以下代码

<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>

文字黑色背景加颜色反转

使用实列:

!!!
<span class="heimu" title="这是一段文字">hello!</span>
!!!

hello!

心知天气

<!-- 知心天气-->
<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": "PpllKULMboB_K4-_P",
"hash": "SlpCFwmk62QPKzbvp"
});
tpwidget("show");</script>
<!-- 知心结束-->

解决后台图片过大

目录 /admin/css/style.css追加以下代码

.comment-content img{border: 0;max-height: 240px; max-width: 480px}.comment-content video{border: 0;max-height: 240px; max-width: 480px}

支持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;

网站根目录 config.inc.php配置文件中找到以下代码

'host' => localhost,
'user' => 'youruser',
'password' => 'yourpassword',
'charset' => 'utf8mb4', //将utf8修改为utf8mb4

文章声明

在 /handsome/post.php文件中的 文章页脚的广告位行上方，添加了以下代码

<br>
   <style>
       .cutline {
           border-top: 1px dotted #ccc;
           height: 1px;
           margin: 20px 0;
           text-align: center;
           width: 100%;
       }
       .cutline span {
           background-color: rgb(236, 237, 238);
           border: 1px solid #F17B8F;
           font: 12px Arial, Microsoft JhengHei;
           padding: 2px 4px;
           position: relative;
           top: -10px;
       }
       .cpright {
           padding: 10px;
           background: rgba(190, 190, 190, 0.1);
           margin: 8px 0;
           font-size: 13px;
           border-left: 3px #00bfff9f solid;
           position: relative;
           z-index: 1;
           font-family: "Microsoft Yahei", "Droid Serif", Georgia, "Times New Roman", STHeiti, serif;
           text-align: left;
       }
       .cpright a:hover {
           color: #ff7979e8 !important;
       }
       .cpright a {
           color: #00bfff ;
           margin: 4px;
       }
   </style>
   <div class="cutline">
       <span>
           <a style="color:#00BFFF;">正文到此结束</a>
       </span>
   </div>
   <div class="cpright">
       <span>
           本文作者: <a href="<?php $this->author->permalink(); ?>"><?php $this->author(); ?></a>
       </span>   文章标题：<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>
       <br>
       <span>
           本文地址：<a style="color: #ff7979e8;" href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a>
       </span>   
       <br>
       <span>
           版权说明：若无注明，本文皆为“<a href="<?php $this->options->siteUrl(); ?>"
               target="_blank"><?php $this->options->title() ?></a>”原创，转载请保留文章出处。
       </span>
   </div>

typecho开启Gzip压缩

在根目录下的 index.php文件里面加上下面这一句就可以了：

/*添加Gzip*/
ob_start('ob_gzhandler');

建议加在最上面。

UserAgent插件

在 /handsome/component/comments.php文件的 73 行修改了代码

修改前

<b class="fn"><?php echo $author; ?></b>

修改后

<b class="fn"><?php echo $author; ?></b>
<?php UserAgent_Plugin::get_useragent($comments->agent,$comments->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];
  }

左侧栏友链添加头像

在 /handsome/component/aside.php文件中修改以下代码

修改前
修改后

<!--友情链接-->
<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 data-feather="user"></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>
        <!--使用links插件，输出全站友链-->
        <?php $mypattern1 = "<li data-original-title=\"{title}\" data-toggle=\"tooltip\" 
data-placement=\"top\"><a href=\"{url}\" target=\"_blank\"><span>{name}</span></a></li>";
                  Handsome_Plugin::output($mypattern1, 0, "ten");?>
    </ul>
</li>

<!--友情链接-->
<style>
    #user_img{
        width: 24px;
        border-radius: 50%;
    }
</style>
<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 data-feather="user"></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>
        <!--使用links插件，输出全站友链-->
        <?php $mypattern1 = "<li data-original-title=\"{title}\" data-toggle=\"tooltip\" 
data-placement=\"top\"><a href=\"{url}\" target=\"_blank\"><img src=\"{image}\" id=\"user_img\" \><span>{name}</span></a></li>";
                  Handsome_Plugin::output($mypattern1, 0, "ten");?>
    </ul>
</li>

部分设置在handsomeh后台的代码

博主介绍（需要自己取压缩代码）

这一种用到了js,文字是写入进去的，所以标题常常鬼畜。当然可以给它增加样式，固定它的位置宽度来解决。

<!--博主介绍的闪字特效-->
<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>

这一种则是纯css,对比上一款，个人现在比较喜欢这个，等看腻了在改别的吧。

<style type="text/css">.js_splitting .js_char {  display: inline-block;}.js_splitting .js_char {  position: relative;}.js_splitting .js_char::before,.js_splitting .js_char::after {  content: attr(data-js_char);  position: absolute;  top: 0;  left: 0;  visibility: hidden;  transition: inherit;  user-select: none;}.js_splitting {  --word-center: calc((var(--word-total) - 1) / 2);  --js_char-center: calc((var(--js_char-total) - 1) / 2);  --line-center: calc((var(--line-total) - 1) / 2);}.js_splitting {  --word-percent: calc(var(--word-index) / var(--word-total));  --line-percent: calc(var(--line-index) / var(--line-total));}.js_splitting .js_char {  --js_char-percent: calc(var(--js_char-index) / var(--js_char-total));  --js_char-offset: calc(var(--js_char-index) - var(--js_char-center));  --distance: calc(     (var(--js_char-offset) * var(--js_char-offset)) / var(--js_char-center)  );  --distance-sine: calc(var(--js_char-offset) / var(--js_char-center));  --distance-percent: calc((var(--distance) / var(--js_char-center)));}.js_loading .js_char {  overflow: hidden;  color: transparent;}.js_loading .js_char:before, .js_loading .js_char:after {  visibility: visible;  color: #000;}.js_loading .js_char:before {  animation: _before 1.8s cubic-bezier(0.9, 0, 0.2, 1) infinite;  animation-delay: calc( 0.9s + ( 0.1s * ( var(--js_char-index)) ) );  transform: translateY(0);  opacity: 1;}.js_loading .js_char:after {  animation: _after 1.8s cubic-bezier(0.9, 0, 0.2, 1) infinite;  animation-delay: calc( 0.9s + ( 0.1s * ( var(--js_char-index)) ) );  transform: translateY(100%);  opacity: 0;}@keyframes _before {  to {    transform: translateY(-100%);    opacity: 0;  }}@keyframes _after {  to {    transform: translate(0);    opacity: 1;  }}</style><span class="js_loading js_splitting">        <span class="js_char" data-js_char="中" style="--js_char-index:0;">中</span>        <span class="js_char" data-js_char="国" style="--js_char-index:1;">国</span>        <span class="js_char" data-js_char="当" style="--js_char-index:2;">当</span>        <span class="js_char" data-js_char="代" style="--js_char-index:3;">代</span>        <span class="js_char" data-js_char="粪" style="--js_char-index:4;">粪</span>        <span class="js_char" data-js_char="青" style="--js_char-index:5;">青</span></span>

自定义 CSS

/*头像呼吸光环和鼠标悬停旋转放大*/
.img-full {
width: 100px;
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: 0.5s;
}
.img-full: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;
}
}

/*章图标和评论头像鼠标悬停旋转*/
.img-square {
transition: all 0.3s;
}
.img-square:hover {
transform: rotate(360deg);
}

/*文章内打赏动态图标*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}

/*表情自定义大小*/
.emotion-zcs_22/**(zcs_22为表情文件夹名称)**/ {
width: 45px;/*宽度，高度不用写，自适应*/
}
.comment-content-true img.emotion-zcs_22/*(zcs_22为表情文件夹名称)*/ {
max-width: 100%!important;
}

自定义 JavaScript

//禁用F12
document.onkeydown = function(){
if(window.event && window.event.keyCode == 123) {
    $.message({
    message: "这里真的没什么秘密。",
    title: "F12已禁用",
    type: "error",
    autoHide: !1,
    time: "2000"
    });
event.keyCode=0;
event.returnValue=false;
}
}

// 复制弹窗
kaygb_copy();
function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});
function hellolayer(){
$.message({
    message: "尊重原创，转载请注明出处！",
    title: "复制成功",
    type: "warning",
    autoHide: !1,
    time: "3000"
    })
}}

自定义输出head 头部的HTML代码

<!--标题栏自动变化-->
<script>
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
    if (document.hidden) {
        //$('[rel="shortcut icon"]').attr("href", "//www.dreamwings.cn/queue/wp-content/uploads/2016/05/fail.ico");
        document.title = "快回来吧！";
        clearTimeout(titleTime)
    } else {
        //$('[rel="shortcut icon"]').attr("href", "//www.ihewro.com/favicon.ico");
        document.title = "(/≧▽≦/)你又回来了！ " ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
});
</script>

自定义输出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(4, 250, 250, 0.726)
    }

    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="https://www.anyfan.top/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a>
        </li>
        <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
        <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
        <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i
                    class="fa fa-refresh fa-fw"></i><span>重载网页</span></a></li>
        <li><a href="https://anyfan.top/links.html"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></li>
        <li><a href="https://anyfan.top/reply.html"><i class="fa fa-pencil-square-o fa-fw"></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) ? $.message({
        message: "你想让我复制空气吗？",
        title: "你还没有选择文本",
        type: "warning",
        autoHide: !1,
        time: "2000"
        }) : document.execCommand("Copy")
    }
    $(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>

右侧全站字数

文字黑色背景加颜色反转

心知天气

解决后台图片过大

支持emoji表情

文章声明

typecho开启Gzip压缩

UserAgent插件

左侧栏友链添加头像

部分设置在handsomeh后台的代码

博主介绍（需要自己取压缩代码）

自定义 CSS

自定义 JavaScript

自定义输出head 头部的HTML代码

自定义输出body 尾部的HTML代码

发表评论 取消回复

typecho设置备忘录

右侧全站字数

文字黑色背景加颜色反转

心知天气

解决后台图片过大

支持emoji表情

文章声明

typecho开启Gzip压缩

UserAgent插件

左侧栏友链添加头像

部分设置在handsomeh后台的代码

博主介绍（需要自己取压缩代码）

自定义 CSS

自定义 JavaScript

自定义输出head 头部的HTML代码

自定义输出body 尾部的HTML代码

发表评论取消回复