typecho+handsome改造

本文转自www.sitstars.com

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

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

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

CDN加速

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

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

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

首先在又拍云中新建一个云存储。
](https://im.yanshu.work/article/20191103143711128_21673.png)
然后授权操作员,如果第一次使用则要新建一个。

创建成功后,自行配置加速域名(需要备案)和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文件
    下载链接 提取码: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>

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

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

JavaScript 复制

文章添加版权说明

插件+10086,下载地址

效果:

拉倒本文底部就能看到

使用方法:

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

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

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

首先在网站根目录下新建一个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;
}

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

原文链接

Last modification:November 30th, 2019 at 10:05 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment