Typecho | handsome 美化修改记录

Version: handsome Theme 5.3 && Typecho Beta

为了方便维护,关于CSS和JS的美化修改将各自做成文件让博客主题调用,如果不使用文件,直接在handsome主题设置.开发者设置.自定义CSS和自定义Javascript中自行添加css和js代码即可

Typecho

开启全站https

  1. 后台.设置.基本.站点地址设置为https//:domain.com
  2. 在网站根目录修改config.inc.php文件,添加一行代码
    /** 开启HTTPS */
    define('__TYPECHO_SECURE__',true);
  3. http重定向到https

    宝塔开启强制https (Nginx80端口重定向到443端口)

伪静态设置

  1. 设置Nginx伪静态规则
    try_files $uri $uri/ /index.php?$args;
  2. 后台.设置.永久链接启用地址重写功能,并自定义文章路径

后台地址修改

将Typecho的默认后台路径是domain.com/admin/改为domain.com/xxxx/

  1. 在网站根目录下的config.inc.php文件里,找到
    /** 后台路径(相对路径) */
    define('__TYPECHO_ADMIN_DIR__', '/admin/');
  2. 将这个/admin/路径自定义为自己想要的路径
  3. 把网站根目录admin目录名字对应也改了

handsome

自定义CSS

header.php中的</head>之前找个合适的地方插入css文件

<link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/css文件.css>" type="text/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);
}

首页头像自动旋转 + RGB呼吸灯

/*首页头像自动旋转 + 呼吸灯*/
.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;
    }
}

文章标题居中

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}
.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}

首页文章版式圆角化

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

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

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

首页文章版式阴影化 + 盒子四周阴影化

/*首页文章版式阴影化*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

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

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

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

/*盒子四周阴影化*/
.app.container {
    box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}

滚动条设置

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-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;
}

广告圆角

/*广告圆角*/
#a_d_sidebar img {
    border-radius: 8px;
    margin-bottom: 15px;
}

打赏图标跳动

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

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

    to {
        transform: scale(1.1);
    }
}

右侧列表导航栏图标颜色

/*右侧列表导航栏图标颜色*/
.glyphicon-fire {
    color: #ff0000;
}

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

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

首页文章列表悬停上浮

/*首页文章列表悬停上浮*/
.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);
}

回到顶部按钮下移

/*回到顶部按钮下移*/
.topButton {
    top: 640px;
}

自定义Javascript

footer.php中的</body>之前找个合适的地方插入js文件

<script src="<?php echo STATIC_PATH ?>js/js文件.js>" type="text/javascript"></script>

网页标题焦点变化

/*网页标题焦点变化*/
var OriginTitile=document.title;
var titleTime;
document.addEventListener("visibilitychange",function(){
    if(document.hidden){
        OriginTitile=document.title;document.title="|・ω・`)你看不见我……你看不见我……你看不见我……";
        clearTimeout(titleTime)
    }
    else{
        document.title="_(:3」」还是被发现了";
        titleTime=setTimeout(function(){document.title=OriginTitile},2000)
    }
});

输入框烟花特效

