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

萌卜兔前后台美化插件

展开查看详情

自带功能

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

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

我遇到的问题

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

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

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

xcnte 代码高亮插件

展开查看详情

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

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

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

一言居中 删除网站名称

展开查看详情

实现效果请看首页顶部。

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

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

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

复制成功弹窗

展开查看详情

自定义JavaScript

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

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

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

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

组成栏添加选项

展开查看详情

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

模仿修改即可。

一键评论打卡功能

展开查看详情

添加自定义JavaScript

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

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">标签替换为下面的)

                    <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加入以下代码:

.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}

评论邮件通知

展开查看详情

作者博客:https://www.lovekk.org/120.html(已挂)

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

支持SMTPSend 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"]

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       文章输出

添加加载耗时和浏览人数

展开查看详情

Last modification:July 11th, 2020 at 02:19 pm