_

~_~

前言

不得不说,handsome主题制作确实很精良,非常感谢原作者友人C的辛苦创作

个人在handsome主题基础上做了一些修改,仅以此文进行总结保存,也希望能帮到有需要的人~

开启GZIP压缩

为什么要开启GZIP

网站采用Gzip压缩,可以大大缩减网站加载时间,也可以减少流量的使用

更详细的请查看下面这篇文章

那如何查看自己的网站是否已经压缩过了呢?

查看是否开启gzip压缩

修改开启GZip压缩

  • 进入网站跟目录-打开index.php文件
  • 添加如下代码

<?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压缩, add by yovisun */  
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压缩

音乐播放失效问题

handsome主题音乐时有失效问题,可用以下方法解决

方法一

下载meting.php
上传到主题文件夹/libs/meting.php文件
覆盖要原文件

meting.php文件下载:

方法二

是因为CDN缓存的原因导致音乐API 无法正常解析
将使用的CDN 缓存时间设置为0就可以了

修改底部徽章

写github项目README文件的时候,发现徽章着实好看,就想着让网站底部信息以徽章形式展现

徽章.png

  • 使用Github官方徽章
点击跳转

选择一个选择徽章

徽章使用的svg,把徽章套在<img>标签下

  • 使用

复制下面代码


<img src="https://img.shields.io/static/v1?label=<LABEL>&message=<MESSAGE>&color=<COLOR>" >

修改内容即可。

  • 颜色修改

color=内填入下图颜色代码

color.png

  • 为Copyright添加徽章

同样也是在主题目录-component-footer.php

这是我写的,可以参考


        <span class="text-ellipsis"><img src="https://img.shields.io/static/v1?label=©Copyright
©Copyrigh&message=SWJ&color=informational">     <?php $this->options->BottomleftInfo(); ?></span>

删除网站底部驱动信息

进入服务器-主题目录-component-footer.php

找到如下内容并注释相应部分

<span class="pull-right hidden-xs text-ellipsis">
      <?php $this->options->BottomInfo(); ?>
      <!--Powered by <a target="blank" href="http://www.typecho.org">Typecho</a>&nbsp;|&nbsp;Theme by <a target="blank" href="https://www.ihewro.com/archives/489/">handsome</a>-->
      </span>

为支持作者,可以添加作者友链~

修改导航栏字体

  • 展示

展示

修改字体

  • 添加字体文件

进入/usr/themes/handsome/assets/fonts

新建一个文件夹,命名为myfont,可以随便设定,记住就行,将字体文件上传到里面。

  • 创建字体css

进入/usr/themes/handsome/assets/css

创建myfont.css文件,写入以下内容

/*下面修改为自己字体的位置名和字体名*/
@font-face{
    font-family: 'myfont';
    src : url('../fonts/myfont/***.TTF');
}
  • 修改header.php

进入/usr/themes/handsome/component

找到以下内容

 <!-- 本地css静态资源 -->
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/function.min.css?v=<?php echo Handsome::$version.Handsome::$versionTag ?>" type="text/css" />
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/handsome.min.css?v=<?php echo Handsome::$version.Handsome::$versionTag ?>" type="text/css" />

在下方添加如下代码:


   <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/swj.css" type="text/css" />
      <style>
           .m-l-xs{
                  font-family: 'myfont';
            }
      </style>

以上部分就可以完成对标题栏字体的修改,如果需要修改字体吗,只需要修改/usr/themes/handsome/assets/fonts/myfont/文件夹内的字体文件即可(修改为之前字体一样的名字)`

删除首页中间博客名文字

效果看本博客首页

实现方法

  • 第一步

进入/usr/themes/handsome/component

找到以下内容

 <!-- 本地css静态资源 -->
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/function.min.css?v=<?php echo Handsome::$version.Handsome::$versionTag ?>" type="text/css" />
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/handsome.min.css?v=<?php echo Handsome::$version.Handsome::$versionTag ?>" type="text/css" />

在下方添加如下代码:


   <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/swj.css" type="text/css" />
      <style>
           .m-l-xs{
                  font-family: 'myfont';
            }
<!-- 添加下面代码 -->
           .xiaoshi{
                display: none;
           }

      </style>
  • 第二步

进入/usr/themes/handsome

修改index.php
找到

 <!--/公告位置-->
          <?php endif; ?>
        <header class="bg-light lter b-b wrapper-md">
          <h1 class="m-n font-thin h3 text-black l-h"><?php $this->options->title(); ?></h1>
          <small class="text-muted letterspacing indexWords"><?php
              if (@!in_array('hitokoto',$this->options->featuresetup)) {
                  $this->options->Indexwords();

<h1 class="m-n font-thin h3 text-black l-h xiaoshi"><?php $this->options->title(); ?></h1>中添加xiaoshi类,让此处内容消失即可

  • 后来发现这种方法,也懒得尝试了,有需要的可以试一试

外观设置--开发者设置--自定义 JavaScript
document.querySelector("header.lter").remove();

复制成功提示框

复制下面内容至header.php中合适位置

      <!-- 加载复制成功 -->
      <script src="https://cdn.staticfile.org/layer/2.3/layer.js"></script>

如果是handsome主题,可以加在开发者设置中的自定义输出body 尾部的HTML代码中并且在自定义 JavaScript中添加如下代码


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

保存即可

文章圆角化及放大动画

打开handsome后台外观设置,进入开发者设置-自定义CSS,输入以下内容

/*首页文章版式圆角化*/

.panel {
    border: none;
    border-radius: 8px;
}

.panel-small {
    border: none;
    border-radius: 8px;
}

.item-thumb {
    border-radius: 8px;
}


/*首页文章列表悬停上浮*/

.blog-post .panel:not(article) {
    transition: all 0.3s;
}

.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}


/*头图超出*/

.index-post-img {
    overflow: hidden;
    border-radius: 8px;
}

.item-thumb,
.item-thumb-small {
    transition: all 0.3s;
    border-radius: 8px;
}


/*超出部分隐藏*/

.entry-thumbnail {
    overflow: hidden;
    border-radius: 8px;
}

#post-content img {
    border-radius: 8px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
    border-radius: 8px;
}

.item-thumb:hover,
.item-thumb-small:hover {
    transform: scale(1.1);
    border-radius: 8px;
}

网页阴影

打开handsome后台外观设置,进入开发者设置-自定义CSS,输入以下内容

/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.app.container {
    box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}

鼠标停留头像旋转

打开handsome后台外观设置,进入开发者设置-自定义CSS,输入以下内容

/*首页头像自动旋转*/
.thumb-lg{
    width:130px;
}

.avatar{
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out; 
}

.avatar:hover{
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}

#aside-user span.avatar{
    animation-timing-function:cubic-bezier(0,0,.07,1)!important;
    border:0 solid
}

#aside-user span.avatar:hover{
    transform:rotate(360deg) scale(1.2);
    border-width:5px;
    animation:avatar .5s
}

UserAgent评论标志插件

  • 效果

UA展示

  • 下载

  • 使用

    • 上传插件至Typecho的plugins目录下,且插件目录名应为UserAgent
    • 修改Handsome主题,component目录下的comments.php代码文件,大概第60~80行左右

找到如下内容


<span class="comment-author vcard">
    <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?>
</span>

修改为如下代码

<span class="comment-author vcard">
    <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>
</span>
  • 还需要注意的一点是,如果评论者开启CDN加速,那么将无法获取真实ip并获取其位置

获取真实ip:
在Typecho博客网站的根目录的config.inc.php插入下面的代码:


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

感谢松鼠大大的开发

彩色标签云

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可

<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

如果主题中启用了pjax,还需要将上面代码添加到pjax-pjax回调函数中。

鼠标评论框美化

typecho伪静态

handsome文件

component/aside.php        左边导航栏
component/comments.php     评论区
component/footer.php       底部版权、音乐播放器之类
component/header.php       页面头,没啥要改的
component/headnav.php      顶部导航
component/say.php          时光机动态
component/sidebar.php      右侧栏目
component/third_party_comments.php    3.3.0新增,第三方评论
css/        博客CSS,一般不要改
fonts/      博客字体,一般不要改
img/        图像,一般不要改
js/         js文件,一般不要改
lang/       语言文件
libs/Content.php    文章内容
libs/...    一般不要改
usr/        另一个语言文件?
404.php     404界面
archive.php    整合
booklist.php   书单
cross.php      时光机
files.php      归档
functions.php  配置界面的东西
guestbook.php  留言板
index.php      首页
links.php      友链
page.php       文章页面整合
post.php       文章输出

color: 选填,不填默认为success(绿色),可选值:
light:白色
info:蓝色
dark:深色
success:绿色
black:黑色
warning:黄色
primary:紫色
danger:红色

版权属于:小宇宙

转载时须注明出处及本声明

最后修改:2020 年 01 月 29 日 06 : 41 PM
可以请我喝瓶冰阔落~