六十一:修复透明背景下文章目录bug

方法:将以下代码添加至后台-开发者设置-自定义CSS

#toc {
    background-color:rgba(255, 255, 255, .15) !important;
}

六十二:修复透明背景下时光机右侧bug

方法:将以下代码添加至后台-开发者设置-自定义CSS

.bg-light .lter, .bg-light.lter {
    text-align: justify;
}

六十三:更好看的友链样式

1:首先更换/usr/themes/handsome/links.php51-100行的数据:

                    <div class="tab-pane fade in" id="tab_2">
                        <div class="link-box">
                            <?php
                            $mypattern = <<<eof
  <a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="{title}"> 
    <div class="thumb">
        <img width="200" height="200" src={image} alt="{title}" /> 
    </div>
    <div class="content">
        <p class="title">{name}</p>
    </div>
</a>
eof;
                            Handsome_Plugin::output($mypattern, 0, "one");
                            ?>
                        </div>
                    </div>

                    <div class="tab-pane fade in" id="tab_3">
                        <div class="link-box">
                            <?php
                            $mypattern = <<<eof
  <a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="{title}"> 
    <div class="thumb">
        <img width="200" height="200" src={image} alt="{title}" /> 
    </div>
    <div class="content">
        <p class="title">{name}</p>
    </div>
</a>
eof;
                            Handsome_Plugin::output($mypattern, 0, "good");
                            ?>
                        </div>
                    </div>

                    <div class="tab-pane fade in" id="tab_4">
                        <div class="link-box">
                            <?php
                            $mypattern = <<<eof
  <a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="{title}"> 
    <div class="thumb">
        <img width="200" height="200" src={image} alt="{title}" /> 
    </div>
    <div class="content">
        <p class="title">{name}</p>
    </div>
</a>
eof;
                            Handsome_Plugin::output($mypattern, 0, "ten");

2:将以下代码添加至后台-开发者设置-自定义CSS

.link-box a .thumb {
    font-size: 0;
    overflow: hidden;
    background-color: #fff;
    margin: 0;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    width: 100%;
}

.link-box {
    overflow: hidden;
    padding: 4.375rem 2.1875rem 2.1875rem;
    margin: -3.125rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.link-box a{
    width: 16%;
    text-align: center;
    margin: 14px;
    border-radius: 1.3125rem;
}
.link-box a: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);
}

六十四:Handsame主题添加微信公众号入口

1.打开handsame主题目录->component->sidebar.php

2.在上面截图的代码位置:

 <?php if ($this->options->adContentSidebar != ""): ?>
         <!--广告位置-->

3.添加以下代码:

  <!--个人公众号位置-->
           <section id="a_d_sidebar" class="widget widget_categories wrapper-md clear">
              <h5 class="widget-title m-t-none text-md"><?php _me("欢迎关注微信公众号") ?></h5>
              <img src="https://你的公众号图片地址" alt="个人微信公众号" title="个人微信公众号" class="block">
          </section>

六十五:微信通知新评论

1.下载后解压,将解压后的目录名改为 Comment2Wechat,然后上传到你的 Typecho 的/usr/plugins,并在 Typecho 后台开启插件

2.到 Server酱里申请你的专属 SCKEY,并根据提示绑定你的微信
3.将你申请到的 SCKEY填到插件设置里,保存即可。链接:https://pan.baidu.com/s/11o3YktIwhD5E8Mc_fLxqiA
提取码:aamu

六十六:自建公众号对接handsome主题时光机

环境需求

PHP >= 7.1
PHP cURL 扩展
PHP OpenSSL 扩展
PHP SimpleXML 扩展
PHP fileinfo 扩展
PHP PDO_MYSQL 扩展

食用方法

1、拷贝项目到你的服务器
2、打开 网址/install.php 安装
3、在公众号后台服务器配置填写服务器地址为 项目所在网址/server.php 并启用服务器配置
4、公众号发送绑定,点击链接填写相关信息进行绑定
5、 配置完成,尽情使用吧!使用方法同handsome官方时光机发送公众号

github地址

https://github.com/iLay1678/wechat_for_handsome

2021.20.30打包链接:https://pan.baidu.com/s/1jCwAwdwU9U0_3DIHlmg1JQ
提取码:78ei

六十七:给背景添加粒子效果

1.下载js文件
链接:https://pan.baidu.com/s/1cd5nAbPii5bTlNhf37eNEw
提取码:3j8d

2.在网站引入js文件

<script src="source/Pranule.js"></script>

3.无需设置直接运行

<script>Pranule();</script>

4.如需要自定义,按照以下格式设置

<script>Pranule(['bg_effect','100',"0.0.0","0,0,0",'0','6000','20000','0','2','2','','0']);</script>

说明

六十八:防止复制

放在全局的js中

代码:

<script language="Javascript">

document.oncontextmenu=new Function("event.returnValue=false");

document.onselectstart=new Function("event.returnValue=false");

</script>

六十九:文章end标识

在模板文件 post.php内添加以下代码,建议在83行广告输出结束后添加。

<!--内容结束分割线-->
<div class="tt-fenge-end">
    <span>End</span>
</div>
<!--/ 内容结束分割线-->

在后台 自定义css中添加如下代码

/*文章正文下的结束End分割线样式*/
.tt-fenge-end{border-top: 2px dotted #eee;height: 0px;margin: 35px 0px;text-align: center;width: 100%;line-height: 1.6em;}
.tt-fenge-end span{background-color: #23b7e5;color: #fff;padding: 2px 8px;position: relative;top: -14px;border-radius: 12px;font-size: 12px;}
        /*深色模式下文章正文下的结束End分割线颜色*/
        html.theme-dark .tt-fenge-end{border-top: 2px dotted #4f4f4f;}

七十:加载动画

以下代码放置 主题文件header.php内

<!--加载动画-->
    <style>
    #PageLoading{background-color:#fff;height:100%;width:100%;position:fixed;z-index:1;margin-top:0px;top:0px;}
    #PageLoading-center{width:100%;height:100%;position:relative;}
    #PageLoading-center-absolute{
        position:absolute;left:50%;top:50%;
        height:200px;width:200px;
        margin-top:-100px;
        margin-left:-100px;
    }
    .object2{
        -moz-border-radius:50% 50% 50% 50%;
        -webkit-border-radius:50% 50% 50% 50%;
        border-radius:50% 50% 50% 50%;
        position:absolute;
        border-left:5px solid #FFB6C1;
        border-right:5px solid #b6def7;
        border-top:5px solid transparent;
        border-bottom:5px solid transparent;
        -webkit-animation:animate 2s infinite;
        animation:animate 2s infinite;

    }
    #object_one{left:75px;top:75px;width:50px;height:50px;}
    #object_two{left:65px;top:65px;width:70px;height:70px;-webkit-animation-delay:0.1s;animation-delay:0.1s;}
    #object_three{left:55px;top:55px;width:90px;height:90px;-webkit-animation-delay:0.2s;animation-delay:0.2s;}
    #object_four{left:45px;top:45px;width:110px;height:110px;-webkit-animation-delay:0.3s;animation-delay:0.3s;}
    @-webkit-keyframes animate{50%{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}
    100%{-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}}
    @keyframes animate{50%{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}
    100%{-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}}
    </style>

  <!--加载动画-->
<body id="body" class="fix-padding skt-loading">
    <body id="body" class="fix-padding" style="overflow:hidden">
        <div id="PageLoading" style="z-index:99999999;">
            <div id="PageLoading-center">
                <div id="PageLoading-center-absolute">
                    <div class="object2" id="object_four"></div>
                    <div class="object2" id="object_three"></div>
                    <div class="object2" id="object_two"></div>
                    <div class="object2" id="object_one"></div>
                </div>
            </div>
        </div>
    </body>
</body>

以下代码放置 后台-开发者设置-自定义javascript 内

$(function(){
        $("#PageLoading").fadeOut(400);
        $("#body").css('overflow','');
    });

这里面还有三种样式的加载动画有需要可以看看

为typecho博客添加加载动画 - 友人C (ihewro.com)

七十一:网站背景添加海浪背景

  • 添加至后台主题设置-开发者设置-自定义CSS
/* 海浪背景CSS部分 */
#wavesDIV{position: fixed;bottom: 0;width: 100%;display:block;height:20vh;background-color:rgb(125,165,191);animation: move-out 2s cubic-bezier(0,.98,.97,1) forwards;}
.waves { position:relative; width: 100%; height:15vh; margin-top:-15vh; min-height:100px; max-height:150px; }
.parallax > use { animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite; } 
.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } 
.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } 
.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } 
.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } 
@keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }
@keyframes move-out { 0% { transform: translateY(400%); } 100% { transform: translateY(0%); } }
  • 添加至后台主题设置-开发者设置-自定义网站头部代码
<div id="wavesDIV" style="display: block;">
        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
            <defs>
                <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
            </defs>
            <g class="parallax">
                <use xlink:href="#gentle-wave" x="48" y="-2" fill="rgba(125,165,191,0.3)"></use>
                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(125,165,191,0.5)"></use>
                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(125,165,191,0.7)"></use>
                <use xlink:href="#gentle-wave" x="48" y="12" fill="rgba(125,165,191,1)"></use>
            </g>
        </svg>
    </div>

七十二:输出控制台

放入后台-外观设置-开发者设置-自定义body

<!--输出控制台-->
    <script type="text/javascript">
      console.clear();  //清空控制台
      console.log("\n %c 凉心‘s Blog","color:#fff;background: linear-gradient(to right , #7A88FF, #d27aff);padding:5px;border-radius: 10px;");  //万能控制台,可写html代码
    </script>

