注意:此文章基于Miracles 1.2.3 基础上进行魔改

前言

Miracles 作为一款Typecho 主题,从各个层面来说是非常优秀的;但,作为强迫症患者来说, 咕咕咕 改改改 才是硬道理。但在修改之前,一定要记住 :魔改一时爽,更新火葬场 !!!

效果

主界面

头部效果

移动后效果

底部效果

内容界面

头部效果

登录时评论

未登录时评论

......

修改方案

依赖

本方案依赖于一些插件,请在 Github 自行搜索安装

必要插件

  1. Typecho Captcha - 1.0.0 :评论验证码插件 (已经魔改)

可选插件

  1. Comment2Mail - 1.3.0 : 评论邮箱推送插件
  2. Sticky - 1.0.0 : 文章置顶插件
  3. Titleshow - 1.1.2 : 文章加密插件
  4. AdminLogin - 0.1.1 : 后台扫码登录插件

懒人一键下载包: 下载地址

404 网盘 : 不存在的连接

OneDrive :点击跳转

魔改方案

随机图片

原因

主题的图片随机方式特别粗暴:

 Utils::indexTheme('images/postbg/') . mt_rand(1, 20) . ".jpg";

但是容易造成图片重复率过高的问题

建议方案

它们分别在 index.php#28 index.php#53 处,建议封装成方法

但我因为某种特殊的原因就没改 ,只是换成了

Utils::indexTheme('images/redditWebp/') . mt_rand(0, 20) . ".webp";

加载图片

原因

个人觉得章鱼图片太丑了...

建议方案

它们分别在 index.php#28 index.php#53 contents.php#23 处,建议封装成方法

验证码(可选)

原因

防机器人是必须的,验证码机制至少能挡住大部分...

采用 Typecho Captcha 插件,支持中文

建议方案

comments.php 下创建函数

 public static function getCaptchaDiv($imgOutput)
    {
        $t1 = <<<EOF
 <!-- 加入的验证码测试 -->
<div class="container-fluid comment-input">
<style>
    .comment-input ._edit_child {
        display: block;
        resize: none;
        border: 2px solid #ddd;
        border-radius: 5px;
        width: 100%;
        outline: 0;
    }
</style>
    <div class="row">
        <p class="col-md-4">
            <label for="captcha" class="required">验证码</label>
            <input type="text" class="text" name="captcha_code" placeholder="验证码" />
        </p>
        <p class="col-md-4">
            
EOF;
        $t2 = <<<EOF
 </p>
        <p class="col-md-4">
            <label class="required"> ヾ(≧▽≦*)o" </label>
            <input type="text" class="text" name="_edit_child" placeholder="ヾ(≧▽≦*)o  验证码不能丢!" readonly unselectable="on"></input>
        </p>
    </div>
</div>
EOF;
        return $t1 . $imgOutput . $t2;
    }
/*
垃圾代码,不要在意 ...
*/

然后在 includes/comments.php#111 后插入

<?php echo getCaptchaDiv(Captcha_Plugin::outputStr());?>

自定义 JavaScript 和 CSS

首先为 includes/header.php#113 的标签添加 ID id="_edit_nav_hidden"

然后添加JavaScript

var _edit_nav_hidden = document.getElementById("_edit_nav_hidden")
    var _edit_nav_hidden_height = _edit_nav_hidden.clientHeight
    function edit_nav_color_update(){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop > _edit_nav_hidden_height) {
            _edit_nav_hidden.style.background = "#FFFFFF"
            _edit_nav_hidden.style.boxShadow = "0 0 20px 0px #808080"
        } else {
            _edit_nav_hidden.style.background = "transparent"
            _edit_nav_hidden.style.boxShadow = ""
        }
    }
    $(window).scroll(function() {
        edit_nav_color_update()
    })
    edit_nav_color_update()

最后添加CSS

         :root {
            --theme-color: #e91e63;
          }
        .nav {
            box-shadow: none;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
        }
        nav.large-screen.nav.nav-fixed {
            background: transparent;
        }
        .search {
            background: white;
        }
        .post-body,
        .post-item {
            background: #fff;
            box-shadow: 7px 7px 20px 0px #808080;
            -moz-box-shadow: 7px 7px 20px #808080;
            -webkit-box-shadow: 7px 7px 20px #808080;
            transition: background .1s;
        }
        button#login-open {
            display: none;
            visibility: hidden
        }
        a#login-open-mobile {
            display: none;
            visibility: hidden
        }
        button#toggle-options-button {
            display: none;
            visibility: hidden;
        }
        .nav-icon-button {
            background: transparent;
            transition: background .2s;
        }
        span.comment-date {
            color: var(--theme-color);
        }
        i.iconfont {
            color: var(--theme-color);
        }
        p.post-button-box {
            display: none;
        }
        /*
        td.hljs-ln-line.hljs-ln-numbers {
            display: none;
        } */
        button.submit {
            background: var(--theme-color);
       }
       .search-form button.submit {
           background: none;
       }

附加选项

去除黑夜模式

删除 head.php <?php if(date("H") > 20 || date("H") < 7){echo 'body-dark';} ?>

然后删除 miracles.min.js#102

EOF