说明

关于handsome主题的一些美化和修改统一记录,方便以后快速查找

一：浏览器动态标题

主题设置 - 开发者设置 - 自定义输出body尾部的HTML代码添加以下代码

<!--浏览器动态标题开始-->
<script>
 var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         document.title = '(●—●)喔哟，崩溃啦！';
         clearTimeout(titleTime);
     }
     else {
         document.title = '(/≧▽≦/)咦！又好了！' + OriginTitle;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });
</script>
<!--浏览器动态标题结束-->


二：复制弹窗提示

在模板目录的header.php文件中引入layer资源文件代码

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

主题设置 - 开发者设置 - 自定义JavaScript 中添加以下代码

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


三：复制代码自带版权说明

将以下JS代码放在post.php的文章内页php

<!--复制代码自带版权说明-->
<script>
document.body.addEventListener('copy', function (e) {
    if (window.getSelection().toString() && window.getSelection().toString().length > 42) {
        setClipboardText(e);
        // alert('商业转载请联系作者获得授权，非商业转载请注明出处哦~\n谢谢合作~(｡・`ω´･)');
    }
}); 
function setClipboardText(event) {
    var clipboardData = event.clipboardData || window.clipboardData;
    if (clipboardData) {
        event.preventDefault();
        var htmlData = ''
            + '著作权归作者所有。<br>'
            + '商业转载请联系作者获得授权，非商业转载请注明出处。<br>'
            + '作者：<?php $this->author() ?><br>'
            + '链接：' + window.location.href + '<br>'
            + '来源：<?php $this->options->siteUrl(); ?><br><br>'
            + window.getSelection().toString();
        var textData = ''
            + '著作权归作者所有。\n'
            + '商业转载请联系作者获得授权，非商业转载请注明出处。\n'
            + '作者：<?php $this->author() ?>\n'
            + '链接：' + window.location.href + '\n'
            + '来源：<?php $this->options->siteUrl(); ?>\n\n'
            + window.getSelection().toString();

        clipboardData.setData('text/html', htmlData);
        clipboardData.setData('text/plain',textData);
    }
}
</script>
<!--复制代码自带版权说明-->


四：左侧栏头像呼吸光环和鼠标悬停旋转放大

主题设置 - 开发者设置 - 自定义CSS添加以下代码


.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}

.img-full:hover {
    transform: scale(1.15) rotate(720deg);
}

@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

    25% {
        box-shadow: 0 0 16px #0f0;
    }

    50% {
        box-shadow: 0 0 4px #00f;
    }

    75% {
        box-shadow: 0 0 16px #0f0;
    }

    100% {
        box-shadow: 0 0 4px #f00;
    }
}

如果只需要单色呼吸光环，例如红色，可以将关键帧动画改为：

@keyframes light {
    from {
        box-shadow: 0 0 4px #f00;
    }

    to {
        box-shadow: 0 0 16px #f00;
    }
}


五：文章图标和评论头像鼠标悬停旋转

主题设置 - 开发者设置 - 自定义CSS添加以下代码

.img-square {
    transition: all 0.3s;
}

.img-square:hover {
    transform: rotate(360deg);
}


六：文章内打赏图标跳动

主题设置 - 开发者设置 - 自定义CSS添加以下代码


.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

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

    to {
        transform: scale(1.1);
    }
}


七：首页文章列表悬停上浮

主题设置 - 开发者设置 - 自定义CSS添加以下代码

.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);
    }


八：首页头图悬停放大并超出范围

主题设置 - 开发者设置 - 自定义CSS添加以下代码

.index-post-img {
    overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

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


九：文章内头图和文章图片悬停放大并将超出范围隐藏

主题设置 - 开发者设置 - 自定义CSS添加以下代码

.entry-thumbnail {
    overflow: hidden;
}

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

#post-content img:hover {
    transform: scale(1.05);
}


十：右侧导航栏图标颜色

主题设置 - 开发者设置 - 自定义CSS添加以下代码