七十三:背景添加冒泡动画

放入后台-外观设置-开发者设置-自定义body

<!--背景添加冒泡动画-->
   <div id="bubble"></div><script>class BGBubble{constructor(i){this.defaultOpts={id:"",num:100,start_probability:.1,radius_min:1,radius_max:2,radius_add_min:.3,radius_add_max:.5,opacity_min:.3,opacity_max:.5,opacity_prev_min:.003,opacity_prev_max:.005,light_min:40,light_max:70,is_same_color:!1,background:"#f1f3f4"},"[object Object]"==Object.prototype.toString.call(i)?this.userOpts={...this.defaultOpts,...i}:this.userOpts={...this.defaultOpts,id:i},this.color=this.random(0,360),this.bubbleNum=[],this.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,this.cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame}random(i,t){return Math.random()*(t-i)+i}initBubble(i,t){const a=window.innerWidth,s=window.innerHeight,n=this.userOpts,e=this.random(n.light_min,n.light_max);this.bubble={x:this.random(0,a),y:this.random(0,s),radius:this.random(n.radius_min,n.radius_max),radiusChange:this.random(n.radius_add_min,n.radius_add_max),opacity:this.random(n.opacity_min,n.opacity_max),opacityChange:this.random(n.opacity_prev_min,n.opacity_prev_max),light:e,color:`hsl(${t?i:this.random(0,360)},100%,${e}%)`}}bubbling(i,t,a){!this.bubble&&this.initBubble(t,a);const s=this.bubble;i.fillStyle=s.color,i.globalAlpha=s.opacity,i.beginPath(),i.arc(s.x,s.y,s.radius,0,2*Math.PI,!0),i.closePath(),i.fill(),i.globalAlpha=1,s.opacity-=s.opacityChange,s.radius+=s.radiusChange,s.opacity<=0&&this.initBubble(t,a)}createCanvas(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.canvas.style.display="block",this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.canvas.style.position="fixed",this.canvas.style.top="0",this.canvas.style.left="0",this.canvas.style.zIndex="-1",document.getElementById(this.userOpts.id).appendChild(this.canvas),window.onresize=(()=>{this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight})}start(){const i=window.innerWidth,t=window.innerHeight;this.color+=.1,this.ctx.fillStyle=this.defaultOpts.background,this.ctx.fillRect(0,0,i,t),this.bubbleNum.length<this.userOpts.num&&Math.random()<this.userOpts.start_probability&&this.bubbleNum.push(new BGBubble),this.bubbleNum.forEach(i=>i.bubbling(this.ctx,this.color,this.userOpts.is_same_color));const a=this.requestAnimationFrame;this.myReq=a(()=>this.start())}destory(){(0,this.cancelAnimationFrame)(this.myReq),window.onresize=null}}const bubbleDemo=new BGBubble("bubble");bubbleDemo.createCanvas(),bubbleDemo.start();</script>
  • 说明

    id: '',                           //容器ID
    num: 100,                        // 个数
    start_probability: 0.1,          // 如果数量小于num,有这些几率添加一个新的
    radius_min: 1,                   // 初始半径最小值
    radius_max: 2,                   // 初始半径最大值
    radius_add_min: .3,               // 半径增加最小值
    radius_add_max: .5,               // 半径增加最大值
    opacity_min: 0.3,                 // 初始透明度最小值
    opacity_max: 0.5,                // 初始透明度最大值
    opacity_prev_min: .003,            // 透明度递减值最小值
    opacity_prev_max: .005,            // 透明度递减值最大值
    light_min: 40,                 // 颜色亮度最小值
    light_max: 70,                 // 颜色亮度最大值
    is_same_color: false,          //泡泡颜色是否相同
    background:"#f1f3f4"           //背景颜色

七十四:响应耗时和访客总数

  • 首先将以下代码加到/usr/themes/handsome/libs/Content.php中,放在class Content{}之前
/*访问总量*/
     function theAllViews(){
             $db = Typecho_Db::get();
             $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
                 echo number_format($row[0]['SUM(VIEWS)']);
     }

    /*响应时间*/
    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文件内,找到博客信息下面添加以下代码
           <li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="refresh-ccw"></i></span>
               <span class="badge
           pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>
           <li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="users"></i></span>
               <span class="badge
           pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>

七十五:右侧边栏添加全站字数

  • 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;
}
?>
  • component/sidebar.php处,选择合适位置加入以下代码
<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-2"></i></span>
               <span class="badge 
           pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>

七十六:全站友链显示图片

  • aside.php里面大约214行的地方修改代码,在a标签内加上:
<img style=\"width:18px;height:18px;border-radius:50%;margin-right:3px;\" src=\"{image}\" />
  • 或者复制下方全部代码替换
