handsome主题修改记录

博主： linsun
发布时间：2019 年 12 月 04 日
3677次浏览
11 条评论
7094字数
分类：记录

## 升级Typecho版本

下载最新 [（开发版）Typecho源程序](http://typecho.org/download)

备份并删除域名根目录下的`admin`、`var`、`index.php`、`install.php`，文件夹与文件

将下载的压缩包中`admin`、`var`、`index.php`、`install.php`文件夹与文件上传至域名根目录下即可

再次进入后台会提示升级程序，点击完成即可完成升级

# F12自动跳转页面

将以下代码放至`自定义输出head 头部的HTML代码`框中

```js
<script>var element = new Image();Object.defineProperty(element,'id',{get:function(){window.location.href="/about-disclaimer-contact"}});console.log(element);</script>
```

## 防小白js代码

```js

var check = (function () {
            var callbacks = [], timeLimit = 50, open = false;
            setInterval(loop, 1);
            return {
                addListener: function (fn) {
                    callbacks.push(fn);
                },
                cancleListenr: function (fn) {
                    callbacks = callbacks.filter(function (v) {
                        return v !== fn;
                    });
                }
            }
            function loop() {
                var startTime = new Date();
                debugger;
                if (new Date() - startTime > timeLimit) {
                    if (!open) {
                        callbacks.forEach(function (fn) {
                            fn.call(null);
                        });
                    }
                    open = true;
                    window.stop();
                } else {
                    open = false;
                }
            }
        })();
        check.addListener(function () {
            window.location.reload();
        });

document.onkeydown = function(){
    if(window.event && window.event.keyCode == 123) {
        alert("F12被禁用");
        event.keyCode=0;
        event.returnValue=false;
    }

if(window.event && window.event.keyCode == 13) {
        window.event.keyCode = 505;
    }

if(window.event && window.event.keyCode == 8) {
        alert(str+"\n请使用Del键进行字符的删除操作！");
        window.event.returnValue=false;
    }
}
```

## 多个视频同时播放

在开发者设置`自定义输出body 尾部的HTML代码` 添加以下代码

```js
<script type="text/javascript">
function playerautopasue() {
    window.videos = document.getElementsByTagName('video');
    for (var i = 0; i < window.videos.length; i++) {
        window.videos[i].addEventListener('play',
        function() {
            for (let j = 0; j < window.videos.length; j++) {
                if (window.videos[j] != this) window.videos[j].pause();
            }
        });
    }
}
playerautopasue();
</script>
```

在`PJAX回调函数`添加以下代码

```js
playerautopasue();
```

## UserAgent插件

将以下代码添加至`component`目录下的`comments.php`文件内，大约`60~80`行左右。

```PHP
<?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?> 
```

**修改后代码如下：**

```PHP
<span class="comment-author vcard">
    <b class="fn"><?php echo $author; ?></b><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>
</span>
```

**获取真实IP**

在Typecho目录中`config.inc.php`文件添加以下代码：

```PHP
//** 防止CDN造成无法获取客户真实IP地址 */
if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])) 
{
    $list = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']);
    $_SERVER['REMOTE_ADDR'] = $list[0];
}
```

## Typecho后台评论管理图片与视频显示尺寸过大

在`style.css`文件末端添加以下代码，路径`/admin/css`

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

## 文章标题居中

将以下代码添加至`自定义CSS`选项

```css
/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}
```

## 修改底部页脚标签

将以下代码添加至`博客底部左侧信息`选项

```JavaScript
<div class="github-badge">
<a href="./" title="Linsun">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">
&copy;<script>document.write(new Date().getFullYear())</script>&nbsp;
Linsun</span>
</a>
</div>
&nbsp;|&nbsp;
<div class="github-badge">
<a href="https://beian.miit.gov.cn" title="备案号" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">鲁ICP备</span><span class="badge-value bg-green">19056473号-1</span>
</a>
</div>
```

将以下代码添加至`博客底部右侧信息`选项

```JavaScript
<div class="github-badge">
<a href="https://wbessy.com/" target="_blank" title="领象's Blog" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">领象</span><span class="badge-value bg-red">'s Blog</span>
</a>
</div>
```

将以下代码添加至`自定义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-brightgreen {
    background-color: #4DC820 !important;
}
.github-badge .bg-orange {
    background-color: #FFA500 !important;
}
.github-badge .bg-blueviolet {
    background-color: #8833D7 !important;
}
.github-badge .bg-firebrick {
    background-color: #EE2C2C !important;
}
.github-badge .bg-blue {
    background-color: #007EC6 !important;
}
.github-badge .bg-lightgrey {
    background-color: #9F9F9F !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
    background-color: #555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
    background-color: #9f9f9f !important;
}
```

修改`footer.php`文件删除原有声明代码，路径`handsome/component`（大概1~12行）

## 生成精美的logo

[生成网址](https://www.namecheap.com/logo-maker/app/new)

输入框填入LOGO，选择字体一共六次每次提供三种字体样式，选择颜色，选择图案最多选择三个。

**对应选项**

- color - 颜色定制
- text - 刚才选择的字体。
- slogan - 如果对刚才选择的字体不满意，可以在这寻找更多字体。
- icon - 刚才选择的图标，可以重新选择。
- layout - 布局模板，一共有三种。

最好选择白底的，做出来的时候是透明的，可以兼容更多的背景，选择好之后，点击download进行下载。

**编辑logo**

打开`vector`文件夹中的`default-monochrome.svg`文件，搜索`fill`

将这个svg文件上传到服务器上，并且记住他的路径。

打开后台，找到外观，进行配置， `初级设置`----`博客logo的HTML结构`，将以下代码，复制进去，替换路径即可使用

```HTML
<img src="你的svg文件路径" width="100%" height="100%"/>
```

首先`svg`文件，通过`img`引入的方式是不支持css的，所以需要转成`svg`，找到后台的`开发者设置`----`自定义输出head头部的HTML代码`，将下面的复制到新的一行

```html
<script src="https://www.shutua.com/usr/uploads/svg-inject.min.js"></script>
```

进入`开发者设置`-----`自定义css`，将下面的复制，复制到最后面

```css
/* 站点logo */
.navbar-brand.text-lt{
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
}
.navbar-brand.text-lt{
     padding: 5px
}
```

找到夜间模式插件的目录`/usr/plugins/Darkmode`，如果是插件用户，需要修改`min.css`文件，如果是自己添加代码的，改自己引入的那个css就可以了

编辑`darkmode.css`文件，然后在图里的位置增加以下代码，即可

```css
.night .iconLeft:first-child{
    fill: #a0a0a0 !important;
}
```

从夜间模式的标题里取色，根据自己需要修改即可。如果是插件安装的，将`darkmode.css`文件全选复制，进行css压缩

[css压缩网址](https://tool.chinaz.com/Tools/CssFormat.aspx)

然后压缩完的代码复制进`darkmode.min.css`文件内保存即可。

## 文章内挂载哔哩哔哩视频

将以下代码添加到主题的自定义CSS里

```CSS
/*视频挂载*/

.iframe_video {
    position: relative;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .iframe_video {
        height: 15em;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .iframe_video {
        height: 20em;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .iframe_video {
        height: 30em;
    }
}

@media only screen and (min-width: 1200px) {
    .iframe_video {
        height: 40em;
    }
}

.iframe_cross {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%
}

.iframe_cross iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}
```

复制嵌入代码到文章需要放置的位置。然后在给`iframe`这个标签添加 `class="iframe_video"`如下:

```HTML
<iframe class="iframe_video" src="//player.bilibili.com/player.html?aid=285038725&bvid=BV1fc41187Ub&cid=172657977&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

```

## 卸载阿里云盾

```bash
# 卸载阿里云盾（安骑士）脚本为阿里云官方提供，安全放心。
bash <(wget --no-check-certificate -qO- 'http://update.aegis.aliyun.com/download/uninstall.sh')
bash <(wget --no-check-certificate -qO- 'wget http://update.aegis.aliyun.com/download/quartz_uninstall.sh')

# 删除残留
pkill aliyun-service
rm -fr /etc/init.d/agentwatch /usr/sbin/aliyun-service
rm -rf /usr/local/aegis*

# 屏蔽云盾 IP
iptables -I INPUT -s 140.205.201.0/28 -j DROP
iptables -I INPUT -s 140.205.201.16/29 -j DROP
iptables -I INPUT -s 140.205.201.32/28 -j DROP
iptables -I INPUT -s 140.205.225.192/29 -j DROP
iptables -I INPUT -s 140.205.225.200/30 -j DROP
iptables -I INPUT -s 140.205.225.184/29 -j DROP
iptables -I INPUT -s 140.205.225.183/32 -j DROP
iptables -I INPUT -s 140.205.225.206/32 -j DROP
iptables -I INPUT -s 140.205.225.205/32 -j DROP
iptables -I INPUT -s 140.205.225.195/32 -j DROP
iptables -I INPUT -s 140.205.225.204/32 -j DROP
```

## 部署cors-anywhere

下载[cors-anywhere](https://github.com/Rob--W/cors-anywhere/)上传至服务器并解压，重命名为`corsanywhere`

```bash
# 安装
cd corsanywhere
npm install

# 安装Screen运行程序
yum -y install screen

# 启动
screen -S cors
node server.js
```

然后使用IP:8080就可以访问了，使用域名访问用宝塔反代即可
更改端口：更改`package.json`文件中的端口号

## 添加动态RSS

需要在宝塔面板安装`PM2管理器`

**安装与启动RSSHub**

```bash
# 安装
git clone https://github.com/DIYgod/RSSHub.git
cd RSSHub
npm install

# 安装Screen运行程序
yum -y install screen

# 启动
screen -S RSSHub
cd RSSHub
npm start
```

然后使用`IP:1200`就可以访问了，使用域名访问用宝塔反代即可
更改端口编辑`config.js`文件保存即可，路径:`RSSHub/lib/config.js`
[RSSHub使用文档](https://docs.rsshub.app)

**CORS跨域问题**
在原有的`RSS`源地址前面加上 `https://cors-anywhere.herokuapp.com/`即可（这是一个专门的跨域请求网址）
例如：`https://cors-anywhere.herokuapp.com/https://rss.wbessy.com/weibo/user/1858065064`
注：对访问速度有些许影响，如不想使用官方API请自行搭建

## 调用handsome主题自带的弹窗提示

**函数调用方式与说明**

```PHP
    $.message({
    # 弹窗标题下方的文字
    message: "客官请进",

# 弹窗的标题
    title: "欢迎来到领象's Blog",

# 弹窗类型（info、success、warning）
    type: "info",

# 默认即可
    autoHide: !1,
    
    # 停留时间（毫秒，1秒为1000毫秒）
    time: "3000"
})
```

**网站加载完成并提示来路URL**

将以下代码填入`开发者设置 → 自定义输出body 尾部的HTML代码`中（注意：要放在广告异步推送代码之前，放在后面可能会影响加载。）

```PHP
    <script>
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if  (kaygb_referrer != ""){
return "感谢您的访问！ 您来自：<br>" + document.referrer;
}else{
return "";
}}
$.message({
    message: "为了网站的正常运行，请不要使用广告屏蔽插件，谢谢！<br >" + kaygb_referrer(),
    title: "网站加载完成",
    type: "success",
    autoHide: !1,
    time: "3000"
})

</script>
```

**复制成功之后弹窗提示**

将以下代码填入`开发者设置 → 自定义Javascript`中

```JS
    kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
    message: "尊重原创，转载请注明出处！<br> 本文作者：ML<br>原文链接："+sitesurl,
    title: "复制成功",
    type: "warning",
    autoHide: !1,
    time: "5000"
    })
}}
```

如果你开启了PJAX，那么需要在`主题设置 → PJAX → PJAX回调函数`一栏内填入以下函数，然后保存即可。

`kaygb_copy();`

**独立页面或文章单独调用**

```HTML
# 独立页面模板添加以下代码
<script>
$.message({
    message: "这里有我的实验室，子站点，项目展示和联系方式！",
    title: "欢迎来到秘密基地！",
    type: "info",
    autoHide: !1,
    time: "3000"
})
</script>

# 文章使用时插入可执行代码，也就是用三个英文感叹号包裹
```

但想要在独立页面实现弹窗还是不要直接在独立页面编辑内插入可执行代码（文章内调用除外），需要的还请添加代码到模板内来实现！

## 搭建DPlayer视频弹幕接口

**安装Docker**

在宝塔安装`Docker`

安装`Docker Compose`

```bash
curl -L https://github.com/docker/compose/releases/download/1.17.0/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
chmod +x /usr/local/bin/docker-compose
```

**运行镜像**

```bash
# 下载源码包
wget https://github.com/MoePlayer/DPlayer-node/archive/master.zip

# 解压
unzip master.zip

# 进入工作文件夹
cd DPlayer-node-master

# 新建镜像
docker-compose build
# 拉取其它镜像并后台运行
docker-compose up -d
```

访问地址为`http://ip:1207`，数据和日志存放在`/root/dplayer`文件夹。

**其他**

修改端口或者存放文件夹路径，在新建镜像之前操作如下：

```yml
#编辑DPlayer-node文件夹的docker-compose.yml文件，部分修改如下
mongo:
  volumes:
      - ~/dplayer/db:/data/db  #数据库存放文件夹，~/dplayer/db为映射在外部的路径，自行修改，
web:
  ports:
    - 1207:1207  #api映射到外部的端口，将前面的1207修改成你想要的即可
  volumes:
    - ~/dplayer/logs:/usr/src/app/logs  #同数据库操作
    - ~/dplayer/pm2logs:/root/.pm2/logs  #同上
```

改完后再新建镜像即可,如果已经新建镜像了，但想改，那就清空之前的镜像再修改操作如下：

**快速清理Docker垃圾文件**

```bash
# 此命令会清空所有的Docker文件
docker kill $(docker ps -aq)
docker rm $(docker ps -aq)
docker rmi $(docker images -q)
docker volume rm $(docker volume ls -q)

# 此命令会保留正在运行的Docker镜像，其它会全部清除
docker rm $(docker ps -aq)
docker rmi $(docker images -q)
docker volume rm $(docker volume ls -q)
```

如域名访问使用宝塔反代即可。

## DPlayer播放器

**使用与问题**

```html
# 默认不自动播放，弹幕开启
dplayer url="视频地址" pic="封面地址"/

# 关闭弹幕
dplayer url="视频地址" pic="封面地址" danmu="false"/

# 开启自动播放
dplayer url="视频地址" pic="封面地址" autoplay="true"/

# 添加额外弹幕源(例：bilibili弹幕)
dplayer url="视频地址" pic="封面地址 autoplay="true" addition="https://api.prprpr.me/dplayer/bilibili?aid=7286894"/

注：以上地址不得已去掉 [] ，使用时请加上。

# 开启pjax无法自动加载视频，添加pjax回调
loadDPlayer();
```

[DPlayer播放器下载地址](https://github.com/MoePlayer/DPlayer-Typecho)

## 添加百度收录检测

在主题`post.php`文件中加入以下代码:

```PHP

<li class="meta-baidu"><span class="post-icons"><i class="glyphicon glyphicon-refresh" id="baidu_icon"></i></span><span class="meta-value" id="baidu_result">加载中</span></li>
```

在post.php中加入（需要引入jquery）

```PHP
<script>
function baidu_check(){
 $.getJSON("您的域名/baidu.php?domain="+window.location.href,function(result){ 
     if (result.code == 200) {
         $('#baidu_icon').removeClass('glyphicon-refresh');
         $('#baidu_icon').addClass('glyphicon-ok-circle');
         $('#baidu_result').text('百度已收录');
     }else if(result.code == 403){
         $('#baidu_icon').removeClass('glyphicon-refresh');
         $('#baidu_icon').addClass('glyphicon-info-sign');
         $('#baidu_result').text('百度未收录');
         baidu_push();
     }else{
          $('#baidu_icon').removeClass('glyphicon-refresh');
         $('#baidu_icon').addClass('glyphicon-remove-circle');
         $('#baidu_result').text('查询收录失败');
     }
 });
}
function baidu_push(){
 var bp = document.createElement('script');
 var curProtocol = window.location.protocol.split(':')[0];
 if (curProtocol === 'https') {
     bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
 } else {
     bp.src = 'http://push.zhanzhang.baidu.com/push.js';
 }
 var s = document.getElementsByTagName("script")[0];
 s.parentNode.insertBefore(bp, s);
}
baidu_check();
</script>
```

百度收录API源码

```PHP
<?php
/**
 * Baidu
 * @editer: Weifeng
 * @link: https://wfblog.net
 * @version: 1.0
 */

error_reporting(0);
header("Access-Control-Allow-Origin:*");
header('Content-type: application/json');

$domain = @$_GET['domain'];
if(!isset($domain) || empty($domain) || $domain==''){
    $data = array(
        "code" => false,
        "msg" => "未传入请求参数！"
    );
    echo json_encode($data,JSON_UNESCAPED_UNICODE);
    exit;
}
if(substr($domain, -1) == '/'){
    $domain = substr($domain,0,strlen($domain)-1);
}

$data = checkBaidu($domain);
echo json_encode($data,JSON_UNESCAPED_UNICODE);

function GetBetween($content,$start,$end){
    $r = explode($start, $content);
    if (isset($r[1])){
        $r = explode($end, $r[1]);
        return $r[0];
    }
}
?>
```

## 右侧添加访客数量、网站响应耗时

将以下代码添加至`Content.php`文件之中，放在`class Content{}`之前

```PHP
    /**
     * 访问总量
     */
     function theAllViews(){
             $db = Typecho_Db::get();
             $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
                 echo number_format($row[0]['SUM(VIEWS)']);
     }

/**
     * 响应时间
     */
    function timer_start() {
        global $timestart;
        $mtime = explode( ' ', microtime()  );
        $timestart = $mtime[1] + $mtime[0];
        return true; 
    }
    timer_start();
    function timer_stop( $display = 0, $precision = 3  ) {
        global $timestart, $timeend;
        $mtime = explode( ' ', microtime()  );
        $timeend = $mtime[1] + $mtime[0];
        $timetotal = number_format( $timeend - $timestart, $precision  );
        $r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
        if ( $display  ) {
            echo $r;
        }
        return $r;
    }
```

将以下代码添加至`sidebar.php`文件合适位置

```PHP
           <li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="user"></i></span> <span 
                       class="badge
            pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>
            
            <li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="clock"></i></span> <span 
                       class="badge
            pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>
```

## 右侧添加全站字数

将以下代码添加至`sidebar.php`文件开头之中

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

将以下代码添加至`sidebar.php`文件之中（位置大概在 90 多行）

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

## 删除掉左侧栏的组成二字和分割线

路径：usr/themes/handsome/component/aside.php 删除126至130行

```php
<li class="line dk"></li>

<li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
<span><?php _me("组成") ?></span>
</li>
```

## 控制Typecho后台评论图片的大小

修改文件路径：`您的域名/admin/css/style.css`

```CSS
div .comment-content img{border: 0;max-height: 720px; max-width: 640px}
```

其中720为最大高度，640为最大宽度，可以自己根据实际调整；
正在使用cdn的需要刷新cdn缓存；

## Typecho更改显示日期方式

在后台设置 → 评论 和 设置 → 阅读里面修改成 `Y-m-d H:i:s`

## 开启gzip压缩

找到你的Typecho的网站根目录中的index.php
添加第十行代码：

```PHP
/** 开启gzip压缩, add by yovisun */
ob_start('ob_gzhandler');
```

[网页GZIP压缩检测][1]

## 侧栏增加成长历史

修改方法：打开`usr/themes/handsome/component/sidebar.php`在"博客信息"下面增加代码

```PHP

          <section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear">
                  <h3 class="widget-title m-t-none text-md"><?php _me("成长历史") ?></h3>
                  <div class="tags l-h-2x">
                      <?php Typecho_Widget::widget('Widget_Contents_Post_Date','type=year&format=Y')->to($tags); ?>
                      <?php if($tags->have()): ?>
                          <?php while ($tags->next()): ?>
                              <a href="<?php $tags->permalink();?>" class="label badge" title="<?php $tags->date(); ?>年的博文" data-toggle="tooltip"><?php $tags->date(); ?>年</a>
                          <?php endwhile; ?>
                      <?php endif; ?>
                  </div>
          </section>
```

## 添上滑稽小表情

[下载地址][2]

1. 复制owo.json到`handsome/usr/`
2. 复制paopao文件夹到`handsome/usr/img/emotion/`
3. 开发者 --> css添加以下代码

```css
/*滑稽小表情自定义大小*/
.emotion-funny {
    width: 30px;
}
.comment-content-true img.emotion-funny {
    max-width: 100%!important;
}
```

## 一键评论打卡

1、首先在后台 --> `设置外观` --> `开发者设置` --> `自定义JavaScript`加入以下代码:
2、然后在后台 --> `设置外观` --> `PJAX` --> `PJAX回调函数`也加入以下的代码

```PJAX
/*一键评论*/
function a(a, b, c) {
        if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();
        else if (a.selectionStart || "0" == a.selectionStart) {
            var l = a.selectionStart,
                m = a.selectionEnd,
                n = m;
            c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);
            c ? n += b.length + c.length : n += b.length - m + l;
            l == m && c && (n -= c.length);
            a.focus();
            a.selectionStart = n;
            a.selectionEnd = n
        } else a.value += b + c, a.focus()
}
var b = (new Date).toLocaleTimeString(),
        c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
    daka: function() {
        a(c, "滴！学生卡！打卡时间：" + b, "，请上车的乘客系好安全带~")
    },
    zan: function() {
        a(c, " 写得好好哟,我要给你生猴子！::funny:04:: ")
    },
    cai: function() {
        a(c, "骚年,我怀疑你写了一篇假的文章！::funny:03:: ")
    }
};
```

3、打开`component/comments.php`的`130`行后加入以下代码：

```PHP
                     <div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext"></span></div></div>
              <div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div>
          <div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div>
```

放在以下：

```PHP
                        <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"></div>
```

4、在后台 --> `设置外观` --> `开发者设置` --> `自定义CSS`加入以下代码:

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

## 文章底部版权

打开`usr/themes/handsome/post.php`，在92行附近加此代码：

```PHP

<blockquote class="content-copyright" style="margin-top:50px;background-color:rgba(245,245,245,0.3);border-left:5px solid #dde6e9!important;">
    <p>
        <b>版权声明</b>：若文中无特殊说明，则本文为原创文章，版权归 <a href="https://wbessy.com" target="_blank">领象's Blog</a> 所有。
    </p>
    <p>
        <b>本文链接</b>：<a href="<?php $this->permalink()  ?>"><?php $this->permalink() ?></a>
    </p>
    <p>
        所有原创文章采用 <a href="https://creativecommons.org/licenses/by-nc/4.0/deed.zh" target="_blank">知识共享署名-非商业性使用 4.0 国际许可协议</a> 进行许可。
        <br>
        您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。
    </p>
</blockquote>
```

**例：在以下代码底部添加**

```PHP
         
         <div id="post-content" class="wrapper-lg">
          <div class="entry-content l-h-2x">
          <?php echo Content::postContent($this,$this->user->hasLogin());
          ?>
```

ePayForTypecho自媒体付费阅读插件
----

在page.php与post.php文件分别在第27行与第91行以下加入以下代码，。
`<?php echo TePay_Plugin::getTePay(); ?>`

## 代码高亮插件Code Prettify

[插件下载](https://zy.wbessy.com/WJ/%E4%BB%A3%E7%A0%81%E9%AB%98%E4%BA%AE%E6%8F%92%E4%BB%B6Code%20Prettify/CodePrettify.zip)

添加pjax回调参数路径：`主题` --> `设置外观` -->` Pjax `--> `PJAX回调函数`
插件内勾选显示行号输入以下内容：

```JavaScriptCopy
if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
                for (var i = 0; i < pres.length; i++){
                    if (pres[i].getElementsByTagName('code').length > 0)
                        pres[i].className  = 'line-numbers';}
Prism.highlightAll(true,null);}
```

插件内如不勾选显示行号输入一下内容：

```JavaScriptCopy
if (typeof Prism !== 'undefined') {
Prism.highlightAll(true,null);}
```

修改`handsome.min.css`文件，路径`/usr/themes/handsome/assets/css/`；
将以下`原有代码`替换为`新增代码`

```css
# 原有代码
pre{padding:0}pre code{display:block;overflow-x:auto;position:relative;margin:0;padding:15px}

# 新增代码
#post-content pre code{display:block;overflow-x:auto;position:relative;margin:0;padding-left:50px;}pre code{position:relative;display:block;overflow-x:auto;margin:4.4px 0.px .4px 1px;padding:0;max-height:500px;padding-left:3.5em}
```

## 复制弹框版权提醒

[下载layui程序][3]上传至网站根目录下
首先将下方代码复制添加至后台主题设置`自定义输出head 头部的HTML代码`

```HTML

<script src="您的网址/layer/layer.js"></script>
```

最后复制下方代码添加至后台主题设置自定义`JavaScript`即可

```JavaScript

document.body.oncopy = function() {layer.msg('复制成功，若要转载请务必保留本文链接！');};
```

## 文本框打字机特效

复制下方代码添加至后台主题设置`自定义输出head 头部的HTML代码`即可

```HTML

<script type="text/javascript" src="您的网址/commentTyping.js"></script>
```

## 给网站添加crisp在线客服插件

1. [注册crisp账户并添加网站][4]
2. 注册完成后，点击`设置`-`网站设置`-`显示整合`-`HTML`，复制代码添加至后台主题设置`自定义输出head 头部的HTML代码`即可

[1]: http://tool.chinaz.com/gzips/
[2]: https://quqi.gblhgk.com/s/2104994/KZumqyNhfAp2tBoI
[3]: http://layer.layui.com/
[4]: https://app.crisp.chat/initiate/signup/

最后修改：2020 年 11 月 04 日 01 : 12 PM

11 条评论

Arcitcgn
2021-07-19 19:24:51

你好，文字框打字特效的commentTyping.js在哪呢？

回复
1. Arcitcgn
  2021-07-19 19:26:02
  
  @Arcitcgn
  
  另外，博主，你博客文章悬停上浮的修改教程能发一下吗？
  
  回复
  1. linsun
    2021-07-20 06:08:58
    
    @Arcitcgn
    
    年代久远而且这段时间我确认忙你去主题论坛翻翻吧
    
    回复
    
    Arcitcgn
    2021-07-20 11:39:11
    
    @linsun
    
    好吧
    
    回复
8232374
2021-03-20 10:48:08

你这个评论回复会自动发右键咋弄的奥~

回复
1. linsun
  2021-03-20 10:54:45
  
  @8232374
  
  我这都是默认配置
  
  回复
  1. 8232374
    2021-03-20 10:56:08
    
    @linsun
    
    我打错字了，就是你这个评论回复有邮件通知这个功能。
    
    回复
    
    linsun
    2021-03-20 11:00:07
    
    @8232374
    
    这个插件
    https://github.com/gaobinzhan/CommentPush
    
    回复
    
    8232374
    2021-03-20 11:50:39
    
    @linsun
    
    你的邮件模板可以分享下不~
    
    回复
    
    linsun
    2021-03-20 11:58:28
    
    @8232374
    
    给我下联系方式
    
    回复
    
    8232374
    2021-03-20 11:01:05
    
    @linsun
    
    谢谢您哈~
    
    回复

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

音乐解密工具——unlock-music
浏览次数: 9719
Typecho 付费阅读插件
浏览次数: 4916
搭建PT站——NexusPHP
浏览次数: 4614
handsome主题修改记录
浏览次数: 3678
开源笔记本——Joplin
浏览次数: 2989

hoho
后台进去了。英文菜单重新安装了。就好了。谢谢额
hoho
重新安装了一下，可以进去后台了，。，。还是非常感谢您的努力
hoho
那先关掉？
hoho
该评论仅登录用户及评论双方可见
hoho
该评论仅登录用户及评论双方可见

handsome主题修改记录

linsun • 2019 年 12 月 04 日

## 升级Typecho版本

下载最新 [（开发版）Typecho源程序](http://typecho.org/download)

备份并删除域名根目录下的`admin`、`var`、`index.php`、`install.php`，文件夹与文件

将下载的压缩包中`admin`、`var`、`index.php`、`install.php`文件夹与文件上传至域名根目录下即可

再次进入后台会提示升级程序，点击完成即可完成升级

# F12自动跳转页面

将以下代码放至`自定义输出head 头部的HTML代码`框中

```js
<script>var element = new Image();Object.defineProperty(element,'id',{get:function(){window.location.href="/about-disclaimer-contact"}});console.log(element);</script>
```

## 防小白js代码

if(window.event && window.event.keyCode == 13) {
        window.event.keyCode = 505;
    }

if(window.event && window.event.keyCode == 8) {
        alert(str+"\n请使用Del键进行字符的删除操作！");
        window.event.returnValue=false;
    }
}
```

## 多个视频同时播放

在开发者设置`自定义输出body 尾部的HTML代码` 添加以下代码

在`PJAX回调函数`添加以下代码

```js
playerautopasue();
```

## UserAgent插件

将以下代码添加至`component`目录下的`comments.php`文件内，大约`60~80`行左右。

```PHP
<?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?> 
```

**修改后代码如下：**

```PHP
<span class="comment-author vcard">
    <b class="fn"><?php echo $author; ?></b><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>
</span>
```

**获取真实IP**

在Typecho目录中`config.inc.php`文件添加以下代码：

## Typecho后台评论管理图片与视频显示尺寸过大

在`style.css`文件末端添加以下代码，路径`/admin/css`

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

## 文章标题居中

将以下代码添加至`自定义CSS`选项

```css
/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}
```

## 修改底部页脚标签

将以下代码添加至`博客底部左侧信息`选项

将以下代码添加至`博客底部右侧信息`选项

将以下代码添加至`自定义CSS`选项

修改`footer.php`文件删除原有声明代码，路径`handsome/component`（大概1~12行）

## 生成精美的logo

[生成网址](https://www.namecheap.com/logo-maker/app/new)

输入框填入LOGO，选择字体一共六次每次提供三种字体样式，选择颜色，选择图案最多选择三个。

**对应选项**

最好选择白底的，做出来的时候是透明的，可以兼容更多的背景，选择好之后，点击download进行下载。

**编辑logo**

打开`vector`文件夹中的`default-monochrome.svg`文件，搜索`fill`

将这个svg文件上传到服务器上，并且记住他的路径。

打开后台，找到外观，进行配置， `初级设置`----`博客logo的HTML结构`，将以下代码，复制进去，替换路径即可使用

```HTML
<img src="你的svg文件路径" width="100%" height="100%"/>
```

```html
<script src="https://www.shutua.com/usr/uploads/svg-inject.min.js"></script>
```

进入`开发者设置`-----`自定义css`，将下面的复制，复制到最后面

```css
/* 站点logo */
.navbar-brand.text-lt{
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
}
.navbar-brand.text-lt{
     padding: 5px
}
```

找到夜间模式插件的目录`/usr/plugins/Darkmode`，如果是插件用户，需要修改`min.css`文件，如果是自己添加代码的，改自己引入的那个css就可以了

编辑`darkmode.css`文件，然后在图里的位置增加以下代码，即可

```css
.night .iconLeft:first-child{
    fill: #a0a0a0 !important;
}
```

从夜间模式的标题里取色，根据自己需要修改即可。如果是插件安装的，将`darkmode.css`文件全选复制，进行css压缩

[css压缩网址](https://tool.chinaz.com/Tools/CssFormat.aspx)

然后压缩完的代码复制进`darkmode.min.css`文件内保存即可。

## 文章内挂载哔哩哔哩视频

将以下代码添加到主题的自定义CSS里

```CSS
/*视频挂载*/

.iframe_video {
    position: relative;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .iframe_video {
        height: 15em;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .iframe_video {
        height: 20em;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .iframe_video {
        height: 30em;
    }
}

@media only screen and (min-width: 1200px) {
    .iframe_video {
        height: 40em;
    }
}

.iframe_cross {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%
}

.iframe_cross iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}
```

复制嵌入代码到文章需要放置的位置。然后在给`iframe`这个标签添加 `class="iframe_video"`如下:

```

## 卸载阿里云盾

# 删除残留
pkill aliyun-service
rm -fr /etc/init.d/agentwatch /usr/sbin/aliyun-service
rm -rf /usr/local/aegis*

## 部署cors-anywhere

下载[cors-anywhere](https://github.com/Rob--W/cors-anywhere/)上传至服务器并解压，重命名为`corsanywhere`

```bash
# 安装
cd corsanywhere
npm install

# 安装Screen运行程序
yum -y install screen

# 启动
screen -S cors
node server.js
```

然后使用IP:8080就可以访问了，使用域名访问用宝塔反代即可
更改端口：更改`package.json`文件中的端口号

## 添加动态RSS

需要在宝塔面板安装`PM2管理器`

**安装与启动RSSHub**

```bash
# 安装
git clone https://github.com/DIYgod/RSSHub.git
cd RSSHub
npm install

# 安装Screen运行程序
yum -y install screen

# 启动
screen -S RSSHub
cd RSSHub
npm start
```

## 调用handsome主题自带的弹窗提示

**函数调用方式与说明**

```PHP
    $.message({
    # 弹窗标题下方的文字
    message: "客官请进",

# 弹窗的标题
    title: "欢迎来到领象's Blog",

# 弹窗类型（info、success、warning）
    type: "info",

# 默认即可
    autoHide: !1,
    
    # 停留时间（毫秒，1秒为1000毫秒）
    time: "3000"
})
```

**网站加载完成并提示来路URL**

将以下代码填入`开发者设置 → 自定义输出body 尾部的HTML代码`中（注意：要放在广告异步推送代码之前，放在后面可能会影响加载。）

</script>
```

**复制成功之后弹窗提示**

将以下代码填入`开发者设置 → 自定义Javascript`中

如果你开启了PJAX，那么需要在`主题设置 → PJAX → PJAX回调函数`一栏内填入以下函数，然后保存即可。

`kaygb_copy();`

**独立页面或文章单独调用**

# 文章使用时插入可执行代码，也就是用三个英文感叹号包裹
```

但想要在独立页面实现弹窗还是不要直接在独立页面编辑内插入可执行代码（文章内调用除外），需要的还请添加代码到模板内来实现！

## 搭建DPlayer视频弹幕接口

**安装Docker**

在宝塔安装`Docker`

安装`Docker Compose`

```bash
curl -L https://github.com/docker/compose/releases/download/1.17.0/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
chmod +x /usr/local/bin/docker-compose
```

**运行镜像**

```bash
# 下载源码包
wget https://github.com/MoePlayer/DPlayer-node/archive/master.zip

# 解压
unzip master.zip

# 进入工作文件夹
cd DPlayer-node-master

# 新建镜像
docker-compose build
# 拉取其它镜像并后台运行
docker-compose up -d
```

访问地址为`http://ip:1207`，数据和日志存放在`/root/dplayer`文件夹。

**其他**

修改端口或者存放文件夹路径，在新建镜像之前操作如下：

改完后再新建镜像即可,如果已经新建镜像了，但想改，那就清空之前的镜像再修改操作如下：

**快速清理Docker垃圾文件**

```bash
# 此命令会清空所有的Docker文件
docker kill $(docker ps -aq)
docker rm $(docker ps -aq)
docker rmi $(docker images -q)
docker volume rm $(docker volume ls -q)

# 此命令会保留正在运行的Docker镜像，其它会全部清除
docker rm $(docker ps -aq)
docker rmi $(docker images -q)
docker volume rm $(docker volume ls -q)
```

如域名访问使用宝塔反代即可。

## DPlayer播放器

**使用与问题**

```html
# 默认不自动播放，弹幕开启
dplayer url="视频地址" pic="封面地址"/

# 关闭弹幕
dplayer url="视频地址" pic="封面地址" danmu="false"/

# 开启自动播放
dplayer url="视频地址" pic="封面地址" autoplay="true"/

# 添加额外弹幕源(例：bilibili弹幕)
dplayer url="视频地址" pic="封面地址 autoplay="true" addition="https://api.prprpr.me/dplayer/bilibili?aid=7286894"/

注：以上地址不得已去掉 [] ，使用时请加上。

# 开启pjax无法自动加载视频，添加pjax回调
loadDPlayer();
```

[DPlayer播放器下载地址](https://github.com/MoePlayer/DPlayer-Typecho)

## 添加百度收录检测

在主题`post.php`文件中加入以下代码:

在post.php中加入（需要引入jquery）

百度收录API源码

```PHP
<?php
/**
 * Baidu
 * @editer: Weifeng
 * @link: https://wfblog.net
 * @version: 1.0
 */

error_reporting(0);
header("Access-Control-Allow-Origin:*");
header('Content-type: application/json');

$data = checkBaidu($domain);
echo json_encode($data,JSON_UNESCAPED_UNICODE);

function GetBetween($content,$start,$end){
    $r = explode($start, $content);
    if (isset($r[1])){
        $r = explode($end, $r[1]);
        return $r[0];
    }
}
?>
```

## 右侧添加访客数量、网站响应耗时

将以下代码添加至`Content.php`文件之中，放在`class Content{}`之前

将以下代码添加至`sidebar.php`文件合适位置

## 右侧添加全站字数

将以下代码添加至`sidebar.php`文件开头之中

将以下代码添加至`sidebar.php`文件之中（位置大概在 90 多行）

## 删除掉左侧栏的组成二字和分割线

路径：usr/themes/handsome/component/aside.php 删除126至130行

```php
<li class="line dk"></li>

<li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
<span><?php _me("组成") ?></span>
</li>
```

## 控制Typecho后台评论图片的大小

修改文件路径：`您的域名/admin/css/style.css`

```CSS
div .comment-content img{border: 0;max-height: 720px; max-width: 640px}
```

其中720为最大高度，640为最大宽度，可以自己根据实际调整；
正在使用cdn的需要刷新cdn缓存；

## Typecho更改显示日期方式

在后台设置 → 评论 和 设置 → 阅读里面修改成 `Y-m-d H:i:s`

## 开启gzip压缩

找到你的Typecho的网站根目录中的index.php
添加第十行代码：

```PHP
/** 开启gzip压缩, add by yovisun */
ob_start('ob_gzhandler');
```

[网页GZIP压缩检测][1]

## 侧栏增加成长历史

修改方法：打开`usr/themes/handsome/component/sidebar.php`在"博客信息"下面增加代码

## 添上滑稽小表情

[下载地址][2]

1. 复制owo.json到`handsome/usr/`
2. 复制paopao文件夹到`handsome/usr/img/emotion/`
3. 开发者 --> css添加以下代码

```css
/*滑稽小表情自定义大小*/
.emotion-funny {
    width: 30px;
}
.comment-content-true img.emotion-funny {
    max-width: 100%!important;
}
```

## 一键评论打卡

3、打开`component/comments.php`的`130`行后加入以下代码：

放在以下：

4、在后台 --> `设置外观` --> `开发者设置` --> `自定义CSS`加入以下代码:

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

## 文章底部版权

打开`usr/themes/handsome/post.php`，在92行附近加此代码：

**例：在以下代码底部添加**

ePayForTypecho自媒体付费阅读插件
----

在page.php与post.php文件分别在第27行与第91行以下加入以下代码，。
`<?php echo TePay_Plugin::getTePay(); ?>`

## 代码高亮插件Code Prettify

[插件下载](https://zy.wbessy.com/WJ/%E4%BB%A3%E7%A0%81%E9%AB%98%E4%BA%AE%E6%8F%92%E4%BB%B6Code%20Prettify/CodePrettify.zip)

添加pjax回调参数路径：`主题` --> `设置外观` -->` Pjax `--> `PJAX回调函数`
插件内勾选显示行号输入以下内容：

插件内如不勾选显示行号输入一下内容：

```JavaScriptCopy
if (typeof Prism !== 'undefined') {
Prism.highlightAll(true,null);}
```

修改`handsome.min.css`文件，路径`/usr/themes/handsome/assets/css/`；
将以下`原有代码`替换为`新增代码`

```css
# 原有代码
pre{padding:0}pre code{display:block;overflow-x:auto;position:relative;margin:0;padding:15px}

## 复制弹框版权提醒

[下载layui程序][3]上传至网站根目录下
首先将下方代码复制添加至后台主题设置`自定义输出head 头部的HTML代码`

```HTML

<script src="您的网址/layer/layer.js"></script>
```

最后复制下方代码添加至后台主题设置自定义`JavaScript`即可

```JavaScript

document.body.oncopy = function() {layer.msg('复制成功，若要转载请务必保留本文链接！');};
```

## 文本框打字机特效

复制下方代码添加至后台主题设置`自定义输出head 头部的HTML代码`即可

```HTML

<script type="text/javascript" src="您的网址/commentTyping.js"></script>
```

## 给网站添加crisp在线客服插件

[1]: http://tool.chinaz.com/gzips/
[2]: https://quqi.gblhgk.com/s/2104994/KZumqyNhfAp2tBoI
[3]: http://layer.layui.com/
[4]: https://app.crisp.chat/initiate/signup/

handsome主题修改记录

11 条评论

发表评论取消回复

音乐解密工具——unlock-music

Typecho 付费阅读插件

搭建PT站——NexusPHP

handsome主题修改记录

开源笔记本——Joplin

wordpress开启https无法登录后台、页面样式丢失

斐讯T1盒子刷机

AutoCAD快捷键

搭建原创小说网站——小说精品屋

自建邮件服务器——EwoMail开源版

handsome主题修改记录

11 条评论

发表评论 取消回复

handsome主题修改记录

发表评论取消回复