.glyphicon-fire {
    color: #ff0000;
}

.nav-tabs-alt .glyphicon-comment {
    color: #495dc3;
}

.glyphicon-transfer {
    color: #0e5458;
}


十一：文章标题居中

主题设置 - 开发者设置 - 自定义CSS添加以下代码

.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}


十二：鼠标点击特效

主题设置 - 开发者设置 - 自定义输出body 尾部的HTML代码

<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": 999999999999999999999999999999999999999999999999999999999999999999999, 
            "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>


十三：网站加载耗时

在主题的functions.php文件中添加以下代码

//加载耗时
    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"> <i class="glyphicon glyphicon-time text-muted"></i> <span class="badge
pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li>


十四：博客介绍彩色特效

后台 - 设置外观 - 初级设置 - 博客介绍添加以下代码

<span class="text-muted text-xs block"><div id="chakhsu"></div> <script> var chakhsu = function (r) {function t() {return b[Math.floor(Math.random() * b.length)]} function e() {return String.fromCharCode(94 * Math.random() + 33)} function n(r) {for (var n = document.createDocumentFragment(), i = 0; r > i; i++) { var l = document.createElement("span"); l.textContent = e(), l.style.color = t(), n.appendChild(l) } return n}function i() {var t = o[c.skillI]; c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d) } /*以下内容自定义修改*/ var l = "❤", o = ["何须仰望别人，自己亦是风景" ].map(function (r) {return r + ""}), a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"], c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g}; i() }; chakhsu(document.getElementById('chakhsu')); </script> </span> </span>


十五：底部版权

1：先去除/usr/themes/handsome/component/footer.php中原有版权信息，将注释 之前的代码替换即可

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php Content::outputCommentJS($this, $this->security); ?>
</div><!-- /content -->
  <footer id="footer" class="app-footer" role="footer">
    <div class="wrapper bg-light">
      <span class="pull-right hidden-xs text-ellipsis">
      <?php $this->options->BottomInfo(); ?>

      </span>
          <span class="text-ellipsis"> <?php
            $this->options->BottomleftInfo(); ?></span>
    </div>
    <!--可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解-->

2：将以下代码添加至 后台-开发者设置-博客底部右侧信息(左侧类似)。

<div class="github-badge">
<a rel="license" href="http://beian.miit.gov.cn/" target="_blank" title="京ICP备18051114号-1">
<span class="badge-subject">京ICP备</span><span class="badge-value bg-black">18051114号-1</span></a>
</div>
 |  <div class="github-badge">
<a rel="license" href="http://www.typecho.org" target="_blank" title="由Typecho强力驱动">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span></a>
</div>
 |  <div class="github-badge">
<a rel="license" href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题，作者：友人C">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span></a>
</div>

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

