记录一下 typecho handsome 修改，以免手滑出事。

萌卜兔前后台美化插件

[collapse title=”展开查看详情” status=”false”]

自带功能

  • 动态背景
  • 页面背景透明
  • 主题盒子优化等效果
  • 头像旋转
  • 彩色图标（右侧列表导航栏图标、博客信息标签）
  • 文章选择卡（首页文章图片获取焦点放大、文章列表获取焦点放大）
  • 文章卡阴影化
  • 顶部彩色跑马灯
  • 文章内打赏处插入打赏图片
  • 文章内打赏图标跳动
  • 标题居中
  • 滚动条美化
  • 文章标题美化
  • 彩色标签云
  • 评论框打字粒子特效
  • 动态标题
  • 回到顶部
  • 看板娘
  • 鼠标样式
  • 遮罩特效（网站下雪）
  • （自动）夜间模式
  • 登录壁纸、登录框美化

插件来自@萌卜兔，安装配置方法请看作者 blog 。

我遇到的问题

如果发现彩色标签云需要刷新页面才可以显示，需要在 handsome主题设置-PJAX-PJAX 回调函数中添加以下代码

1
let tags=document.querySelectorAll("#tag_cloud-2 a,.list-group-item .pull-right");let colorArr=["#428BCA","#AEDCAE","#ECA9A7","#DA99FF","#FFB380","#D9B999"];tags.forEach(tag=>{tagsColor=colorArr[Math.floor(Math.random()*colorArr.length)];tag.style.backgroundColor=tagsColor});

更多详情请看作者博客@萌卜兔。

[/collapse]

xcnte 代码高亮插件

[collapse title=”展开查看详情” status=”false”]

实现 Mac 样式的代码高亮插件，会与 handsome 主题代码高亮冲突，需要修改 handsome.min.css 适配。

具体安装以及修改方法请看作者博客 xcnte 。

1
2
from pwn import *
print("hello world~")

[/collapse]

一言居中 删除网站名称

[collapse title=”展开查看详情” status=”false”]

实现效果请看首页顶部。

删除index.php约33行的以下代码

1
<h1 class="m-n font-thin h3 text-black l-h"><?php $this->options->title(); ?></h1>

前往 handsome 设置打开一言，调用的是一言官方接口。

[/collapse]

复制成功弹窗

[collapse title=”展开查看详情” status=”false”]

自定义JavaScript

handsome 设置 ==》 自定义 JavaScript 填入：

1
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});};

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

handsome 设置 ==》 自定义输出body 尾部的HTML代码 填入：

1
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

[/collapse]

组成栏添加选项

[collapse title=”展开查看详情” status=”false”]

修改文件usr/themes/handsome/component/aside.php 。

模仿修改即可。

[/collapse]

一键评论打卡功能

[collapse title=”展开查看详情” status=”false”]

添加自定义JavaScript

首先在后台–>handsome 设置外观–>开发者设置–>自定义JavaScript加入以下代码:

1
2
3
4
5
6
7
8
9
10
function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    }
}

修改主题评论文件

handsome 目录的component/comments.php里面的126行到141行：

替换为下面代码：（也就是将原来整一个 <div class="comment-form-comment form-group">标签替换为下面的）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="comment-form-comment form-group">
    <label for="comment"><?php _me("评论") ?> <span class="required text-danger">（请使用真实邮箱地址，方便接收评论回复）</span>
        <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" style="display: inline;"><a href="javascript:addNumber('滴！访客卡！请上车的乘客系好安全带，现在是：')" class="OwO-logo"><i class="fontello fontello-user face"></i><span class="OwOlogotext">打卡</span></a></div>
    <div class="secret_comment" id="secret_comment" data-toggle="tooltip"
    data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">
        <label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
        <div class="secret_comment_check">
            <label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
                <input type="checkbox" id="secret_comment_checkbox">
                <i></i>
            </label>
        </div>
    </div>
</div>

添加自定义css

在后台–>handsome 设置外观–>开发者设置–>自定义CSS加入以下代码:

1
2
3
4
5
6
.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}

[/collapse]

评论邮件通知

[collapse title=”展开查看详情” status=”false”]

作者博客：https://www.lovekk.org/120.html（已挂）

项目地址：https://github.com/ylqjgm/LoveKKComment

支持SMTP、Send Cloud、阿里云邮件推送三种邮件通知方式。

在评论审核通过、用户评论文章、用户评论被回复时对不同场景进行不同的邮件通知。评论审核通过无法检索评论邮箱，导致无法发信，详情请看项目 issue 区。

以下内容修改自：www.xcnte.com

安装方法

  1. 下载最新版本插件
  2. 将下载的压缩包进行解压并上传至Typecho插件目录中，注意目录名称更改为LoveKKComment
  3. 后台激活插件
  4. 根据自己的实际情况选择邮件发送接口方式
  5. 根据所选的邮件发送接口，配置相应接口参数

自定义模板说明

插件共有三个模板，保存在插件theme目录下，分别为：

approved.html：邮件审核通过通知模板

author.html：文章评论通知作者模板

reply.html：评论回复通知被回复者模板

三个模板使用变量作为内容替换，您只需在自己的模板中增加相应的模板变量即可，模板变量列表如下：

approved.html

  1. {blogUrl}：博客地址
  2. {blogName}：博客名称
  3. {author}：评论者名称
  4. {permalink}：文章链接
  5. {title}：文章标题
  6. {text}：评论内容

author.html

author.html内变量与approved.html内变量一致。

reply.html

  1. {blogUrl}：博客地址
  2. {blogName}：博客名称
  3. {author}：被回复者名称
  4. {permalink}：文章链接
  5. {title}：文章标题
  6. {text}：被回复者评论内容
  7. {replyAuthor}：回复者名称
  8. {replyText}：回复内容

handsome 主题文件修改索引

[collapse title=”展开查看详情” status=”false”]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
component/aside.php        左边导航栏
component/comments.php     评论区
component/footer.php       底部版权、音乐播放器之类
component/header.php       页面头，没啥要改的
component/headnav.php      顶部导航
component/say.php          时光机动态
component/sidebar.php      右侧栏目
component/third_party_comments.php    3.3.0新增，第三方评论
css/        博客CSS，一般不要改
fonts/      博客字体，一般不要改
img/        图像，一般不要改
js/         js文件，一般不要改
lang/       语言文件
libs/Content.php    文章内容
libs/...    一般不要改
usr/        另一个语言文件？
404.php     404界面
archive.php    整合
booklist.php   书单
cross.php      时光机
files.php      归档
functions.php  配置界面的东西
guestbook.php  留言板
index.php      首页
links.php      友链
page.php       文章页面整合
post.php       文章输出

[/collapse]

添加加载耗时和浏览人数

[collapse title=”展开查看详情” status=”false”]
https://sunpma.com/536.html
[/collapse]