<!--使用links插件,输出全站友链-->
                 <?php $mypattern1 = "<li data-original-title=\"{title}\" data-toggle=\"tooltip\" 
data-placement=\"top\"><a rel='noopener' href=\"{url}\" target=\"_blank\"><img style=\"width:18px;height:18px;border-radius:100%;margin-right:3px;\" src=\"{image}\" /><span>{name}</span></a></li>";
                  Handsome_Plugin::output($mypattern1, 0, "ten");?>

七十七:开启gzip压缩

  • 在根目录config.inc.php文件中,加入以下PHP代码即可(建议加在最上面):

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

七十八:正文结束添加版权信息

  • 在主题根目录下post.php文件中<?php echo Content::exportPayForAuthors(); ?>(大概在87行左右)添加以下内容

                   <!--版权声明开始-->
                  <div class="entry-content l-h-2x">
                  <div style="border-top: 2px dotted #8e8e8e96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;">
                  <span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">END</span>
               </div>
               <div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
               <span>本文作者:<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a><br></span>
               <span>文章标题:<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span>
               <span>本文地址:<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span>
               <span>版权说明:若无注明,本文皆<a href="<?php $this->options->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创,转载请保留文章出处。</span>
              </div>
           </div>
                  <!--版权声明结束-->

七十九:时光机使用DPplayer播放器

后台-设置-评论-允许使用的HTML标签和属性添加以下代码后保存

<div class="" data-config=''/>

Dplayer使用方法

<div class="dplayer" data-config='{"video":{"url":"视频地址","pic":"图片封面地址"}}'/>

**注意:请勿在评论设置中开启 Markdown语法否则无法解析;

八十:在文章中嵌入网页

在文章中添加代码即可,将 链接地址修改为你需要展示的网站地址;

<iframe align="center" width="100%" height="740px" src="链接地址"  frameborder="no" border="0"  scrolling="no" marginwidth="0" marginheight="0" ></iframe>

八十一:回复可见提示内容修改

编辑 /usr/themes/handsome/libs/Content.php文件
在1700行左右,自行修改提示内容即可;

八十二:更换后台Gravatar国内镜像**

目前可用 Gravatar国内镜像

打开 var/Typecho/Common.php找到下面的代码,大概在932行

public static function gravatarUrl($mail, $size, $rating, $default, $isSecure = false)
{
$url = $isSecure ? 'https://secure.gravatar.com' : 'http://www.gravatar.com';
$url .= '/avatar/';

if (!empty($mail)) {
$url .= md5(strtolower(trim($mail)));
}

$url .= '?s=' . $size;
$url .= '&r=' . $rating;
$url .= '&d=' . $default;

return $url;
}

替换为:

public static function gravatarUrl($mail, $size, $rating, $default, $isSecure = false)
{
$url = $isSecure ? 'https://cdn.v2ex.com/gravatar/' : 'http://gravatar.duoshuo.com/avatar/';

if (!empty($mail)) {
$url .= md5(strtolower(trim($mail)));
}

$url .= '?s=' . $size;
$url .= '&r=' . $rating;
$url .= '&d=' . $default;

return $url;
}

2.另外一个修改方法

具体方式为在 config.inc.php 中加入

define('__TYPECHO_GRAVATAR_PREFIX__', 'https://cdn.v2ex.com/gravatar/');

八十三:更换Gravatar默认头像

基于handsome主题修改,其它的主题也许路径不同;
打开网站根目录,编辑 /usr/themes/handsome/libs/Utils.php文件;
找到名为 getGravator Function修改 $default代码的变量值,大概在86行左右;
$default = ''; ''中填入可用的变量值即可;
可用的变量值:

  • mm神秘人
  • identicon 抽象图形(自动生成)
  • wavatar Wavatar(自动生成)
  • monsterid小怪物(自动生成)
  • retro复古(自动生成)

示例:
img

img

八十四:文章最后修改时间格式

文件位置:/usr/theme/handsome/libs/content.php
修改public static function exportPostFooter中对应的内容
或者查找"最后修改"

八十五:右侧博客信息背景色

文件位置:/usr/theme/handsome/component/sidebar.php
博客信息:修改<?php Typecho_Widget::widget('Widget_Stat')->to($stat); ?>中的

<span class="badge 
pull-right">

添加 style="background: #428bca;"

 <span class="badge
 pull-right"  style="background: #428bca;">

附: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:红色

End

本文标题:Handsome美化(六十一—八十五)

本文作者:tl0912

本文链接:https://www.tianlei.work/archives/79/

版权声明:转载或者引用本文内容>请注明来源及原作者,本文著作权归作者 (tl0912) 所有。

除非另有说明,本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

最后修改:2021 年 12 月 01 日 11 : 33 PM
如果觉得我的文章对你有用,请随意赞赏