.github-badge {
    display: inline-block;
    border-radius: 4px;
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    line-height: 15px;
    background-color: #ABBAC3;
  margin-bottom: 5px;
}
.github-badge .badge-subject {
    display: inline-block;
    background-color: #4D4D4D;
    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.github-badge .badge-value {
    display: inline-block;
    padding: 4px 6px 4px 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.github-badge .bg-brightgreen {
    background-color: #4DC820 !important;
}
.github-badge .bg-orange {
    background-color: #FFA500 !important;
}
.github-badge .bg-blueviolet {
    background-color: #8833D7 !important;
}
.github-badge .bg-firebrick {
    background-color: #EE2C2C !important;
}
.github-badge .bg-blue {
    background-color: #007EC6 !important;
}
.github-badge .bg-lightgrey {
    background-color: #9F9F9F !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
    background-color: #555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
    background-color: #9f9f9f !important;
}


十六：左侧导航栏添加

主题内置了四种图标库

前三种的方法都是class，而第四种feather的用法稍微有一点不一样
iconfont和fotello只支持主题文档中列出的图标，而Glyphicons和feather则支持的比较多。
前三种的用法：

{"name":"赞助","class":"glyphicon glyphicon-eye-open","link":"http://www.aichest.cn/start-page.html","target":"_self"},
{"name":"网络验证","class":"glyphicon glyphicon-globe","link":"http://www.aichest.cn/sfxt/","target":"_blank"},
{"name":"香港主机","class":"glyphicon glyphicon-cloud","link":"http://www.aichest.cn/vps/index.html","target":"_blank"}

而feather图标则不同,上面的第二个属性为class，而feather替换了class属性

{"name":"博客","feather":"hard-drive","link":"http://www.aichest.cn/","target":"_self"},


十七：左侧导航栏二级菜单

添加判断字段
在'网站根目录/usr/themes/handsome/component/aside.php第87行左右 $asideItemsOutput = "";之下添加：

$asideSecondItemsOutput = "";

在第100-105行左右添加"status"字段的判断,修改以下代码：

    if (@$itemTarget){
         $linkStatus = 'target="'.$itemTarget.'"';
    }else{
         $linkStatus = 'target="_blank"';
         }
    if (trim($itemFeather)!==""){

修改结果如下：

if (@$itemTarget){
                          $linkStatus = 'target="'.$itemTarget.'"';
                      }else{
                          $linkStatus = 'target="_blank"';
                      }
                     if (strtoupper($itemStatus) === 'SEC'){
                      if (trim($itemFeather)!==""){
                         $asideSecondItemsOutput .= '<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)!==""){
                          $asideSecondItemsOutput .= '<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)!==""){

添加二级菜单输出
在125行左右<?php if (@!in_array('component',$this->options->asideSetting)): ?>之上添加：

 <?php if (@$asideSecondItemsOutput): ?>
       <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 data-feather="menu"></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 @$asideSecondItemsOutput ?>
         </ul></li>  
    <?php endif; ?>

使用方法
在后台高级设置的左侧边栏导航填入即可。

{"name":"赞助","class":"glyphicon glyphicon-eye-open","link":"http://www.aichest.cn/start-page.html","target":"_self"},
{"name":"网络验证","class":"glyphicon glyphicon-globe","link":"http://www.aichest.cn/sfxt/","status":"sec","target":"_blank"},
{"name":"香港主机","class":"glyphicon glyphicon-cloud","link":"http://www.aichest.cn/vps/index.html","status":"sec","target":"_blank"}


十八：Mac风格代码高亮插件

插件地址：https://www.xcnte.com/archives/523/
Github：https://github.com/Xcnte/Code-Prettify-for-typecho
第 1 步：下载本插件，解压，放到 usr/plugins/目录中；
第 2 步：文件夹名改为 CodePrettify；
第 3 步：登录管理后台，激活插件
（请勿与其它同类插件同时启用，以免互相影响）
第 4 步：设置：选择主题风格，是否显示行号等。
第 5 步：修改（替换）/usr/themes/handsome/assets/css/下的handsome.min.css文件

  • 将 handsome.min.css文件里的 #post-content pre code内容替换为 
    #post-content pre code {
position: relative;
display: block;
overflow-x: auto;
margin: 4.4px 0.px .4px 1px;
padding: 0;
max-height: 500px;
padding-left: 3.5em
}
  • 在handsome.min.css文件里末尾添加 
    .page pre code {
position: relative;
display: block;
overflow-x: auto;
margin: 4.4px 0.px .4px 1px;
padding: 0;
max-height: 500px;
padding-left: 3.5em
}
.page .code-toolbar pre code {
position: relative;
display: block;
overflow-x: auto;
margin: 4.4px 0.px .4px 1px;
padding: 0;
max-height: 500px;
padding-left: 3.5em
}
.page pre {
padding: 0;
border-radius: 0;
overflow: hidden
}
  • 在handsome.min.css文件里删除 
    #post-content button
#post-content pre:before
code::-webkit-scrollbar-track-piece
code::-webkit-scrollbar
  • 添加Pjax回调函数

如果你的网站有开启Pjax（handsome主题默认开启）
请把以下代码添加到回调函数的地方，在你使用的主题设置里看看

if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
                for (var i = 0; i < pres.length; i++){
                    if (pres[i].getElementsByTagName('code').length > 0)
                        pres[i].className  = 'line-numbers';}
Prism.highlightAll(true,null);}

若插件里设置不显示行号，PJAX函数要改为

if (typeof Prism !== 'undefined') {
Prism.highlightAll(true,null);}


十九：内嵌页面

其实很简单，用来html的iframe标签

<iframe src="这里是内嵌的网页链接的地址" frameborder="0" width="100%" scrolling="yes" height="1000" leftmargin="0" topmargin="0">
</iframe>

使用方法
新建页面，名称随意，地址随意

然后内容填入上方代码，填入内嵌链接的地址，如果想在侧边栏中的页面分类中隐藏，只需在右边自定义模板下面的高级选项选择隐藏。


二十：邮件通知功能

插件地址：https://github.com/ylqjgm/LoveKKComment

二十一：文本框打字机特效

复制下方代码添加至后台主题设置 - 开发者设置 - 自定义输出body 尾部的HTML代码 即可

<script type="text/javascript" src="https://lioeo.cn/usr/commentTyping.js"></script>


二十二：评论区打卡

首先在 后台-->设置外观-->开发者设置-->自定义JavaScript加入以下代码:

function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    }
}

打开主题目录的 component/comments.php里面的 130行到 145行：

<div class="comment-form-comment form-group">
                        <label for="comment"><?php _me("评论") ?>
                            <span class="required text-danger">*</span></label>
                        <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
                        <div class="OwO padder-v-sm"></div>
                        <div class="secret_comment" id="secret_comment" data-toggle="tooltip"
                        data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">
                            <label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
                            <div class="secret_comment_check">
                                <label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
                                    <input type="checkbox" id="secret_comment_checkbox">
                                    <i></i>
                                </label>
                            </div>
                        </div>
                    </div>

替换为以下代码:

     <div class="comment-form-comment form-group">
                        <label for="comment"><?php _me("评论") ?> <span class="required text-danger">（请使用真实邮箱地址，方便接收评论回复）</span>
                            <span class="required text-danger">*</span></label>
                        <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
                        <div class="OwO padder-v-sm" style="display: inline;"></div><div class="OwO" style="display: inline;"><a href="javascript:addNumber('滴！访客卡！请上车的乘客系好安全带，现在是：')" class="OwO-logo"><i class="fontello fontello-user face"></i><span class="OwOlogotext">打卡</span></a></div>
                        <div class="secret_comment" id="secret_comment" data-toggle="tooltip"
                        data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">
                            <label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
                            <div class="secret_comment_check">
                                <label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
                                    <input type="checkbox" id="secret_comment_checkbox">
                                    <i></i>
                                </label>
                            </div>
                        </div>
                    </div>

在 后台-->设置外观-->开发者设置-->自定义CSS加入以下代码:

.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}


二十三：首页文章悬停放大

小图模式用
放大动画：transform: scale(1.05);
动画速度：transition: 0.6s;

 /*首页文章列表获取焦点放大*/
.panel,
.panel-small{
    cursor: pointer;
    transition: all 0.6s;
}

.blog-post .panel:not(article):hover{
    transform: scale(1.05);
}

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


二十四：UserAgent插件

原贴：https://doge.uk/coding/useragent-modify.html

操作前请做好相应备份工作
此插件只适用于Handsome主题，未对其它主题优化！！！
请先将插件置于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>

添加代码<?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>修改后代码如下：

<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>

获取真实IP
Typecho开启CDN后，可能无法获取访客真实IP，只能取得CDN节点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];
}

文件下载

蓝奏云 UserAgent-1.1.1：https://duibai.lanzoux.com/i3J6Ui61nud
蓝奏云 UserAgent-1.1.0：https://duibai.lanzoux.com/ix2DVi61oih


以上均博主百度找的并非本站原创持续更新

Last modification：November 7th, 2020 at 11:24 pm
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