记录Typecho和Handsone主题修改（不断更新）
登录 / 注册
标签搜索
侧边栏壁纸
博主昵称
低调G

  • 累计撰写 292 篇文章
  • 累计收到 701 条评论
技术教程

记录Typecho和Handsone主题修改（不断更新）

低调G
低调G
2020-05-21 / 1 评论 / 4,622 阅读 / 正在检测是否收录...


本来不想做这个记录的，但发现主题好像被我修改出了一点问题，所以必须要记录一下所修改的地方，方便查找问题。
除了自用也会搜集一些备用。

1.开启伪静态并隐藏index.php

[collapse status="false" title="点击查看"]登录后台-设置-永久链接-是否使用地址重写功能-是
登录后台-设置-永久链接-自定义文章路径-个性化定义-/{slug}.html
服务器的rewrite规则
nginx配置
BT面板-配置文件（伪静态）-添加以下代码：
非BT在网站根目录新建一个.htaccess然后加入以下代码：

if (!-e $request_filename) {
rewrite ^(.*)$ /index.php$1 last;
}

apache配置
在网站根目录新建一个.htaccess然后加入以下代码：

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.php/$1 [L]
</IfModule>

[/collapse]

2.开启网页压缩加速

[collapse status="false" title="点击查看"]将以下代码加到Typecho主程序index.php文件/** 载入配置支持 */上面即可

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

[/collapse]

3.不让移动端后台导航栏点击自动跳转

[collapse status="false" title="点击查看"]修改方法：https://www.ddg.ink/26.html[/collapse]

4.首页文章版式圆角化

[collapse status="false" title="点击查看"]下面代码放到设置外观-开发者设置-自定义CSS

/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 8px;
}

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

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

[/collapse]

5.打赏图标跳动

[collapse status="false" title="点击查看"]设置外观-开发者设置-自定义CSS

/* 打赏图标跳动 */
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

[/collapse]

6.彩色标签云

[collapse status="false" title="点击查看"]设置外观-开发者设置-自定义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回调函数 填入相同JS代码
[/collapse]

7.利用主题自带弹窗增加提示

[collapse status="false" title="点击查看"]复制版权提示
设置外观-开发者设置-自定义JavaScript

kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
    message: "尊重原创，转载请注明出处！<br> 本文作者：低调哥<br>原文链接："+sitesurl,
    title: "复制成功",
    type: "warning",
    autoHide: !1,
    time: "10000"
    })
}}

加载完成提示
设置外观-开发者设置-自定义输出body 尾部的HTML代码

<script>
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if  (kaygb_referrer != ""){
return "感谢您的访问！ 您来自：<br>" + document.referrer;
}else{
return "";
}}
$.message({
    message: "为了网站的正常运行，请不要使用广告屏蔽插件，谢谢！<br >" + kaygb_referrer(),
    title: "网站加载完成",
    type: "success",
    autoHide: !1,
    time: "6000"
}) 
</script>

注意，要放在广告异步推送代码之前，放在后面可能会影响加载。
独立页面提示

<script>
$.message({
    message: "想对博主说一些什么呢？",
    title: "欢迎给我留言！",
    type: "info",
    autoHide: !1,
    time: "10000"
})
</script>

如果开启了PJAX，还需要在设置外观-PJAX-PJAX回调函数 填入kaygb_copy();
title：弹窗的标题
message：弹窗标题下方的文字
type: 弹窗类型
autoHide：默认即可
time：停留时间（毫秒，1秒为1000毫秒）
[/collapse]

8.透明背景下文章目录Bug

[collapse status="false" title="点击查看"]设置外观-开发者设置-自定义CSS

/*透明背景下文章目录bug*/
#toc {
background-color:rgba(255, 255, 255, .15) !important;
}

[/collapse]

9.透明背景下时光机右侧Bug

[collapse status="false" title="点击查看"]设置外观-开发者设置-自定义CSS

/*透明背景下时光机右侧bug*/
.bg-light .lter, .bg-light.lter {
text-align: justify;
}

[/collapse]

10.博主头像设置成QQ头像

[collapse status="false" title="点击查看"]设置外观-初级设置-头像图片地址
QQ头像接口地址