/*输入框烟花特效*/
(function webpackUniversalModuleDefinition(a, b) {
    if (typeof exports === "object" && typeof module === "object") {
        module.exports = b()
    } else {
        if (typeof define === "function" && define.amd) {
            define([], b)
        } else {
            if (typeof exports === "object") {
                exports["POWERMODE"] = b()
            } else {
                a["POWERMODE"] = b()
            }
        }
    }
}
)(this, function() {
    return (function(a) {
        var b = {};
        function c(e) {
            if (b[e]) {
                return b[e].exports
            }
            var d = b[e] = {
                exports: {},
                id: e,
                loaded: false
            };
            a[e].call(d.exports, d, d.exports, c);
            d.loaded = true;
            return d.exports
        }
        c.m = a;
        c.c = b;
        c.p = "";
        return c(0)
    }
    )([function(c, g, b) {
        var d = document.createElement("canvas");
        d.width = window.innerWidth;
        d.height = window.innerHeight;
        d.style.cssText = "position:fixed;top:0;left:0;pointer-events:none;z-index:999999";
        window.addEventListener("resize", function() {
            d.width = window.innerWidth;
            d.height = window.innerHeight
        });
        document.body.appendChild(d);
        var a = d.getContext("2d");
        var n = [];
        var j = 0;
        var k = 120;
        var f = k;
        var p = false;
        o.shake = true;
        function l(r, q) {
            return Math.random() * (q - r) + r
        }
        function m(r) {
            if (o.colorful) {
                var q = l(0, 360);
                return "hsla(" + l(q - 10, q + 10) + ", 100%, " + l(50, 80) + "%, " + 1 + ")"
            } else {
                return window.getComputedStyle(r).color
            }
        }
        function e() {
            var t = document.activeElement;
            var v;
            if (t.tagName === "TEXTAREA" || (t.tagName === "INPUT" && t.getAttribute("type") === "text")) {
                var u = b(1)(t, t.selectionStart);
                v = t.getBoundingClientRect();
                return {
                    x: u.left + v.left,
                    y: u.top + v.top,
                    color: m(t)
                }
            }
            var s = window.getSelection();
            if (s.rangeCount) {
                var q = s.getRangeAt(0);
                var r = q.startContainer;
                if (r.nodeType === document.TEXT_NODE) {
                    r = r.parentNode
                }
                v = q.getBoundingClientRect();
                return {
                    x: v.left,
                    y: v.top,
                    color: m(r)
                }
            }
            return {
                x: 0,
                y: 0,
                color: "transparent"
            }
        }
        function h(q, s, r) {
            return {
                x: q,
                y: s,
                alpha: 1,
                color: r,
                velocity: {
                    x: -1 + Math.random() * 2,
                    y: -3.5 + Math.random() * 2
                }
            }
        }
        function o() {
            var t = e();
            var s = 5 + Math.round(Math.random() * 10);
            while (s--) {
                n[j] = h(t.x, t.y, t.color);
                j = (j + 1) % 500
            }
            f = k;
            if (!p) {
                requestAnimationFrame(i)
            }
            if (o.shake) {
                var r = 1 + 2 * Math.random();
                var q = r * (Math.random() > 0.5 ? -1 : 1);
                var u = r * (Math.random() > 0.5 ? -1 : 1);
                document.body.style.marginLeft = q + "px";
                document.body.style.marginTop = u + "px";
                setTimeout(function() {
                    document.body.style.marginLeft = "";
                    document.body.style.marginTop = ""
                }, 75)
            }
        }
        o.colorful = false;
        function i() {
            if (f > 0) {
                requestAnimationFrame(i);
                f--;
                p = true
            } else {
                p = false
            }
            a.clearRect(0, 0, d.width, d.height);
            for (var q = 0; q < n.length; ++q) {
                var r = n[q];
                if (r.alpha <= 0.1) {
                    continue
                }
                r.velocity.y += 0.075;
                r.x += r.velocity.x;
                r.y += r.velocity.y;
                r.alpha *= 0.96;
                a.globalAlpha = r.alpha;
                a.fillStyle = r.color;
                a.fillRect(Math.round(r.x - 1.5), Math.round(r.y - 1.5), 3, 3)
            }
        }
        requestAnimationFrame(i);
        c.exports = o
    }
    , function(b, a) {
        (function() {
            var d = ["direction", "boxSizing", "width", "height", "overflowX", "overflowY", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderStyle", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "fontStyle", "fontVariant", "fontWeight", "fontStretch", "fontSize", "fontSizeAdjust", "lineHeight", "fontFamily", "textAlign", "textTransform", "textIndent", "textDecoration", "letterSpacing", "wordSpacing", "tabSize", "MozTabSize"];
            var e = window.mozInnerScreenX != null;
            function c(k, l, o) {
                var h = o && o.debug || false;
                if (h) {
                    var i = document.querySelector("#input-textarea-caret-position-mirror-div");
                    if (i) {
                        i.parentNode.removeChild(i)
                    }
                }
                var f = document.createElement("div");
                f.id = "input-textarea-caret-position-mirror-div";
                document.body.appendChild(f);
                var g = f.style;
                var j = window.getComputedStyle ? getComputedStyle(k) : k.currentStyle;
                g.whiteSpace = "pre-wrap";
                if (k.nodeName !== "INPUT") {
                    g.wordWrap = "break-word"
                }
                g.position = "absolute";
                if (!h) {
                    g.visibility = "hidden"
                }
                d.forEach(function(p) {
                    g[p] = j[p]
                });
                if (e) {
                    if (k.scrollHeight > parseInt(j.height)) {
                        g.overflowY = "scroll"
                    }
                } else {
                    g.overflow = "hidden"
                }
                f.textContent = k.value.substring(0, l);
                if (k.nodeName === "INPUT") {
                    f.textContent = f.textContent.replace(/\s/g, "\u00a0")
                }
                var n = document.createElement("span");
                n.textContent = k.value.substring(l) || ".";
                f.appendChild(n);
                var m = {
                    top: n.offsetTop + parseInt(j["borderTopWidth"]),
                    left: n.offsetLeft + parseInt(j["borderLeftWidth"])
                };
                if (h) {
                    n.style.backgroundColor = "#aaa"
                } else {
                    document.body.removeChild(f)
                }
                return m
            }
            if (typeof b != "undefined" && typeof b.exports != "undefined") {
                b.exports = c
            } else {
                window.getCaretCoordinates = c
            }
        }())
    }
    ])
});
POWERMODE.colorful = true;
POWERMODE.shake = false;
document.body.addEventListener("input", POWERMODE);

鼠标点击爱心效果

/*鼠标点击爱心效果*/
!function(e, t, a) {
    function n() {
        c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
        o(),
        r()
    }
    function r() {
        for (var e = 0; e < d.length; e++)
            d[e].alpha <= 0 ? (t.body.removeChild(d[e].el),
            d.splice(e, 1)) : (d[e].y--,
            d[e].scale += .004,
            d[e].alpha -= .013,
            d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
        requestAnimationFrame(r)
    }
    function o() {
        var t = "function" == typeof e.onclick && e.onclick;
        e.onclick = function(e) {
            t && t(),
            i(e)
        }
    }
    function i(e) {
        var a = t.createElement("div");
        a.className = "heart",
        d.push({
            el: a,
            x: e.clientX - 5,
            y: e.clientY - 5,
            scale: 1,
            alpha: 1,
            color: s()
        }),
        t.body.appendChild(a)
    }
    function c(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
            a.appendChild(t.createTextNode(e))
        } catch (t) {
            a.styleSheet.cssText = e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }
    function s() {
        return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
    }
    var d = [];
    e.requestAnimationFrame = function() {
        return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function(e) {
            setTimeout(e, 1e3 / 60)
        }
    }(),
    n()
}(window, document);

其他

评论区一键打卡

  1. 自定义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
     }
    }
  2. 修改主题文件handsome/component/comments.phpline126line141的代码
    <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"></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" 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>
  3. 自定义CSS代码
    .secret_comment {
     top: 5px;
    }
    .OwO.OwO-open .OwO-body {
     display:table
    }

