handsome+Typecho美化过程【持续更新】包括踩坑解决办法

@monsoon • 2019 年 11 月 08 日

Handsome美化过程

持续更新

1.Mac风格代码框与高亮

作者说这个bug太多，推荐使用以下的最新版本

插件最新版本

效果展示

Typecho代码高亮插件Code Prettify

xcnte

注意事项，如果您的代码高亮插件安装配置后，出现浏览器必须每次刷新后才能正常显示效果，请排查以下方面

首先感谢插件开发者xcnte的支持与帮助

后台域名绑定与CSS以及JS文件调用地址是否一致

是否开启了markdown增强插件的前台解析功能

PJAX回调函数是否正常

CDN加速是否正常

解决静态资源及插件跨域无法调用

假如我们在typecho后台中绑定了一个域名https://creatorlia.com,用这个域名访问的时候静态资源包括字体，插件，各种CSS/JS一切正常，

但是我们在用https://www.creatorlia.com这个二级域名访问就会出现加载不正常，这就说明跨域了。

handsome主题支持了跨域访问，包括一些对象存储，类似阿里的OSS也都可以更改跨域规则，但是由于插件安装在源站上，引用静态资源的时候的地址指向siteUrl而不是rootUrl，这就需要我们自行解除跨域源站限制；

typech0的Var/Widge/Option.php中关于初始化网站地址的代码中发现一个变量__TYPECHO_DYNAMIC_SITE_URL__

也就是说typecho已经为跨域做了准备，但是需要我们手动开启

我们需要在config.inc.php配置中在加入一行define('__TYPECHO_DYNAMIC_SITE_URL__',true);即可。

这样我们就能解决大部分跨域问题，二级域名与顶级域名也都可以正常调用静态资源了。

2.扩充webfont字体库，使用更多的图标

首先下载font-awesome字体库

font-awesome

然后解压，放入你的CDN存储空间中，然后在主题外观设置-开发者选项-自定义head输出头部中引用

这个链接是你存储css文件的链接，

最后通过icon="icon icon-cloud-download"在handsome中引用即可

图标名称

3.开启gzip压缩，提高网站访问速度

利用ftp工具，打开网站根目录下的index.php

添加如下代码：

/**开启gzip */

ob_start('ob_gzhandler');

在如下位置添加

/**

* Typecho Blog Platform

*

* @copyright Copyright (c) 2008 Typecho team (http://www.typecho.org)

* @license GNU General Public License 2.0

* @version $Id: index.php 1153 2009-07-02 10:53:22Z magike.net $

*/

/**开启gzip */

ob_start('ob_gzhandler');

/** 载入配置支持 */

if (!defined('__TYPECHO_ROOT_DIR__') && !@include_once 'config.inc.php') {

file_exists('./install.php') ? header('Location: install.php') : print('Missing Config File');

exit;

}

/** 初始化组件 */

Typecho_Widget::widget('Widget_Init');

/** 注册一个初始化插件 */

Typecho_Plugin::factory('index.php')->begin();

/** 开始路由分发 */

Typecho_Router::dispatch();

/** 注册一个结束插件 */

Typecho_Plugin::factory('index.php')->end();

最后开启gzip检查工具测试一下是否开启成功

点击打开gzip测试工具

压缩率还是不错的

4.开启复制弹窗

实现原理就是引入一个弹窗脚本,在自定义尾部body输出

类名不定义class，直接用feather

handsome主题使用教程