https://q1.qlogo.cn/g?b=qq&nk=10001&s=640
https://q.qlogo.cn/g?b=qq&nk=10001&s=100
https://q.qlogo.cn/headimg_dl?bs=qq&dst_uin=10001&src_uin=gordsky.cn&fid=blog&spec=100
https://q.qlogo.cn/headimg_dl?dst_uin=10001&spec=640
https://q2.qlogo.cn/headimg_dl?spec=100&dst_uin=10001
http://q3.qlogo.cn/g?b=qq&nk=10001&s=100

把10001修改成你的QQ号即可。
[/collapse]

11.Pjax无刷新加载后百度统计失效解决办法

[collapse status="false" title="点击查看"]设置外观-PJAX-PJAX回调函数

_hmt.push(['_trackPageview', document.location.pathname+document.location.search+document.location.hash]);

上面写法是记录整个URL信息，即包含查询参数以及hash锚点。
如果想要像网络上其他教程一样只记录页面地址，可以换成如下代码：

_hmt.push(['_trackPageview', document.location.pathname]);

[/collapse]

12.评论一键打卡赞踩

[collapse status="false" title="点击查看"]设置外观-开发者设置-自定义JavaScript

//打卡赞踩
function a(a, b, c) {
    if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();
    else if (a.selectionStart || "0" == a.selectionStart) {
        var l = a.selectionStart,
            m = a.selectionEnd,
            n = m;
        c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);
        c ? n += b.length + c.length : n += b.length - m + l;
        l == m && c && (n -= c.length);
        a.focus();
        a.selectionStart = n;
        a.selectionEnd = n
    } else a.value += b + c, a.focus()
}
var b = (new Date).toLocaleTimeString(),
    c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
daka: function() {
    a(c, "滴！学生卡！打卡时间：" + b, "，请上车的乘客系好安全带~")
},
zan: function() {
    a(c, "写得好好哟,我要给你生猴子！")
},
cai: function() {
    a(c, "骚年,我怀疑你写了一篇假的文章！")
}
};

PJAX回调函数也加入以上代码
在主题目录component/comments.php里面搜索<div class="OwO" style="display: inline;"></div>（126行到144行左右）下面添加如下代码。

<!-- 打卡代码开始 -->
<div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'">
    <div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">打卡</span></div>
</div>
<div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'">
    <div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div>
</div>
<div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'">
    <div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div>
</div>
<!-- 打卡代码结束 -->

设置外观-开发者设置-自定义CSS

/*私密评论按钮位置*/
.secret_comment {
top: 5px;
}
.OwO.OwO-open .OwO-body {
display:table
}

[/collapse]

13.自定义pjax动画

[collapse status="false" title="点击查看"]设置外观-PJAX-选择pjax动画-选择自定义pjax动画
自定义pjax动画的HTML结构

<section id="loading" class="loading hide">
<div class="containerss">
        <div class="one common"></div>
        <div class="two common"></div>
        <div class="three common"></div>
        <div class="four common"></div>
        <div class="five common"></div>
        <div class="six common"></div>
        <div class="seven common"></div>
        <div class="eight common"></div>
    </div>
</section>

自定义pjax动画的CSS代码