彩色标签云功能

  1. 自定义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;
    });
  2. 在handsome主题设置.Pjax.Pjax回调函数里添加以上同样的代码

文章复制弹窗提醒

  1. 下载layer绿色压缩包
  2. 解压提取里面的layer文件夹,上传到handsome主题目录下的assets/js文件夹中
  3. 修改主题文件component/header.php,加入以下代码
    <script src="<?php echo STATIC_PATH; ?>js/layer/layer.js"></script>
  4. 自定义Javascript代码
    /*文章复制弹窗提醒*/
    document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留原文链接!', function(){
    });};

CodePrettify Mac风格代码高亮

Author:Xcnet

  1. CodePrettify插件上传到plugins目录
  2. 激活插件
  3. 设置主题风格
  4. 添加以下代码到handsome设置.Pjax.PJAX回调函数中
    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);}
  5. 替换主题文件handsome/assets/css/handsome.min.css

UserAgent

Author:松鼠大大

  1. UserAgent插件上传到plugins目录
  2. 修改主题文件handsome/component/comments.php,找到line60-line80中的目标代码
    <span class="comment-author vcard">
     <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?>
    </span>
  3. 添加以下代码到目标代码中
    <?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>

    4.在网站根目录修改config.inc.php文件,添加以下代码

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

评论框增加表情

Todo

Last modification:October 16th, 2019 at 09:49 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment