代码类

博主介绍闪字效果

博主介绍


在主题外观设置:初级设置>博主的介绍中添加下列代码

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

主题音乐加载优化

主题视频加载优化

底部GitHub样式

自定义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-red {
  background-color: #f00
}
.github-badge .bg-green {
  background-color: #3bca6e
}
.github-badge .bg-purple {
  background-color: #ab34e9
}


左右侧添加信息


博客底部左侧信息博客底部右侧信息中分别添加如下代码

将下面的信息改成你自己的

<div class="github-badge">
    <a href="./" title="© <?php echo date("Y"); ?> Stars_Kim">
        <span class="badge-subject">Copyright</span><span class="badge-value bg-blue">© <?php echo date("Y"); ?> Stars_Kim</span>
    </a>
</div>


将下面的信息改成你自己的

<div class="github-badge">
    <a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动">
        <span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
    </a>
</div>
 | 
<div class="github-badge">
    <a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题,作者:友人C">
        <span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
    </a>
</div>



删除主题内的代码


需要去 handsome/component/footer.php删除原有声明代码,以下为删除完后的效果(大概9~17行)

<div class="wrapper bg-light">
    <span class="pull-right hidden-xs text-ellipsis">
        <?php $this->options->BottomInfo(); ?>
        <div class="github-badge">
            <a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动">
                <span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
            </a>
        </div>
         | 
        <div class="github-badge">
            <a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题,作者:友人C">
                <span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
            </a>
        </div>
    </span>
    <span class="text-ellipsis">
        <div class="github-badge">
            <a href="./" title="© <?php echo date("Y"); ?> Stars_Kim">
                <span class="badge-subject">Copyright</span><span class="badge-value bg-blue">© <?php echo date("Y"); ?> Stars_Kim</span>
            </a>
        </div>
        <?php $this->options->BottomleftInfo(); ?>
    </span>
</div>


插件类

名称 描述 版本 作者
CodePrettify 基于 prismjs 的代码语法高亮插件可显示语言类型、行号,有复制功能 (请勿与其它同类插件同时启用,以免互相影响)详细说明:https://www.xcnte.com/archives/523/ 2.1.5 Xcnte
CommentPush 评论通知推送多服务 1.7.1 高彬展,奥秘Sir
CommentToMail 评论邮件提醒插件,可以通过网址监控运行 4.2.8 Uniartisan
DPlayer DPlayer for typecho 1.1.0 Volio
Handsome handsomePro 唯一配套插件 7.3.1 hewro,hanny
Integration Stars Kim'blog 整合功能插件 1.6.0 Stars_Kim
Login Designer Login Designer博客登录/注册页面美化插件,提供多种美化样式 1.3.0 泽泽社长
MarkdownParse 更快、更强的 Markdown 解析插件 1.2.3 mrgeneral
APlayer for Typecho Meting 在 Typecho 中使用 APlayer 播放在线音乐吧~ 2.1.2 METO
Pio 一个简易的 Live2D 插件,在 @Jad 的项目上增加交互功能 2.4 Dreamer-Paul
ServerStatus Typecho服务器状态插件 2.0.0 Weifeng
UserAgent 显示评论人使用的操作系统和浏览器信息(Handsome主题专用更新时间:2020-3-5 1.1.1 松鼠大大
Last modification:October 23rd, 2020 at 06:33 pm