@charset "utf-8";.loading{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;}.containerss{width:40vw;height:40vw;left:0;right:0;top:0;bottom:0;margin:auto;}.common{height:5vw;max-height:100%;overflow:auto;width:2vw;margin:auto;max-width:100%;position:absolute;background-color:;border-radius:0vw 10vw 0vw 10vw;box-shadow:inset 0vw 0vw 0vw .1vw #E645D0,0vw 0vw 1.5vw 0vw #E645D0;}.one{transform:rotate(45deg);left:0;right:0;top:0;bottom:7.5vw;}.two{transform:rotate(90deg);left:5.5vw;right:0;top:0;bottom:5.5vw;}.three{transform:rotate(135deg);left:7.5vw;right:0;top:0;bottom:0;}.four{transform:rotate(180deg);left:5.5vw;right:0;top:5.5vw;bottom:0;}.five{transform:rotate(225deg);left:0;right:0;top:7.5vw;bottom:0;}.six{transform:rotate(270deg);left:0;right:5.5vw;top:5.5vw;bottom:0;}.seven{transform:rotate(315deg);left:0;right:7.5vw;top:0;bottom:0;}.eight{transform:rotate(360deg);left:0;right:5.5vw;top:0;bottom:5.5vw;}.one{animation:one 1s ease infinite;-moz-animation:one 1s ease infinite;-webkit-animation:one 1s ease infinite;-o-animation:one 1s ease infinite;}@keyframes one{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.two{animation:two 1s .125s ease infinite;-moz-animation:two 1s .125s ease infinite;-webkit-animation:two 1s .125s ease infinite;-o-animation:two 1s .125s ease infinite;}@keyframes two{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.three{animation:three 1s .25s ease infinite;-moz-animation:three 1s .25s ease infinite;-webkit-animation:three 1s .25s ease infinite;-o-animation:three 1s .25s ease infinite;}@keyframes three{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.four{animation:four 1s .375s ease infinite;-moz-animation:four 1s .375s ease infinite;-webkit-animation:four 1s .375s ease infinite;-o-animation:four 1s .375s ease infinite;}@keyframes four{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.five{animation:five 1s .5s ease infinite;-moz-animation:five 1s .5s ease infinite;-webkit-animation:five 1s .5s ease infinite;-o-animation:five 1s .5s ease infinite;}@keyframes five{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.six{animation:six 1s .625s ease infinite;-moz-animation:six 1s .625s ease infinite;-webkit-animation:six 1s .625s ease infinite;-o-animation:six 1s .625s ease infinite;}@keyframes six{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.seven{animation:seven 1s .750s ease infinite;-moz-animation:seven 1s .750s ease infinite;-webkit-animation:seven 1s .750s ease infinite;-o-animation:seven 1s .750s ease infinite;}@keyframes seven{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.eight{animation:eight 1s .875s ease infinite;-moz-animation:eight 1s .875s ease infinite;-webkit-animation:eight 1s .875s ease infinite;-o-animation:eight 1s .875s ease infinite;}@keyframes eight{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.containerss{animation:containerss 5s linear infinite;-moz-animation:containerss 5s linear infinite;-webkit-animation:containerss 5s linear infinite;-o-animation:containerss 5s linear infinite;}@keyframes containerss{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}

[/collapse]

14.时光机RSS动态内容配置

[collapse status="false" title="点击查看"]
设置外观-时光机配置-RSS动态内容配置

{"id":"guanzhi","name":"每日一文","url":"https://cors-anywhere.herokuapp.com/https://rsshub.app/guanzhi"},
{"id":"zgdxmooc","name":"慕课","url":"https://cors-anywhere.herokuapp.com/https://rsshub.app/icourse163/newest"},
{"id":"juejin","name":"掘金","url":"https://cors-anywhere.herokuapp.com/https://rsshub.app/juejin/category/frontend"},
{"id":"bilibili_zf","name":"追番","url":"https://cors-anywhere.herokuapp.com/https://rsshub.app/bilibili/user/bangumi/21462274"}

[/collapse]

15.首页轮播设置

[collapse status="false" title="点击查看"]

{"title":"Handsome主题夜间模式插件 fo Typecho","link":"https://www.ddg.ink/69.html","cover":"https://cdn.jsdelivr.net/gh/freecdn/images/usr/uploads/2020/05/797406831.png","desc":"白天演示图片"},
{"title":"Handsome主题夜间模式插件 fo Typecho","link":"https://www.ddg.ink/69.html","cover":"https://cdn.jsdelivr.net/gh/freecdn/images/usr/uploads/2020/05/888696165.png","desc":"夜晚演示图片"}

[/collapse]

16.删除顶部博客名称

[collapse status="false" title="点击查看"]打开/usr/themes/handsome/index.php
搜索<h1 class="m-n font-thin text-black l-h"><?php $this->options->title(); ?></h1>
删除或注解掉[/collapse]

17.博客信息添加全站字数和加载耗时

[collapse status="false" title="点击查看"]在/usr/themes/handsome/functions.php中加入以下代码

//字数统计
function allOfCharacters() {
$chars = 0;
$db = Typecho_Db::get();
$select = $db ->select('text')->from('table.contents');
$rows = $db->fetchAll($select);
foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
$unit = '';
if($chars >= 10000)     { $chars /= 10000; $unit = '万'; } 
else if($chars >= 1000) { $chars /= 1000;  $unit = '千'; }
$out = sprintf('%.2lf %s',$chars, $unit);
return $out;
}
//加载耗时
function timer_start() {
    global $timestart;
    $mtime     = explode( ' ', microtime() );
    $timestart = $mtime[1] + $mtime[0];
    return true;
}
timer_start();
function timer_stop( $display = 0, $precision = 3 ) {
    global $timestart, $timeend;
    $mtime     = explode( ' ', microtime() );
    $timeend   = $mtime[1] + $mtime[0];
    $timetotal = number_format( $timeend - $timestart, $precision );
    $r         = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
    if ( $display ) {
        echo $r;
    }
    return $r;
}

对Handsome主题functions.php加密的解决办法：
1.可以将上面的代码存放到usr/themes/handsome/libs/Content.php中class Content的上边。
2.在/usr/themes/handsome/component/sidebar.php的开头加入下面的代码也可达到同样效果。

<?php
//字数统计
function allOfCharacters() {
$chars = 0;
$db = Typecho_Db::get();
$select = $db ->select('text')->from('table.contents');
$rows = $db->fetchAll($select);
foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
$unit = '';
if($chars >= 10000)     { $chars /= 10000; $unit = '万'; } 
else if($chars >= 1000) { $chars /= 1000;  $unit = '千'; }
$out = sprintf('%.2lf %s',$chars, $unit);
return $out;
}
//加载耗时
function timer_start() {
    global $timestart;
    $mtime     = explode( ' ', microtime() );
    $timestart = $mtime[1] + $mtime[0];
    return true;
}
timer_start();
function timer_stop( $display = 0, $precision = 3 ) {
    global $timestart, $timeend;
    $mtime     = explode( ' ', microtime() );
    $timeend   = $mtime[1] + $mtime[0];
    $timetotal = number_format( $timeend - $timestart, $precision );
    $r         = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
    if ( $display ) {
        echo $r;
    }
    return $r;
}
?>

在/usr/themes/handsome/component/sidebar.php的博客信息处，选择合适位置加入以下代码（位置大概在 90 多行）

 <li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-3"></i></span><span class="badge 
       pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>
 <li class="list-group-item"> <i class="glyphicon glyphicon-time text-muted"></i> <span class="badge
       pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li>

[/collapse]

18.删除左侧边栏的分割线和组成二字

[collapse status="false" title="点击查看"]打开跟目录/usr/themes/handsome/component/aside.php搜索<?php if (@!in_array('component',$this->options->asideSetting)): ?>（在125行左右）将以下代码删除或注解掉

          <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
            <span><?php _me("组成") ?></span>
          </li>

如果你想把导航二字也去掉，搜索<div class="line dk hidden-folded"></div>（在78行左右）下面代码删除或注解掉

            <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
            <span><?php _me("导航") ?></span>
          </li>

[/collapse]

19.左侧边栏导航栏二级菜单

[collapse status="false" title="点击查看"]①添加判断字段
打开跟目录/usr/themes/handsome/component/aside.php搜索$asideItemsOutput = "";（第87行左右）在下面添加asideGongjuItemsOutput的定义：

$asideGongjuItemsOutput = "";

搜索if (trim($itemFeather)!==""){（105行左右）将其删除掉或注解掉，在下面添加status字段的判断：

                  if (strtoupper($itemStatus) === 'GJX'){ //判断status字段
                  if (trim($itemFeather)!==""){
                      $asideGongjuItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'" class ="auto"><span class="nav-icon"><i data-feather="'.$itemFeather.'"></i></span><span>'._mt($itemName).'</span></a></li>';
                  }else if (trim($itemClass)!==""){
                      $asideGongjuItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'" class ="auto"><span class="nav-icon"><i class="'.$itemClass.'"></i></span><span>'._mt($itemName).'</span></a></li>';
                      }
                  }
              else if (trim($itemFeather)!==""){ //判断status字段结束

②添加二级菜单输出
搜索<?php if (@!in_array('component',$this->options->asideSetting)): ?>（在132行左右）上面添加：

          <!--工具菜单-->
          <?php if (@$asideGongjuItemsOutput): ?>
          <li><a class="auto"><span class="pull-right text-muted">
          <i class="fontello icon-fw fontello-angle-right text"></i>
          <i class="fontello icon-fw fontello-angle-down text-active"></i>
          </span>
          <span class="nav-icon"><i class="glyphicon glyphicon-wrench"></i></span><span><?php _me("工具"); ?></span></a><!-- 可修改默认图标与名称 -->
          <ul class="nav nav-sub dk"><li class="nav-sub-header"><a data-no-instant><span><?php _me("工具"); ?></span></a></li>
          <?php echo @$asideGongjuItemsOutput ?>
          </ul></li>
          <?php endif; ?>

使用方法
设置外观-高级设置-左侧边栏导航

{"name":"图床","class":"fontello fontello-picture","link":"https://tuchuang.ddg.ink/","status":"gjx"},
{"name":"在线扒站","class":"fontello fontello-emo-sunglasses","link":"https://wget.ddg.ink/","status":"gjx"}

其中"status":"gjx"即表示将该条目放置于二级菜单中。
[/collapse]

20.开启全站灰色（黑白模式）

[collapse status="false" title="点击查看"]设置外观-开发者设置-自定义CSS

<!--开启黑白模式-->
html {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);}
html { filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1); }
html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);}
<!--黑白模式结束-->

[/collapse]

21.美化主页文章列表宽度

[collapse status="false" title="点击查看"]设置外观-开发者设置-自定义CSS

/* 非盒子模式页面宽度 */
.no-container #post-panel, .no-container .blog-posts {
max-width: 90%;
}

PS：需关闭盒子类型，不然没效果。
[/collapse]

22.使用CDN后获取用户真实IP

[collapse status="false" title="点击查看"]打开网站根目录config.inc.php，在最下方加入以下代码：

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

[/collapse]

23.比删除线更高级的伪装

[collapse status="false" title="点击查看"]效果演示→被你发现了~
设置外观-开发者设置-自定义CSS

span.heimu a.external,span.heimu a.external:visited,span.heimu a.extiw,span.heimu a.extiw:visited {
color: #252525
}
.heimu,.heimu a,a .heimu,.heimu a.new {
background-color: #252525;
color: #252525;
text-shadow: none
}
body:not(.heimu_toggle_on) .heimu:hover,body:not(.heimu_toggle_on) .heimu:active,body:not(.heimu_toggle_on) .heimu.off {
transition: color .13s linear;
color: #fff
}
body:not(.heimu_toggle_on) .heimu:hover a,body:not(.heimu_toggle_on) a:hover .heimu,body:not(.heimu_toggle_on) .heimu.off a,body:not(.heimu_toggle_on) a:hover .heimu.off {
transition: color .13s linear;
color: #add8e6
}
body:not(.heimu_toggle_on) .heimu.off .new,body:not(.heimu_toggle_on) .heimu.off .new:hover,body:not(.heimu_toggle_on) .new:hover .heimu.off,body:not(.heimu_toggle_on) .heimu.off .new,body:not(.heimu_toggle_on) .heimu.off .new:hover,body:not(.heimu_toggle_on) .new:hover .heimu.off {
transition: color .13s linear;
color: #ba0000
}

如果你使用其他主题，请在CSS头尾分别添加<style type="text/css">和</style>放在主题post.php或其他文件内。
使用方法:

<span class="heimu" title="被你发现了！">伪装内容</span>

[/collapse]

24更改博客评论显示日期格式

[collapse status="false" title="点击查看"]后台设置→评论→修改成Y-m-d H:i:s[/collapse]

25.将头图默认模式改为图片样式

[collapse status="false" title="点击查看"]Handsome作者加密了Config.php所以无法将此加入后台设置，只能改Content.php

方法：

打开主题文件夹libs/Content.php在967行后加入以下代码即可实现头图默认为图片样式：

$parameterArray['thumbStyle'] = "PICTURE";

[/collapse]

26.自定义Handsome主题默认头图（支持多站点）

[collapse status="false" title="点击查看"]
[post cid="116" /]
[/collapse]

27.首页文章标题居中显示

[collapse status="false" title="点击查看"]主题设置-开发者设置-自定义CSS

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

[/collapse]

28.手机端隐藏广告和标签云等…

[collapse status="false" title="点击查看"]主题后台-开发者设置-自定义CSS

/*手机端不显示内容*/
@media (max-width:767px) {
    #blog_info,#tag_cloud-2,#tabs-4,#a_d_sidebar {
        display: none;
    }
}
/* #tag_cloud-2为标签云，#tabs-4为博客评论随机文章，#a_d_sidebar为广告，#blog_info为博客信息，可自行组合显示或隐藏*/

[/collapse]

29.魔改文章盒子及标题修改

[collapse status="false" title="点击查看"]主题设置-开发者设置-自定义CSS

@charset "utf8";
/*Modifi-css for handsome 4.5.x*/
/*main*/
.entry-content{background-color:transparent}.panel-small .post-meta{padding:25px 30px 15px 25px!important}.panel-small .pos50t-meta{padding-left:25px;padding-right:25px}.b-light{border-color:#bbb4}.tip:before{margin-top:0!important}.wrapper-md .panel:not(.b-a),.wrapper-md .panel-small{transition:all .2s;box-shadow:1px 1px 3px 1px rgba(0,0,0,0.2)!important}.wrapper-md .panel:not(.b-a):hover,.wrapper-md .panel-small:hover{box-shadow:1px 1px 5px 2px rgba(0,0,0,0.3)!important}.list-group-item{background-color:rgba(255,255,255,.8)}.thumb-lg{width:130px}#widget-tabs-4-comments .list-group-item,#tag_toc,#post-panel,#sidebar,#post-content{background-color:transparent!important}#alllayout.app-aside-folded .tooltip{display:none!important}.standpage{width:100%;height:calc(100% - 50px);position:fixed;top:50px;left:0}.standpage,aside,aside *{transition:all .3s}.wrapper-md>#comments,.wrapper-md>.blog-post,.wrapper-md>.breadcrumb,.m-t-lg.m-b-lg,.wrapper-md>.no_search_result{max-width:800px;margin-left:auto;margin-right:auto}.wrapper-md .panel,.wrapper-md .panel-small,.wrapper-md>#comments,.wrapper-md>.breadcrumb{background-color:rgba(255,255,255,.9)}.wrapper-md article,.wrapper-md>#comments{border-radius:5px;overflow:hidden}.bg-auto:before{bottom:51px}@media screen and (min-width:992px){aside.col.w-md.b-l{background-color:rgba(255,255,255,.7)}aside.col.w-md.b-l:hover{background-color:#fff}}header.wrapper-md{background-color:rgba(246,248,248,.93)!important}.blog-post>.panel,.blog-post>.panel-small{border:0;border-radius:5px}.index-post-img,.index-post-img-small{border-top-left-radius:5px;border-top-right-radius:5px;overflow:hidden}.blog-post>.panel .index-post-img .item-thumb,.panel-small .index-post-img-small .item-thumb-small,.index-post-title a{transition:all .2s}.blog-post>.panel:hover .index-post-img .item-thumb,.blog-post>.panel-small:hover .index-post-img-small .item-thumb-small{transform:scale(1.05)}#footer>.wrapper{background-color:rgba(237,241,242,.8)}.streamline{margin-left:20px;padding-right:10px}.streamline .comment-body{position:relative}.streamline .comment-body .m-l-lg:before{background-color:rgba(255,255,255,.9);content:" ";position:absolute;width:calc(100%+10px);height:calc(100%+20px);top:-10px;left:0;z-index:-1;border-radius:2px;box-shadow:0 0 2px 2px rgba(0,0,0,.125)}aside.col.w-md.no-border-xs{transition:all .3s}.visible-xs-inline{display:inline-block!important}@media screen and (min-width:768px) and (max-width:1140px){.visible-xs-inline{display:none!important}}.tocify-item{background-color:rgba(255,255,255,.8)}.tocify-item.active{color:#7266ba;font-weight:700}#kotori{position:absolute;left:-15px;bottom:-15px;max-height:110px;transition:all .3s}#kotori:hover{left:0;bottom:0}#kotori.hidekotori{left:-110px;bottom:-110px}@media screen and (max-width:767px){#kotori{display:none}.blog-post>.panel:hover .index-post-img .item-thumb{transform:none!important}}.index-post-title a:hover{color:#2ebaae}.wrapper-md .comment-list .comment-parent,.wrapper-md .comment-list .comment-children{border-top-width:1px;border-top-style:solid;border-top-color:#ddd;padding-top:10px}.max-img{max-height:400px}.navi-wrap .navi.clearfix>ul.nav{padding-bottom:100px}.app-aside-folded.navi-wrap{max-height:calc(100% - 50px)}.lg-backdrop{background-color:rgba(0,0,0,.8)}.skPlayer-name{font-family:"Source Sans Pro","Hiragino Sans GB","Microsoft Yahei",SimSun,Helvetica,Arial,Sans-serif}html.fancybox-enabled{overflow-y:auto}.fancybox-bg{background-color:rgba(0,0,0,.95)}.fancybox-arrow:after{background-color:rgba(0,0,0,.8)}.blog-post .post-meta.wrapper-lg{padding-top:15px}.share,.yellow,.red,.lblue,.green{background-position-y:50%}.timeline .tl-date{color:#fff;text-shadow:0 0 4px #000}body.modal-open{overflow-y:auto;padding-right:0!important}.reply2view{background-color:transparent;border:solid 1px #bbb}#content{transition:all .3s}.OwO .OwO-logo{height:28px}#tag_toc.fixed #toc{width:100%}.page-navigator .next a,.page-navigator .prev a{height:31px}.page-navigator>li:last-child>a,.page-navigator>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}#tooltip-1{width:0;height:0;overflow:hidden}.tooltip-2{width:0;height:0;border:0}.item-thumb-small{background-position:left}
/*experimental modify 2018-07-19*/
@media screen and (min-width:1200px){.sticky{position: absolute;top: 10px;left: 15px}.panel .item-thumb{height:300px}#post-panel .blog-post{position:relative}#post-panel .panel{overflow:hidden}#post-panel .panel .post-meta{position:relative;margin-top:-300px;height:300px;padding-top:133px!important;padding-bottom:0!important;background-color:rgba(0,0,0,.3);color:#fff!important;transition:all .3s}#post-panel .panel .post-meta,#post-panel .panel-small .post-meta{border-radius:5px}#post-panel .panel .post-meta *,#post-panel .panel-small .post-meta *{color:#fff!important}#post-panel .panel .post-meta>h2,#post-panel .panel-small .post-meta>h2{text-align:center;text-shadow:0 0 3px #fff}#post-panel .panel .post-meta>p,#post-panel .panel .post-meta>div,#post-panel .panel-small .post-meta>p,#post-panel .panel-small .post-meta>div{transition:all .3s;transform:translateY(-10px);opacity:0}#post-panel .panel .post-meta>.text-muted,#post-panel .panel-small .post-meta>.text-muted{position:absolute;bottom:20px}#post-panel .panel .post-meta>.line{position:absolute;bottom:40px;width:740px}#post-panel .panel-small .post-meta>.line{position:absolute;bottom:40px;width:350px}#post-panel .panel .post-meta>.summary{position:absolute;bottom:60px;width:740px}#post-panel .panel-small .post-meta>.summary{position:absolute;bottom:60px;width:350px}#post-panel .panel-small{display:inline-block;height:300px;width:calc(50% - 10px);margin-right:20px}#post-panel .panel-small:nth-child(2n){margin-right:0}#post-panel .panel-small .index-img-small,#post-panel .panel-small .index-img-small .item-thumb-small{height:100%;width:100%}#post-panel .panel-small .post-meta{position:absolute;height:300px;width:calc(50% - 10px);padding:133px 20px 0 20px!important;background-color:rgba(0,0,0,.3);color:#fff!important;transition:all .3s}#post-panel .panel:hover .post-meta,#post-panel .panel-small:hover .post-meta{background-color:rgba(0,0,0,.6)}#post-panel .panel:hover .post-meta>p,#post-panel .panel:hover .post-meta>div,#post-panel .panel-small:hover .post-meta>p,#post-panel .panel-small:hover .post-meta>div{opacity:1;transform:translateY(0)}#post-panel .panel:hover .post-meta,#post-panel .panel-small:hover .post-meta{padding-top:80px!important}#post-panel .ahover{display:block;position:absolute;top:0;left:0;right:0;bottom:0}.blog-post>.panel:hover .index-post-img,.blog-post>.panel-small:hover .index-post-img-small{filter:blur(3px)}}header.bg-light.wrapper-md{margin-top:30px;background-color:transparent!important;border:0;text-align:center;text-shadow:0 0 3px #000}header.wrapper-md *{color:#fff}header.wrapper-md h1{font-size:32px}header.wrapper-md h1{font-weight:bold!important}
/*links*/
.link-main{padding:50px 0 50px 20px;text-align:center}.link-main h3{margin-top:0}.link-main .item{display:inline-block;letter-spacing:0;margin-right:20px;margin-bottom:20px;width:289px;height:240px;font-size:14px;overflow:hidden;border-radius:5px;background:rgba(255,255,255,.95);border:1px solid #e1e8ed;transition:background .2s}.link-main .link-bg{position:relative;height:90px;padding:0 1em;background-color:#777}.link-main .link-bg .bg:before{display:block;content:"";position:absolute;left:0;height:100%;width:100%;background:rgba(0,0,0,.5)}.link-main .link-bg .link-avatar{position:absolute;bottom:-50px;border:4px solid #FFF;border-radius:100%;background-color:#fff;box-shadow:0 0 5px rgba(0,0,0,0.5)}.link-main .link-bg .link-avatar img{border-radius:100%}.link-main .avatar{display:block;object-fit:cover}.link-main .bg,.link-main .link-bg{background-repeat:no-repeat;background-position:center;background-size:cover;display:block}.link-main .bg{position:absolute;top:0;bottom:0;left:0;right:0;filter:blur(1.5px);background-color:#fff}.link-main .meta{padding:.9em 1em;text-align:right}.link-main .info{color:#525766;padding:0 1em 1em}.link-main .info .name{font-weight:600;font-size:16px}@media screen and (max-width:330px){.link-main{padding:50px 0 50px 0}.link-main .item{margin-right:0}}.link-main .item:hover{background:rgba(255,255,255,1)}.link-main .item:hover .bg{filter:blur(0.1px)}
/*comments*/
#comments pre code{display:inline}.wrapper-md>#comments{border:solid 1px #fff;padding:10px 30px 20px 30px}.hideContent{background-color:transparent;padding:10px 0}
.agent {display: inline-block;margin-left: 5px;padding: 0 3px;border-radius: 2px;color: #58666e;font-size: 12px;opacity: .8}
/*img*/
img[mw400]{max-width:400px!important;width:100%}.mw400{max-width:400px}

[/collapse]

插件

[collapse status="false" title="点击查看"]Handsome主题自带插件有啥看的当然官网下载
[post cid="113" /]
[post cid="112" /]
[post cid="69" /]
[post cid="33" /]
[post cid="83" /]
[post cid="111" /]
[post cid="168" /]
[/collapse]

0
TypechoHandsome
版权属于： 低调G
本文链接： https://ddg.ink/96.html
作品采用： 《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权
相关推荐
Handsome主题使用文档
Handsome主题使用文档
 Typecho常用统计代码
Typecho常用统计代码
 Typecho新版又拍云插件UpyunFile
Typecho新版又拍云插件UpyunFile
 更换Typecho默认Gravatar头像源地址
更换Typecho默认Gravatar头像源地址

评论 (1)

取消
  1. 头像
    Vergil
    Windows 10 · QQ Browser

    第23已偷走，感谢博主分享|´・ω・)ノ

    回复