Handsome美化过程

持续更新

1.Mac风格代码框与高亮



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

插件最新版本


效果展示

<html>
<title>
Typecho代码高亮插件Code Prettify
</title>
<head>
</head>
<body>
<a herf="https://www.xcnte.com/archives/523/">xcnte</a>
</body>
</html>

注意事项,如果您的代码高亮插件安装配置后,出现浏览器必须每次刷新后才能正常显示效果,请排查以下方面
首先感谢插件开发者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字体库


    然后解压,放入你的CDN存储空间中,然后在主题外观设置-开发者选项-自定义head输出头部中引用
    <link href="https://cdn.xxx.com/xxx/xxx/css/font-awesome.min.css" rel="stylesheet">
    这个链接是你存储css文件的链接,
    最后通过icon="icon icon-cloud-download"在handsome中引用即可

    图标名称

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

    利用ftp工具,打开网站根目录下的index.php
    添加如下代码:

    /**开启gzip */
    ob_start('ob_gzhandler');

    在如下位置添加

    <?php
    /**
     * 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检查工具测试一下是否开启成功


    压缩率还是不错的

    4.开启复制弹窗

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

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

    在自定义javascript内写入

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

    首页文章悬停上浮及图片缩放

    6.0新增图标库

    图标展示

    1.png
    2.png
    3.png
    4.png

    类名不定义class,直接用feather

    Last modification:December 7th, 2019 at 08:30 pm
    如果觉得我的文章对你有用,请随意赞赏