Typecho|Handsome 主题的一些修改教程

Author： Kid
发布时间：February 18, 2021
9091views
4 comments
6964 words
Categories：知识笔记

说明：博客使用的Handsome主题，感觉很不错。这里参考别人做了一些修改，记录一下。本站静态文件（主题目录下的/assets/目录）已托管在github，开启静态CDN加速。

1、文章摘要美化设置

Typecho博客默认没有自动摘要的功能，博客首页和分类归档页面显示的文章都是全文输出的，对于内容文字很多的文章，会把页面拉伸得很长，显示得也不怎么美观。但博主可以在发表文章的时候手动摘要。

在发表文章的时候，在文章内容中空两行添加标签，再空一行即可。

比如内容一共有五段，要显示前三段，就在第三段结束处添加标签代码

2、鼠标点击特效

将以下代码放在主题的handsome/component/footer.php中的</body>之前即可。

<!--#字体自行修改-->
<script type="text/javascript"> 
/* 鼠标特效 */
var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) { 
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 
        var $i = $("<span/>").text(a[a_idx]); 
        a_idx = (a_idx + 1) % a.length; 
        var x = e.pageX, 
        y = e.pageY; 
        $i.css({ 
            "z-index": 2000, 
            "top": y - 20, 
            "left": x, 
             "position": "absolute", 
             "font-weight": "bold", 
             "color": "#ff6651" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
         }); 
   }); 
}); 
</script>

3、文章标题居中

本项修改的是文章标题，使其居中。将以下代码添加至后台主题设置，自定义CSS。

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

4、浏览器标签页设置

本项修改的是博客浏览器标签显示，将以下代码添加至后台主题设置，自定义输出head头部的HTML代码。

<script>var OriginTitile=document.title;
var st;
document.addEventListener('visibilitychange',function(){
if(document.hidden){
document.title="(つェ⊂)我藏好了哦";
clearTimeout(st);
console.log('hide');
}else{
document.title='(*´∇｀*) 被你发现啦~ '+OriginTitile;
console.log('show');
st=setTimeout(function(){
document.title=OriginTitile;
},4000);
console.log('endChange=');
}
});</script>

5、首页文章版式圆角化

本项修改的是首页文章版式，包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置，自定义CSS。

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

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

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

6、首页头像自动旋转并放大

本项修改的是首页头像，将鼠标放至头像后使其转动并放大。将以下代码添加至后台主题设置，自定义CSS。

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

.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:3px;
    animation:avatar .5s
}

7、首页文章图片获取焦点放大

本项修改的是首页文章图片，将鼠标放到首页头图后使其放大。将以下代码添加至后台主题设置，自定义CSS。

/*首页文章图片获取焦点放大*/
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

.item-thumb:hover{
    transform: scale(1.05);  
}

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}

8、首页文章版式阴影化

本项修改的是首页文章版式，包括图片使其四周加上一层绚丽的阴影。将以下代码添加至后台主题设置，自定义CSS。

/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(0, 197, 205, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(0, 197, 205, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(0, 197, 205, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(0, 197, 205, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(0, 197, 205, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(0, 197, 205, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(0, 197, 205, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(0, 197, 205, 0.35);
}

9、自定义滚动条滑块

本项修改针对浏览器最右边的滚动条滑块，使其改变样式。将以下代码添加至后台主题设置，自定义CSS。

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
    width: 3px;
    height: 16px;
    background-color: rgba(255,255,255,0);
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,0);
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

修改方案很多由萌鼠提供，在此表示感谢！

10、正文末尾End标识

效果请参见本站正文内容结尾的 End 分割线样式。
在模板文件/themes/handsome/post.php的文章页面内适当位置添加下述代码：

<!--内容结束分割线-->
<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;}

11、转载申明效果

效果请参见本站正文内容结尾的版权申明效果。
在模板文件/themes/handsome/post.php的文章页面内适当位置添加下述代码：

<!--知识共享许可协议-->
<div class="tt-license">
    <p><span class="tt-license-icon"><i data-feather="award"></i></span>本文标题：<?php $this->title() ?></p>
    <p><span class="tt-license-icon"><i data-feather="link"></i></span>本文链接：<?php $this->permalink() ?></p>
    <p><span class="tt-license-icon"><i data-feather="shield"></i></span>除非另有说明，本作品采用<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>。</p>
    <p><span class="tt-license-icon"><i data-feather="alert-circle"></i></span>声明：转载请注明文章来源。</p>
</div>
<!-- / 知识共享许可协议-->

添加CSS样式：

/*文章正文下的知识共享许可协议*/
.tt-license {font-size: 12px;font-weight: 600;padding: 1rem;background: repeating-linear-gradient(135deg,#f6f6f6,#f6f6f6 12px,#fff 0,#fff 24px);background-color: #f3f5f7;border-left: 3px solid #dde6e9;margin-bottom: 20px;}
.tt-license-icon {align-items: center;position: relative;float: left;margin: -10px -10px -10px 0;margin-right: 10px;overflow: hidden;text-align: center;display: flex;height: 40px;color: #ff5722;}
.tt-license a {color: #337ab7;text-decoration: underline;margin: 0 5px;}
/*深色模式下的知识共享许可协议*/
html.theme-dark .tt-license {background: repeating-linear-gradient(135deg,#191919,#191919 12px,#222 0,#222 24px);border-left: 3px solid #494949;}.tt-license p {line-height: 1.5em;margin: 5px 0!important;}

12、复制转载弹窗提醒

在外观设置中，自定义输出head头部的HTML代码处添加：

<script src="//lib.baomitu.com/layer/3.1.1/layer.js"></script>

在外观设置中，自定义JavaScript处添加：

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

13、后台登录页面

删除了主题右上角的登录入口：
在/themes/handsome/component/headnav.php里，删除了275-364行。
只保留左下角的登录入口，预览：
https://www.moekid.com/admin
在网站目录/admin/login.php，替换全部内容为：

<?php
include 'common.php';
if ($user->hasLogin()) {
    $response->redirect($options->adminUrl);
}
$rememberName = htmlspecialchars(Typecho_Cookie::get('__typecho_remember_name'));
Typecho_Cookie::delete('__typecho_remember_name');
$bodyClass = 'body-100';
include 'header.php';
?>
<!--canvas画布-->
<script src="https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js"></script>
<canvas id="c" width="300" height="150"></canvas> 
<div class="typecho-login-wrap">
    <div class="typecho-login">
        <h1><a href="https://www.ttker.com/" class="i-logo">丛林小二</a></h1>
        <form action="<?php $options->loginAction(); ?>" method="post" name="login" role="form">
            <p>
                <label for="name" class="sr-only"><?php _e('用户名'); ?></label>
                <input type="text" id="name" name="name" value="<?php echo $rememberName; ?>" placeholder="<?php _e('用户名'); ?>" class="text-l w-100" autofocus />
            </p>
            <p>
                <label for="password" class="sr-only"><?php _e('密码'); ?></label>
                <input type="password" id="password" name="password" class="text-l w-100" placeholder="<?php _e('密码'); ?>" />
            </p>
            <p class="submit">
                <button type="submit" class="btn btn-l w-100 primary"><?php _e('登录'); ?></button>
                <input type="hidden" name="referer" value="<?php echo htmlspecialchars($request->get('referer')); ?>" />
            </p>
            <p><label for="remember"><input type="checkbox" name="remember" class="checkbox" value="1" id="remember" /> <?php _e('下次自动登录'); ?></label></p>
        </form>
        
        <p class="more-link">
            <a href="<?php $options->siteUrl(); ?>"><?php _e('返回首页'); ?></a>
            <?php if($options->allowRegister): ?>
            &bull;
            <a href="<?php $options->registerUrl(); ?>"><?php _e('用户注册'); ?></a>
            <?php endif; ?>
        </p>
    </div>
</div>
<!--登录样式-->
<style> .typecho-login-wrap { position: fixed; }
.typecho-login {display: block;padding: 10px 20px;margin-top: 20vh;border-radius: 15px;-moz-box-shadow: 0 0 10px #ffffff;box-shadow: 0 0 15px 0px #868686;background: rgb(255 255 255 / 60%);}
.i-logo{display: unset;background: unset;filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=55);opacity: 0.55;}
input{outline: 0;}
input:focus {box-shadow: 0 0 0 0.2rem rgb(167 191 232 / 25%);}
body {display: flex;align-items: center;justify-content: center;}
</style>
<script>
$(document).ready(function () {
    $('#name').focus();
});
</script>
<?php include 'footer.php'; ?>
<!--canvas背景动画js-->
<script type="text/javascript">        
$(document).ready(function() {var canvas = document.getElementById("c");var ctx = canvas.getContext("2d");var c = $("#c");var w,h;var pi = Math.PI;var all_attribute = {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,/* 颜色亮度最大值*/};var style_color = find_random(0,360);var all_element =[];window_resize();function start(){window.requestAnimationFrame(start);style_color+=.1;ctx.fillStyle = 'hsl('+style_color+',100%,97%)';ctx.fillRect(0, 0, w, h);if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability){all_element.push(new ready_run);}all_element.map(function(line) {line.to_step();})};function ready_run(){this.to_reset();};ready_run.prototype = {to_reset:function(){var t = this;t.x = find_random(0,w);t.y = find_random(0,h);t.radius = find_random(all_attribute.radius_min,all_attribute.radius_max);t.radius_change = find_random(all_attribute.radius_add_min,all_attribute.radius_add_max);t.opacity = find_random(all_attribute.opacity_min,all_attribute.opacity_max);t.opacity_change = find_random(all_attribute.opacity_prev_min,all_attribute.opacity_prev_max);t.light = find_random(all_attribute.light_min,all_attribute.light_max);t.color = 'hsl('+style_color+',100%,'+t.light+'%)';},to_step:function(){var t = this;t.opacity -= t.opacity_change;t.radius += t.radius_change;if(t.opacity <= 0){t.to_reset();return false;}ctx.fillStyle = t.color;ctx.globalAlpha = t.opacity;ctx.beginPath();ctx.arc(t.x,t.y,t.radius,0,2*pi,true);ctx.closePath();ctx.fill();ctx.globalAlpha = 1;}};function window_resize(){w = window.innerWidth;h = window.innerHeight;canvas.width = w;canvas.height = h;};$(window).resize(function(){window_resize();});function find_random(num_one,num_two){return Math.random()*(num_two-num_one)+num_one;};(function() {var lastTime = 0;var vendors = ['webkit', 'moz'];for(var xx = 0; xx < vendors.length && !window.requestAnimationFrame; ++xx) {window.requestAnimationFrame = window[vendors[xx] + 'RequestAnimationFrame'];window.cancelAnimationFrame = window[vendors[xx] + 'CancelAnimationFrame'] ||window[vendors[xx] + 'CancelRequestAnimationFrame'];}if (!window.requestAnimationFrame) {window.requestAnimationFrame = function(callback, element) {var currTime = new Date().getTime();var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));var id = window.setTimeout(function() {callback(currTime + timeToCall);}, timeToCall);lastTime = currTime + timeToCall;return id;};}if (!window.cancelAnimationFrame) {window.cancelAnimationFrame = function(id) {clearTimeout(id);};}}());start();});
</script>

该方案由丛林小二提供，在此表示感谢！

14、底部标签修改

在/themes/handsome/component/footer.php，删除原来的底部标签，保留copyright部分，

将以下内容插入到外观自定义CSS中：

.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 14px;
  background-color: #abbac3;
  margin-bottom: 10px
}
.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  padding: 6px 6px 6px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}

.github-badge .badge-value {
  display: inline-block;
  padding: 6px 6px 6px 6px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}

.github-badge .bg-blue {
  background-color: #007ec6
}

.github-badge .bg-orange {
  background-color: #ffa500
}

.github-badge .bg-red {
  background-color: #f00
}

.github-badge .bg-green {
  background-color: #3bca6e
}

.github-badge .bg-purple {
  background-color: #ab34e9
}

将以下内容插入到外观-博客底部右侧信息中：

<div class="github-badge">
<a href="https://bit.ly/33del6q" target="_blank" title="由 SpartanHost 强力驱动" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">Hosted</span><span class="badge-value bg-blue">SpartanHost</span>
</a>
</div>
&nbsp;|&nbsp; 
<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
&nbsp;|&nbsp; 
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题，作者：友人C" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>

15、评论区修改

评论框输入打字特效：
首先下载特效JS文件，然后将其放在网站目录某个地方；
我一般是统一放在默认CSS文件夹里；
Handsome主题默认CSS文件夹路径：/usr/themes/handsome/assets/css/

然后编辑主题文件 /handsome/component/footer.php，在 </body> 下面一行添加以下代码；

<!--打字特效-->
<script type="text/javascript" src="JS文件路径"></script>

如果JS文件放在默认CSS文件夹里，那么代码如下；

<!--打字特效-->
<script type="text/javascript" src="/usr/themes/handsome/assets/css/commentTyping.js"></script>

评论添加滑稽表情包
由于主题的自带表情还是较为缺少，于是我自己添加了一些表情；

复制 owo.json到 handsome/usr/目录下
复制 paopao文件夹到 /handsome/assets/img/emotion目录或者云存储空间
清除缓存，然后刷新即可，效果图：

End

本文标题：Typecho|Handsome 主题的一些修改教程

本文链接：https://moekid.com/archives/22/

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

声明：转载请注明文章来源。

Last modification：December 13th, 2021 at 01:28 pm

如果觉得我的文章对你有用，请随意赞赏

4 comments

zklyxkihlx
November 15th, 2024 at 07:01 pm

你的文章充满了欢乐，让人忍不住一笑。 https://www.4006400989.com/qyvideo/15456.html

Reply
dydbnzxwvh
November 15th, 2024 at 06:46 pm

你的文章让我感受到了生活的美好，谢谢！ https://www.4006400989.com/qyvideo/70970.html

Reply
XGGTB4479SF www.yandex.ru
October 6th, 2024 at 03:31 am

该评论仅登录用户及评论双方可见

Reply
8QB1VJSXD www.yandex.ru
September 27th, 2024 at 08:52 am

该评论仅登录用户及评论双方可见

Reply

Typecho|Handsome 主题的一些修改教程

Kid • 2021 年 02 月 18 日

1、文章摘要美化设置

在发表文章的时候，在文章内容中空两行添加标签，再空一行即可。

比如内容一共有五段，要显示前三段，就在第三段结束处添加标签代码

2、鼠标点击特效

将以下代码放在主题的handsome/component/footer.php中的</body>之前即可。

<!--#字体自行修改-->
<script type="text/javascript"> 
/* 鼠标特效 */
var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) { 
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 
        var $i = $("<span/>").text(a[a_idx]); 
        a_idx = (a_idx + 1) % a.length; 
        var x = e.pageX, 
        y = e.pageY; 
        $i.css({ 
            "z-index": 2000, 
            "top": y - 20, 
            "left": x, 
             "position": "absolute", 
             "font-weight": "bold", 
             "color": "#ff6651" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
         }); 
   }); 
}); 
</script>

3、文章标题居中

本项修改的是文章标题，使其居中。将以下代码添加至后台主题设置，自定义CSS。

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

4、浏览器标签页设置

本项修改的是博客浏览器标签显示，将以下代码添加至后台主题设置，自定义输出head头部的HTML代码。

<script>var OriginTitile=document.title;
var st;
document.addEventListener('visibilitychange',function(){
if(document.hidden){
document.title="(つェ⊂)我藏好了哦";
clearTimeout(st);
console.log('hide');
}else{
document.title='(*´∇｀*) 被你发现啦~ '+OriginTitile;
console.log('show');
st=setTimeout(function(){
document.title=OriginTitile;
},4000);
console.log('endChange=');
}
});</script>

5、首页文章版式圆角化

本项修改的是首页文章版式，包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置，自定义CSS。

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

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

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

6、首页头像自动旋转并放大

本项修改的是首页头像，将鼠标放至头像后使其转动并放大。将以下代码添加至后台主题设置，自定义CSS。

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

.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:3px;
    animation:avatar .5s
}

