typecho+handsome折腾笔记

决心对网站做一下加速和美化，于是就有了这篇笔记，防止主题更新后忘了怎么改。

前排提示：博主用的是typecho程序+handsome主题，所有修改仅基于以上两者。

我的原则是：能用插件就尽量不要修改文件，能在后台开发者设置里直接加代码就不要用插件。毕竟魔改一时爽，更新火葬场。另外所有的美化不应当以损失页面加载速度和影响读者体验为代价。

CDN加速

老早就听说过CDN了，但是因为懒而且贵（主要原因），一直没有弄。后来觉得我的网站打开速度有点慢，才下定决心套个CDN试试。

因为又拍云有每月10g流量（包括https）的免费额度，所以自然就挂到又拍云上了。先尝试了一下本地图片云存储加速，发现网站样式混乱了，不清楚什么原因，只好放弃这一方案。

接下来尝试的是将本地静态资源上传到你的cdn上，这个方案不需要单独设置CDN加速域名，可以和原来的云存储共用，而且测试后也没有出现网站混乱的情况，速度也有一定的提升，就决定是你了！

首先在又拍云中新建一个云存储。

然后授权操作员，如果第一次使用则要新建一个。

创建成功后，自行配置加速域名（需要备案）和https。

然后连接到你的云服务器中，将主题目录下的assets文件夹打包下载下来并解压。

接下来就是将assets文件夹上传到又拍云的云存储中了。但是我发现又拍云网页上传不支持文件夹，而他们推荐的FTP软件根本就连接不上。算了，直接用python大法吧。

先安装又拍云的SDK，pip install upyun，就可以运行以下代码了，注意修改相关配置。

import upyun
import os

# 需要填写自己的服务名，操作员名，密码
service = ""  # bucket名称
username = ""  # 操作员用户名
password = ""  # 操作员密码，需要手动生成的，不是账号密码！

up = upyun.UpYun(service, username=username, password=password, endpoint=upyun.ED_AUTO)

def upload(local_path):
    pathlen = local_path.count('\\')

    for root, dirs, files in os.walk(local_path):
        alist = root.split('\\')[int(pathlen):]
        temp_path = '/'.join(alist)+'/'
        for file in files:
            lc_path = root+'\\'+file # 文件夹本地路径
            rd_path = temp_path+file # 远程目录路径

            with open(lc_path, "rb") as f:   
                up.put(rd_path, f, checksum=True) # 上传至/assets/路径下


def main():
    local_path = r'E:\新桌面\assets'  # 根文件夹路径
    upload(local_path)

if __name__ == '__main__':
    main()

上传成功后，将加速域名/assets/填入下图位置，

完成！

打字烟花及震动特效

这是一个插件ActivatePowerMode，评论、文章与页面编辑界面都可以使用。

你可以在评论区试一下，我只开了烟花特效。

插件地址

使用方法：

下载本插件，解压放到usr/plugins/目录中
文件夹名改为ActivatePowerMode
登录管理后台，激活插件

彩色标签云

同样是插件，来自至道小博，安装后开启即可。

原博地址

注意要在插件设置里，是否启用了PJAX勾选是

代码高亮修改

插件+1，原文地址

仿Mac样式，显示语言，并且能够一键复制。

效果：

import random
print('hello world')

使用方法：

下载插件，改为CodePrettify，上传至插件目录。
启动插件
修改（替换）/usr/themes/handsome/assets/css/下的handsome.min.css文件

[button color="success" icon="glyphicon glyphicon-download-alt" url="https://pan.baidu.com/s/1GbJaMTVvooV64zGrj4vJxA"]适用于6.0.0版本的css[/button]

[button color="success" icon="glyphicon glyphicon-download-alt" url="https://pan.baidu.com/s/1kwuvgtXMxN6EONRcN2RPUA"]适用于5.3.1版本的css[/button]提取码：a0d8

下载后替换即可。

在主题 --> 设置外观 --> Pjax --> PJAX回调函数中添加以下代码

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

给网站加上复制后提示

来自phenxso

效果：

使用方法：

将以下代码复制到自定义输出body尾部的HTML代码

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

将以下代码复制到自定义JavaScrpit

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

文章添加版权说明

插件+10086，下载地址

效果：

拉倒本文底部就能看到

使用方法：

下载插件解压并将目录重命名为Copyright，后台启动插件

更改右侧边栏的随机缩略图

你可以直接替换主题\usr\img\sj2下的图片，也可以像我一样，把缩略图放到图床上，然后调用随机图api。

[scode type="yellow"]这种方法已失效，functions.php似乎被加密了，无法进行修改[/scode]

首先在网站根目录下新建一个randoms文件夹，在该文件夹中新建一个link.txt和index.php，其中index.php的代码如下：

<?php
//从文本获取链接
$pics = [];
$fs = fopen("link.txt", "r");
while(!feof($fs)){
    $line=trim(fgets($fs));
    if($line!=''){
        array_push($pics, $line);
    }
}

//从数组随机获取链接
$pic = $pics[array_rand($pics)];

//返回指定格式
$type=$_GET['type'];
switch($type){

//JSON返回
case 'json':
    header('Content-type:text/json');
    die(json_encode(['pic'=>$pic]));

default:
    die(header("Location: $pic"));
}

link.txt中就是缩略图的链接，一行一个。

这样，一个简单的随机图片api就做好了。

接着修改主题文件夹下的functions.php，找到随机缩略图函数showSidebarThumbnail（大概在735行），替换为以下代码：

//文章页面侧边栏缩略图
function showSidebarThumbnail($widget, $index = 0)
{
    $randomNum = rand(1, 9999999);
    $random = 'https://www.sitstars.com/randoms?'.$randomNum;
    return $random;
}

完成后刷新网站就能看到效果，不知道为什么重复率很高，大概是不够随机吧？

版权属于：作者名称
本文链接：https://www.sitstars.com/archives/56/
转载时须注明出处及本声明

页面

分类

typecho+handsome折腾笔记