7、首页文章图片获取焦点放大

本项修改的是首页文章图片，将鼠标放到首页头图后使其放大。将以下代码添加至后台主题设置，自定义CSS。

/*首页文章图片获取焦点放大*/
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

.item-thumb:hover{
    transform: scale(1.05);  
}

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}

8、首页文章版式阴影化

本项修改的是首页文章版式，包括图片使其四周加上一层绚丽的阴影。将以下代码添加至后台主题设置，自定义CSS。

/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(0, 197, 205, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(0, 197, 205, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(0, 197, 205, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(0, 197, 205, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(0, 197, 205, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(0, 197, 205, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(0, 197, 205, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(0, 197, 205, 0.35);
}

9、自定义滚动条滑块

本项修改针对浏览器最右边的滚动条滑块，使其改变样式。将以下代码添加至后台主题设置，自定义CSS。

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
    width: 3px;
    height: 16px;
    background-color: rgba(255,255,255,0);
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,0);
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

修改方案很多由萌鼠提供，在此表示感谢！

10、正文末尾End标识

效果请参见本站正文内容结尾的 End 分割线样式。
在模板文件/themes/handsome/post.php的文章页面内适当位置添加下述代码：

<!--内容结束分割线-->
<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;}

11、转载申明效果

效果请参见本站正文内容结尾的版权申明效果。
在模板文件/themes/handsome/post.php的文章页面内适当位置添加下述代码：

<!--知识共享许可协议-->
<div class="tt-license">
    <p><span class="tt-license-icon"><i data-feather="award"></i></span>本文标题：<?php $this->title() ?></p>
    <p><span class="tt-license-icon"><i data-feather="link"></i></span>本文链接：<?php $this->permalink() ?></p>
    <p><span class="tt-license-icon"><i data-feather="shield"></i></span>除非另有说明，本作品采用<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>。</p>
    <p><span class="tt-license-icon"><i data-feather="alert-circle"></i></span>声明：转载请注明文章来源。</p>
</div>
<!-- / 知识共享许可协议-->

添加CSS样式：

/*文章正文下的知识共享许可协议*/
.tt-license {font-size: 12px;font-weight: 600;padding: 1rem;background: repeating-linear-gradient(135deg,#f6f6f6,#f6f6f6 12px,#fff 0,#fff 24px);background-color: #f3f5f7;border-left: 3px solid #dde6e9;margin-bottom: 20px;}
.tt-license-icon {align-items: center;position: relative;float: left;margin: -10px -10px -10px 0;margin-right: 10px;overflow: hidden;text-align: center;display: flex;height: 40px;color: #ff5722;}
.tt-license a {color: #337ab7;text-decoration: underline;margin: 0 5px;}
/*深色模式下的知识共享许可协议*/
html.theme-dark .tt-license {background: repeating-linear-gradient(135deg,#191919,#191919 12px,#222 0,#222 24px);border-left: 3px solid #494949;}.tt-license p {line-height: 1.5em;margin: 5px 0!important;}

12、复制转载弹窗提醒

在外观设置中，自定义输出head头部的HTML代码处添加：

<script src="//lib.baomitu.com/layer/3.1.1/layer.js"></script>

在外观设置中，自定义JavaScript处添加：

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

13、后台登录页面

<?php
include 'common.php';
if ($user->hasLogin()) {
    $response->redirect($options->adminUrl);
}
$rememberName = htmlspecialchars(Typecho_Cookie::get('__typecho_remember_name'));
Typecho_Cookie::delete('__typecho_remember_name');
$bodyClass = 'body-100';
include 'header.php';
?>
<!--canvas画布-->
<script src="https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js"></script>
<canvas id="c" width="300" height="150"></canvas> 
<div class="typecho-login-wrap">
    <div class="typecho-login">
        <h1><a href="https://www.ttker.com/" class="i-logo">丛林小二</a></h1>
        <form action="<?php $options->loginAction(); ?>" method="post" name="login" role="form">
            <p>
                <label for="name" class="sr-only"><?php _e('用户名'); ?></label>
                <input type="text" id="name" name="name" value="<?php echo $rememberName; ?>" placeholder="<?php _e('用户名'); ?>" class="text-l w-100" autofocus />
            </p>
            <p>
                <label for="password" class="sr-only"><?php _e('密码'); ?></label>
                <input type="password" id="password" name="password" class="text-l w-100" placeholder="<?php _e('密码'); ?>" />
            </p>
            <p class="submit">
                <button type="submit" class="btn btn-l w-100 primary"><?php _e('登录'); ?></button>
                <input type="hidden" name="referer" value="<?php echo htmlspecialchars($request->get('referer')); ?>" />
            </p>
            <p><label for="remember"><input type="checkbox" name="remember" class="checkbox" value="1" id="remember" /> <?php _e('下次自动登录'); ?></label></p>
        </form>
        
        <p class="more-link">
            <a href="<?php $options->siteUrl(); ?>"><?php _e('返回首页'); ?></a>
            <?php if($options->allowRegister): ?>
            &bull;
            <a href="<?php $options->registerUrl(); ?>"><?php _e('用户注册'); ?></a>
            <?php endif; ?>
        </p>
    </div>
</div>
<!--登录样式-->
<style> .typecho-login-wrap { position: fixed; }
.typecho-login {display: block;padding: 10px 20px;margin-top: 20vh;border-radius: 15px;-moz-box-shadow: 0 0 10px #ffffff;box-shadow: 0 0 15px 0px #868686;background: rgb(255 255 255 / 60%);}
.i-logo{display: unset;background: unset;filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=55);opacity: 0.55;}
input{outline: 0;}
input:focus {box-shadow: 0 0 0 0.2rem rgb(167 191 232 / 25%);}
body {display: flex;align-items: center;justify-content: center;}
</style>
<script>
$(document).ready(function () {
    $('#name').focus();
});
</script>
<?php include 'footer.php'; ?>
<!--canvas背景动画js-->
<script type="text/javascript">        
$(document).ready(function() {var canvas = document.getElementById("c");var ctx = canvas.getContext("2d");var c = $("#c");var w,h;var pi = Math.PI;var all_attribute = {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,/* 颜色亮度最大值*/};var style_color = find_random(0,360);var all_element =[];window_resize();function start(){window.requestAnimationFrame(start);style_color+=.1;ctx.fillStyle = 'hsl('+style_color+',100%,97%)';ctx.fillRect(0, 0, w, h);if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability){all_element.push(new ready_run);}all_element.map(function(line) {line.to_step();})};function ready_run(){this.to_reset();};ready_run.prototype = {to_reset:function(){var t = this;t.x = find_random(0,w);t.y = find_random(0,h);t.radius = find_random(all_attribute.radius_min,all_attribute.radius_max);t.radius_change = find_random(all_attribute.radius_add_min,all_attribute.radius_add_max);t.opacity = find_random(all_attribute.opacity_min,all_attribute.opacity_max);t.opacity_change = find_random(all_attribute.opacity_prev_min,all_attribute.opacity_prev_max);t.light = find_random(all_attribute.light_min,all_attribute.light_max);t.color = 'hsl('+style_color+',100%,'+t.light+'%)';},to_step:function(){var t = this;t.opacity -= t.opacity_change;t.radius += t.radius_change;if(t.opacity <= 0){t.to_reset();return false;}ctx.fillStyle = t.color;ctx.globalAlpha = t.opacity;ctx.beginPath();ctx.arc(t.x,t.y,t.radius,0,2*pi,true);ctx.closePath();ctx.fill();ctx.globalAlpha = 1;}};function window_resize(){w = window.innerWidth;h = window.innerHeight;canvas.width = w;canvas.height = h;};$(window).resize(function(){window_resize();});function find_random(num_one,num_two){return Math.random()*(num_two-num_one)+num_one;};(function() {var lastTime = 0;var vendors = ['webkit', 'moz'];for(var xx = 0; xx < vendors.length && !window.requestAnimationFrame; ++xx) {window.requestAnimationFrame = window[vendors[xx] + 'RequestAnimationFrame'];window.cancelAnimationFrame = window[vendors[xx] + 'CancelAnimationFrame'] ||window[vendors[xx] + 'CancelRequestAnimationFrame'];}if (!window.requestAnimationFrame) {window.requestAnimationFrame = function(callback, element) {var currTime = new Date().getTime();var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));var id = window.setTimeout(function() {callback(currTime + timeToCall);}, timeToCall);lastTime = currTime + timeToCall;return id;};}if (!window.cancelAnimationFrame) {window.cancelAnimationFrame = function(id) {clearTimeout(id);};}}());start();});
</script>

该方案由丛林小二提供，在此表示感谢！

14、底部标签修改

在/themes/handsome/component/footer.php，删除原来的底部标签，保留copyright部分，

将以下内容插入到外观自定义CSS中：

.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 14px;
  background-color: #abbac3;
  margin-bottom: 10px
}
.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  padding: 6px 6px 6px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}

.github-badge .badge-value {
  display: inline-block;
  padding: 6px 6px 6px 6px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}

.github-badge .bg-blue {
  background-color: #007ec6
}

.github-badge .bg-orange {
  background-color: #ffa500
}

.github-badge .bg-red {
  background-color: #f00
}

.github-badge .bg-green {
  background-color: #3bca6e
}

.github-badge .bg-purple {
  background-color: #ab34e9
}

将以下内容插入到外观-博客底部右侧信息中：

<div class="github-badge">
<a href="https://bit.ly/33del6q" target="_blank" title="由 SpartanHost 强力驱动" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">Hosted</span><span class="badge-value bg-blue">SpartanHost</span>
</a>
</div>
&nbsp;|&nbsp; 
<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
&nbsp;|&nbsp; 
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题，作者：友人C" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>

15、评论区修改

然后编辑主题文件 /handsome/component/footer.php，在 </body> 下面一行添加以下代码；

<!--打字特效-->
<script type="text/javascript" src="JS文件路径"></script>

如果JS文件放在默认CSS文件夹里，那么代码如下；

<!--打字特效-->
<script type="text/javascript" src="/usr/themes/handsome/assets/css/commentTyping.js"></script>

评论添加滑稽表情包
由于主题的自带表情还是较为缺少，于是我自己添加了一些表情；

复制 owo.json到 handsome/usr/目录下
复制 paopao文件夹到 /handsome/assets/img/emotion目录或者云存储空间
清除缓存，然后刷新即可，效果图：

1、文章摘要美化设置

2、鼠标点击特效

3、文章标题居中

4、浏览器标签页设置

5、首页文章版式圆角化

6、首页头像自动旋转并放大

7、首页文章图片获取焦点放大

8、首页文章版式阴影化

9、自定义滚动条滑块

10、正文末尾End标识

11、转载申明效果

12、复制转载弹窗提醒

13、后台登录页面

14、底部标签修改

15、评论区修改

4 comments