handsome美化魔改

博主： Qicloud
发布时间：2019 年 11 月 21 日
4054次浏览
21 条评论
35095字数
分类：默认

前言

Handsome主题

在复杂中，保持简洁。一款精心打磨后的typecho主题

介绍

博主使用Handsome主题已有一年多了，这款主题论售后还是更新都很好，而且也主题本身也不贵。
如果你是小白或者第一次使用这个模板，那一定要仔细看好了作者写的使用文档
本文博主整理了几种美化样式，希望有喜欢的~

美化

为了减少对源码的修改，本次美化大多数可以直接在后台开发者设置-自定义css中添加代码即可。

1. 头像呼吸光环和鼠标悬停旋转放大

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

2. 左侧文章图标和评论头像鼠标悬停旋转

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

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

3. 文章内打赏图标跳动

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

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

4. 彩色标签云

js为标签随机添加上预先定义的颜色，每次刷新都会进行换色：

    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回调函数中

5. 首页文章列表悬停上浮

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

6. 首页文章列表头图悬停放大并将超出范围隐藏

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

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

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

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

    .entry-thumbnail {
        overflow: hidden;
    }

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

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

8. 右侧列表导航栏图标颜色

    .glyphicon-fire {
        color: #ff0000;
    }

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

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

9. 点击空白区域隐藏歌曲列表

主题中原来是必须重新点击耳机图标才能将歌曲列表隐藏，感觉有点累，而且此时再点击闲言碎语会将两个元素重叠。设置之后可以点击空白区域将歌曲列表隐藏，由于本文主旨是尽量不修改源码，所以实现的方式较为繁琐。先添加css：

    .musicPlayerHiden {
        display: none;
    }

然后添加js代码：

    document.body.onclick = function () {
        document.querySelector(".skPlayer-list").classList.add("musicPlayerHiden");
    }

    document.querySelector(".skPlayer-list-switch").onclick = function (e) {
        document.querySelector(".skPlayer-list").classList.remove("musicPlayerHiden");
        document.querySelector(".skPlayer-list").onclick = function (e) {
            if (e && e.stopPropagation) {
                e.stopPropagation();
            } else {
                window.event.cancalBubble = true;
            }
        }

        if (e && e.stopPropagation) {
            e.stopPropagation();
        } else {
            window.event.cancalBubble = true;
        }
    }

10.文章标题居中

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

目前小站就改了这些，如果后面再修改再添加感谢西瓜博客提供了大部分代码

复制弹窗效果

为博客添加复制弹窗提示

引入layer资源文件，代码如下 <script src="//lib.baomitu.co...

关于我页面时间轴记录

Typecho 博客文章/页面内加入时间轴记录

类似上图所示的效果，这里以本博客使用的 Typecho 主题 handsome 为例，将下面的 CSS 代码添加到...

js动态标题

js动态标题代码

把下面代码放到网站头部或底部就可以啦，嘻嘻简单吧 <script>var OriginTitil...

春节倒计时

handsome今天更新到6.0逛博友博客的时候看到春节倒计时他竟然没贴代码妥妥看上了就扒走ctrl+u走起废话不...

首页左侧博主介绍

将以下代码添加至后台-外观-初级设置-博主的介绍。这段代码可添加至网站任意位置

    <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">&nbsp;<?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>
    &nbsp;|&nbsp; <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>
    &nbsp;|&nbsp; <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;
    }

文章页面添加百度收录查询

在主题 functions.php 文件最下方新增

    /**
    * 提示文章百度是否收录
    *
    */
    function baidu_record() {
    $url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
    
    if(checkBaidu($url)==1)
    {echo "百度已收录";
    }
    else
    {echo "<a style=\"color:red;\" rel=\"external nofollow\" title=\"点击提交收录！\" target=\"_blank\" 
    href=\"http://zhanzhang.baidu.com/sitesubmit/index?sitename=$url\">百度未收录</a>";}
    }
    function checkBaidu($url) {
    $url = 'http://www.baidu.com/s?wd=' . urlencode($url);
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    $rs = curl_exec($curl);
    curl_close($curl);
    if (!strpos($rs, '没有找到')) { //没有找到说明已被百度收录
    return 1;
    } else {
    return -1;
    }
    }

第二步：在主题 post.php 文件想显示的地方增加

    <!--百度收录-->
    <li class="meta-categories"><i class="glyphicon glyphicon-ok-circle" aria-hidden="true"></i> 
    <span class="sr-only"><?php _me("百度收录") ?>：</span> <span class="meta-value"><?php echo 
    baidu_record() ?></span></li>

首页添加翻转动画

引入js（命名为wow.js）（可在模板设置添加（自定义输出head））

    <script src="目录/wow.js"></script>

有点长

    (function() {
      var MutationObserver, Util, WeakMap, getComputedStyle, getComputedStyleRX,
        bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
        indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
    
      Util = (function() {
        function Util() {}
    
        Util.prototype.extend = function(custom, defaults) {
          var key, value;
          for (key in defaults) {
            value = defaults[key];
            if (custom[key] == null) {
              custom[key] = value;
            }
          }
          return custom;
        };
    
        Util.prototype.isMobile = function(agent) {
          return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent);
        };
    
        Util.prototype.createEvent = function(event, bubble, cancel, detail) {
          var customEvent;
          if (bubble == null) {
            bubble = false;
          }
          if (cancel == null) {
            cancel = false;
          }
          if (detail == null) {
            detail = null;
          }
          if (document.createEvent != null) {
            customEvent = document.createEvent('CustomEvent');
            customEvent.initCustomEvent(event, bubble, cancel, detail);
          } else if (document.createEventObject != null) {
            customEvent = document.createEventObject();
            customEvent.eventType = event;
          } else {
            customEvent.eventName = event;
          }
          return customEvent;
        };
    
        Util.prototype.emitEvent = function(elem, event) {
          if (elem.dispatchEvent != null) {
            return elem.dispatchEvent(event);
          } else if (event in (elem != null)) {
            return elem[event]();
          } else if (("on" + event) in (elem != null)) {
            return elem["on" + event]();
          }
        };
    
        Util.prototype.addEvent = function(elem, event, fn) {
          if (elem.addEventListener != null) {
            return elem.addEventListener(event, fn, false);
          } else if (elem.attachEvent != null) {
            return elem.attachEvent("on" + event, fn);
          } else {
            return elem[event] = fn;
          }
        };
    
        Util.prototype.removeEvent = function(elem, event, fn) {
          if (elem.removeEventListener != null) {
            return elem.removeEventListener(event, fn, false);
          } else if (elem.detachEvent != null) {
            return elem.detachEvent("on" + event, fn);
          } else {
            return delete elem[event];
          }
        };
    
        Util.prototype.innerHeight = function() {
          if ('innerHeight' in window) {
            return window.innerHeight;
          } else {
            return document.documentElement.clientHeight;
          }
        };
    
        return Util;
    
      })();
    
      WeakMap = this.WeakMap || this.MozWeakMap || (WeakMap = (function() {
        function WeakMap() {
          this.keys = [];
          this.values = [];
        }
    
        WeakMap.prototype.get = function(key) {
          var i, item, j, len, ref;
          ref = this.keys;
          for (i = j = 0, len = ref.length; j < len; i = ++j) {
            item = ref[i];
            if (item === key) {
              return this.values[i];
            }
          }
        };
    
        WeakMap.prototype.set = function(key, value) {
          var i, item, j, len, ref;
          ref = this.keys;
          for (i = j = 0, len = ref.length; j < len; i = ++j) {
            item = ref[i];
            if (item === key) {
              this.values[i] = value;
              return;
            }
          }
          this.keys.push(key);
          return this.values.push(value);
        };
    
        return WeakMap;
    
      })());
    
      MutationObserver = this.MutationObserver || this.WebkitMutationObserver || this.MozMutationObserver || (MutationObserver = (function() {
        function MutationObserver() {
          if (typeof console !== "undefined" && console !== null) {
            console.warn('MutationObserver is not supported by your browser.');
          }
          if (typeof console !== "undefined" && console !== null) {
            console.warn('WOW.js cannot detect dom mutations, please call .sync() after loading new content.');
          }
        }
    
        MutationObserver.notSupported = true;
    
        MutationObserver.prototype.observe = function() {};
    
        return MutationObserver;
    
      })());
    
      getComputedStyle = this.getComputedStyle || function(el, pseudo) {
        this.getPropertyValue = function(prop) {
          var ref;
          if (prop === 'float') {
            prop = 'styleFloat';
          }
          if (getComputedStyleRX.test(prop)) {
            prop.replace(getComputedStyleRX, function(_, _char) {
              return _char.toUpperCase();
            });
          }
          return ((ref = el.currentStyle) != null ? ref[prop] : void 0) || null;
        };
        return this;
      };
    
      getComputedStyleRX = /(\-([a-z]){1})/g;
    
      this.WOW = (function() {
        WOW.prototype.defaults = {
          boxClass: 'wow',
          animateClass: 'animated',
          offset: 0,
          mobile: true,
          live: true,
          callback: null
        };
    
        function WOW(options) {
          if (options == null) {
            options = {};
          }
          this.scrollCallback = bind(this.scrollCallback, this);
          this.scrollHandler = bind(this.scrollHandler, this);
          this.resetAnimation = bind(this.resetAnimation, this);
          this.start = bind(this.start, this);
          this.scrolled = true;
          this.config = this.util().extend(options, this.defaults);
          this.animationNameCache = new WeakMap();
          this.wowEvent = this.util().createEvent(this.config.boxClass);
        }
    
        WOW.prototype.init = function() {
          var ref;
          this.element = window.document.documentElement;
          if ((ref = document.readyState) === "interactive" || ref === "complete") {
            this.start();
          } else {
            this.util().addEvent(document, 'DOMContentLoaded', this.start);
          }
          return this.finished = [];
        };
    
        WOW.prototype.start = function() {
          var box, j, len, ref;
          this.stopped = false;
          this.boxes = (function() {
            var j, len, ref, results;
            ref = this.element.querySelectorAll("." + this.config.boxClass);
            results = [];
            for (j = 0, len = ref.length; j < len; j++) {
              box = ref[j];
              results.push(box);
            }
            return results;
          }).call(this);
          this.all = (function() {
            var j, len, ref, results;
            ref = this.boxes;
            results = [];
            for (j = 0, len = ref.length; j < len; j++) {
              box = ref[j];
              results.push(box);
            }
            return results;
          }).call(this);
          if (this.boxes.length) {
            if (this.disabled()) {
              this.resetStyle();
            } else {
              ref = this.boxes;
              for (j = 0, len = ref.length; j < len; j++) {
                box = ref[j];
                this.applyStyle(box, true);
              }
            }
          }
          if (!this.disabled()) {
            this.util().addEvent(window, 'scroll', this.scrollHandler);
            this.util().addEvent(window, 'resize', this.scrollHandler);
            this.interval = setInterval(this.scrollCallback, 50);
          }
          if (this.config.live) {
            return new MutationObserver((function(_this) {
              return function(records) {
                var k, len1, node, record, results;
                results = [];
                for (k = 0, len1 = records.length; k < len1; k++) {
                  record = records[k];
                  results.push((function() {
                    var l, len2, ref1, results1;
                    ref1 = record.addedNodes || [];
                    results1 = [];
                    for (l = 0, len2 = ref1.length; l < len2; l++) {
                      node = ref1[l];
                      results1.push(this.doSync(node));
                    }
                    return results1;
                  }).call(_this));
                }
                return results;
              };
            })(this)).observe(document.body, {
              childList: true,
              subtree: true
            });
          }
        };
    
        WOW.prototype.stop = function() {
          this.stopped = true;
          this.util().removeEvent(window, 'scroll', this.scrollHandler);
          this.util().removeEvent(window, 'resize', this.scrollHandler);
          if (this.interval != null) {
            return clearInterval(this.interval);
          }
        };
    
        WOW.prototype.sync = function(element) {
          if (MutationObserver.notSupported) {
            return this.doSync(this.element);
          }
        };
    
        WOW.prototype.doSync = function(element) {
          var box, j, len, ref, results;
          if (element == null) {
            element = this.element;
          }
          if (element.nodeType !== 1) {
            return;
          }
          element = element.parentNode || element;
          ref = element.querySelectorAll("." + this.config.boxClass);
          results = [];
          for (j = 0, len = ref.length; j < len; j++) {
            box = ref[j];
            if (indexOf.call(this.all, box) < 0) {
              this.boxes.push(box);
              this.all.push(box);
              if (this.stopped || this.disabled()) {
                this.resetStyle();
              } else {
                this.applyStyle(box, true);
              }
              results.push(this.scrolled = true);
            } else {
              results.push(void 0);
            }
          }
          return results;
        };
    
        WOW.prototype.show = function(box) {
          this.applyStyle(box);
          box.className = box.className + " " + this.config.animateClass;
          if (this.config.callback != null) {
            this.config.callback(box);
          }
          this.util().emitEvent(box, this.wowEvent);
          this.util().addEvent(box, 'animationend', this.resetAnimation);
          this.util().addEvent(box, 'oanimationend', this.resetAnimation);
          this.util().addEvent(box, 'webkitAnimationEnd', this.resetAnimation);
          this.util().addEvent(box, 'MSAnimationEnd', this.resetAnimation);
          return box;
        };
    
        WOW.prototype.applyStyle = function(box, hidden) {
          var delay, duration, iteration;
          duration = box.getAttribute('data-wow-duration');
          delay = box.getAttribute('data-wow-delay');
          iteration = box.getAttribute('data-wow-iteration');
          return this.animate((function(_this) {
            return function() {
              return _this.customStyle(box, hidden, duration, delay, iteration);
            };
          })(this));
        };
    
        WOW.prototype.animate = (function() {
          if ('requestAnimationFrame' in window) {
            return function(callback) {
              return window.requestAnimationFrame(callback);
            };
          } else {
            return function(callback) {
              return callback();
            };
          }
        })();
    
        WOW.prototype.resetStyle = function() {
          var box, j, len, ref, results;
          ref = this.boxes;
          results = [];
          for (j = 0, len = ref.length; j < len; j++) {
            box = ref[j];
            results.push(box.style.visibility = 'visible');
          }
          return results;
        };
    
        WOW.prototype.resetAnimation = function(event) {
          var target;
          if (event.type.toLowerCase().indexOf('animationend') >= 0) {
            target = event.target || event.srcElement;
            return target.className = target.className.replace(this.config.animateClass, '').trim();
          }
        };
    
        WOW.prototype.customStyle = function(box, hidden, duration, delay, iteration) {
          if (hidden) {
            this.cacheAnimationName(box);
          }
          box.style.visibility = hidden ? 'hidden' : 'visible';
          if (duration) {
            this.vendorSet(box.style, {
              animationDuration: duration
            });
          }
          if (delay) {
            this.vendorSet(box.style, {
              animationDelay: delay
            });
          }
          if (iteration) {
            this.vendorSet(box.style, {
              animationIterationCount: iteration
            });
          }
          this.vendorSet(box.style, {
            animationName: hidden ? 'none' : this.cachedAnimationName(box)
          });
          return box;
        };
    
        WOW.prototype.vendors = ["moz", "webkit"];
    
        WOW.prototype.vendorSet = function(elem, properties) {
          var name, results, value, vendor;
          results = [];
          for (name in properties) {
            value = properties[name];
            elem["" + name] = value;
            results.push((function() {
              var j, len, ref, results1;
              ref = this.vendors;
              results1 = [];
              for (j = 0, len = ref.length; j < len; j++) {
                vendor = ref[j];
                results1.push(elem["" + vendor + (name.charAt(0).toUpperCase()) + (name.substr(1))] = value);
              }
              return results1;
            }).call(this));
          }
          return results;
        };
    
        WOW.prototype.vendorCSS = function(elem, property) {
          var j, len, ref, result, style, vendor;
          style = getComputedStyle(elem);
          result = style.getPropertyCSSValue(property);
          ref = this.vendors;
          for (j = 0, len = ref.length; j < len; j++) {
            vendor = ref[j];
            result = result || style.getPropertyCSSValue("-" + vendor + "-" + property);
          }
          return result;
        };
    
        WOW.prototype.animationName = function(box) {
          var animationName;
          try {
            animationName = this.vendorCSS(box, 'animation-name').cssText;
          } catch (_error) {
            animationName = getComputedStyle(box).getPropertyValue('animation-name');
          }
          if (animationName === 'none') {
            return '';
          } else {
            return animationName;
          }
        };
    
        WOW.prototype.cacheAnimationName = function(box) {
          return this.animationNameCache.set(box, this.animationName(box));
        };
    
        WOW.prototype.cachedAnimationName = function(box) {
          return this.animationNameCache.get(box);
        };
    
        WOW.prototype.scrollHandler = function() {
          return this.scrolled = true;
        };
    
        WOW.prototype.scrollCallback = function() {
          var box;
          if (this.scrolled) {
            this.scrolled = false;
            this.boxes = (function() {
              var j, len, ref, results;
              ref = this.boxes;
              results = [];
              for (j = 0, len = ref.length; j < len; j++) {
                box = ref[j];
                if (!(box)) {
                  continue;
                }
                if (this.isVisible(box)) {
                  this.show(box);
                  continue;
                }
                results.push(box);
              }
              return results;
            }).call(this);
            if (!(this.boxes.length || this.config.live)) {
              return this.stop();
            }
          }
        };
    
        WOW.prototype.offsetTop = function(element) {
          var top;
          while (element.offsetTop === void 0) {
            element = element.parentNode;
          }
          top = element.offsetTop;
          while (element = element.offsetParent) {
            top += element.offsetTop;
          }
          return top;
        };
    
        WOW.prototype.isVisible = function(box) {
          var bottom, offset, top, viewBottom, viewTop;
          offset = box.getAttribute('data-wow-offset') || this.config.offset;
          viewTop = window.pageYOffset;
          viewBottom = viewTop + Math.min(this.element.clientHeight, this.util().innerHeight()) - offset;
          top = this.offsetTop(box);
          bottom = top + box.clientHeight;
          return top <= viewBottom && bottom >= viewTop;
        };
    
        WOW.prototype.util = function() {
          return this._util != null ? this._util : this._util = new Util();
        };
    
        WOW.prototype.disabled = function() {
          return !this.config.mobile && this.util().isMobile(navigator.userAgent);
        };
    
        return WOW;
    
      })();
    
    }).call(this);

在footer.php（主题/component/footer.php）（前添加）

    <script>
    wow = new WOW({
    animateClass: 'animated',
    });
    wow.init();
    </script>

在Content.php（主题/libs/Content.php）改

第1077

    $html .= '<div class="panel wow animated flipInX">';

第1083

    <div class="panel  wow animated flipInX"><div class="index-post-img"><a href="{$parameterArray['linkUrl']}"><img {$imageHtml}

盒子模式改进

    /*盒子改进*/
    @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,.35)}.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,.3)}.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,.2)}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,.2)}.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,.3);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,.2.5)}.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,.35);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}

修复透明模式下目录树BUG

    /* 开发者设置——自定义css里面添加这个即可*/
    #toc {
    background: rgba(255, 255, 255, 0.3);
    }

博主前端不精，美化代码全部来源于网络！如有侵权，请联系站长删除

最后修改：2020 年 11 月 07 日 05 : 55 PM

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

21 条评论

yuuxeun
10 个月前

请问您博客评论界面上的每个人的那个浏览器系统IP那个怎么弄呀感觉好炫酷

回复
1. Qicloud
  10 个月前
  
  @yuuxeun
  插件，之前文章有发
  
  回复
  1. yuuxeun
    10 个月前
    
    @Qicloud
    我刚刚翻了一下默认和教程里面的没找到，，
    
    回复
Derek村长
10 个月前

1.头像呼吸貌似在handsome6.0里面对头图也会起作用

回复
小懒
10 个月前

我想知道页面上像你一样右侧有一个自定义样式的按钮怎么搞出来的

回复
1. Qicloud
  10 个月前
  
  @小懒
  handsome自带的
  
  回复
zrh
11 个月前

大佬，我想问一下，像你现在这篇文章标题handsome美化魔改，是怎么弄成居中的呀？

回复
1. Qicloud
  11 个月前
  
  @zrh
  https://blog.qqiyu.cn/397.html#10.%E6%96%87%E7%AB%A0%E6%A0%87%E9%A2%98%E5%B1%85%E4%B8%AD
  
  回复
  1. zrh
    11 个月前
    
    @Qicloud
    懂了懂了，我看了下你的源代码，原来我说的那个文章标题，是盒子模式改进那串代码实现的OωO
    
    回复
  2. zrh
    11 个月前
    
    @Qicloud
    这个我看了，这个应该是指文章内标题吧，而且还只能二号标题居中，不是指这篇文章的标题吧 ::quyin:look::
    
    回复
小忆
2020 年 03 月 01 日

怎么像你这样弄个背景随机图片的

回复
1. Qicloud
  2020 年 03 月 01 日
  
  @小忆
  https://v1.qqiyu.cn
  
  回复
  1. 小忆
    2020 年 03 月 01 日
    
    @Qicloud
    api有，是handsome后台改还是需要改文件啊
    
    回复
    
    Qicloud
    2020 年 03 月 01 日
    
    @小忆
    外观设置
    
    回复
    
    小忆
    2020 年 03 月 01 日
    
    @Qicloud
    
    回复
    
    小忆
    2020 年 03 月 01 日
    
    @Qicloud
    
    回复
Yi Han
2020 年 01 月 26 日

看看

回复
XYumi
2020 年 01 月 18 日

看看大佬

回复
漠子荀
2020 年 01 月 17 日

萌新来看看大佬的教程

回复
筱依痕
2019 年 12 月 09 日

拿走了，hh

回复
1. Qicloud
  2019 年 12 月 09 日
  
  @筱依痕
  拿走了就拿走吧，反正你还得回来哈哈哈
  
  回复

发表评论取消回复

评论 *

私密评论

名称 *

邮箱 *

地址

此内容被密码保护
浏览次数: 38704
v2ray搭建教程
浏览次数: 12472
关于本站
浏览次数: 7454
互赞宝【骗子程序】
浏览次数: 6075
typecho版权小尾巴插件
浏览次数: 5639

北京艺术培训
赞一个
故梦
小心给警告哦
拾一
捻一片深冬的雪，斟一杯春天的酒，加一滴快乐的水，添一勺幸运的花...
神奇
还活着呢，搞备案，二级域名似乎也要关的唉
e.Ki
网站名称: e.Ki 博客网站地址:https://e.ki/...

162 文章数目
710 评论数目
2年173天运行天数
1 星期前最后活动

handsome美化魔改

Qicloud • 2019 年 11 月 21 日

前言

Handsome主题

在复杂中，保持简洁。一款精心打磨后的typecho主题

介绍

美化

为了减少对源码的修改，本次美化大多数可以直接在后台开发者设置-自定义css中添加代码即可。

1. 头像呼吸光环和鼠标悬停旋转放大

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

2. 左侧文章图标和评论头像鼠标悬停旋转

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

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

3. 文章内打赏图标跳动

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

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

4. 彩色标签云

js为标签随机添加上预先定义的颜色，每次刷新都会进行换色：

    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回调函数中

5. 首页文章列表悬停上浮

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

6. 首页文章列表头图悬停放大并将超出范围隐藏

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

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

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

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

    .entry-thumbnail {
        overflow: hidden;
    }

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

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

8. 右侧列表导航栏图标颜色

    .glyphicon-fire {
        color: #ff0000;
    }

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

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

9. 点击空白区域隐藏歌曲列表

    .musicPlayerHiden {
        display: none;
    }

然后添加js代码：

    document.body.onclick = function () {
        document.querySelector(".skPlayer-list").classList.add("musicPlayerHiden");
    }

    document.querySelector(".skPlayer-list-switch").onclick = function (e) {
        document.querySelector(".skPlayer-list").classList.remove("musicPlayerHiden");
        document.querySelector(".skPlayer-list").onclick = function (e) {
            if (e && e.stopPropagation) {
                e.stopPropagation();
            } else {
                window.event.cancalBubble = true;
            }
        }

        if (e && e.stopPropagation) {
            e.stopPropagation();
        } else {
            window.event.cancalBubble = true;
        }
    }

10.文章标题居中

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

目前小站就改了这些，如果后面再修改再添加感谢西瓜博客提供了大部分代码

复制弹窗效果

为博客添加复制弹窗提示

引入layer资源文件，代码如下 <script src="//lib.baomitu.co...

关于我页面时间轴记录

Typecho 博客文章/页面内加入时间轴记录

类似上图所示的效果，这里以本博客使用的 Typecho 主题 handsome 为例，将下面的 CSS 代码添加到...

js动态标题

js动态标题代码

把下面代码放到网站头部或底部就可以啦，嘻嘻简单吧 <script>var OriginTitil...

春节倒计时

handsome今天更新到6.0逛博友博客的时候看到春节倒计时他竟然没贴代码妥妥看上了就扒走ctrl+u走起废话不...

首页左侧博主介绍

将以下代码添加至后台-外观-初级设置-博主的介绍。这段代码可添加至网站任意位置

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

底部版权

    <?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">&nbsp;<?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>
    &nbsp;|&nbsp; <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>
    &nbsp;|&nbsp; <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;
    }

文章页面添加百度收录查询

在主题 functions.php 文件最下方新增

    /**
    * 提示文章百度是否收录
    *
    */
    function baidu_record() {
    $url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
    
    if(checkBaidu($url)==1)
    {echo "百度已收录";
    }
    else
    {echo "<a style=\"color:red;\" rel=\"external nofollow\" title=\"点击提交收录！\" target=\"_blank\" 
    href=\"http://zhanzhang.baidu.com/sitesubmit/index?sitename=$url\">百度未收录</a>";}
    }
    function checkBaidu($url) {
    $url = 'http://www.baidu.com/s?wd=' . urlencode($url);
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    $rs = curl_exec($curl);
    curl_close($curl);
    if (!strpos($rs, '没有找到')) { //没有找到说明已被百度收录
    return 1;
    } else {
    return -1;
    }
    }

第二步：在主题 post.php 文件想显示的地方增加

    <!--百度收录-->
    <li class="meta-categories"><i class="glyphicon glyphicon-ok-circle" aria-hidden="true"></i> 
    <span class="sr-only"><?php _me("百度收录") ?>：</span> <span class="meta-value"><?php echo 
    baidu_record() ?></span></li>

首页添加翻转动画

引入js（命名为wow.js）（可在模板设置添加（自定义输出head））

    <script src="目录/wow.js"></script>

有点长

    (function() {
      var MutationObserver, Util, WeakMap, getComputedStyle, getComputedStyleRX,
        bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
        indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
    
      Util = (function() {
        function Util() {}
    
        Util.prototype.extend = function(custom, defaults) {
          var key, value;
          for (key in defaults) {
            value = defaults[key];
            if (custom[key] == null) {
              custom[key] = value;
            }
          }
          return custom;
        };
    
        Util.prototype.isMobile = function(agent) {
          return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent);
        };
    
        Util.prototype.createEvent = function(event, bubble, cancel, detail) {
          var customEvent;
          if (bubble == null) {
            bubble = false;
          }
          if (cancel == null) {
            cancel = false;
          }
          if (detail == null) {
            detail = null;
          }
          if (document.createEvent != null) {
            customEvent = document.createEvent('CustomEvent');
            customEvent.initCustomEvent(event, bubble, cancel, detail);
          } else if (document.createEventObject != null) {
            customEvent = document.createEventObject();
            customEvent.eventType = event;
          } else {
            customEvent.eventName = event;
          }
          return customEvent;
        };
    
        Util.prototype.emitEvent = function(elem, event) {
          if (elem.dispatchEvent != null) {
            return elem.dispatchEvent(event);
          } else if (event in (elem != null)) {
            return elem[event]();
          } else if (("on" + event) in (elem != null)) {
            return elem["on" + event]();
          }
        };
    
        Util.prototype.addEvent = function(elem, event, fn) {
          if (elem.addEventListener != null) {
            return elem.addEventListener(event, fn, false);
          } else if (elem.attachEvent != null) {
            return elem.attachEvent("on" + event, fn);
          } else {
            return elem[event] = fn;
          }
        };
    
        Util.prototype.removeEvent = function(elem, event, fn) {
          if (elem.removeEventListener != null) {
            return elem.removeEventListener(event, fn, false);
          } else if (elem.detachEvent != null) {
            return elem.detachEvent("on" + event, fn);
          } else {
            return delete elem[event];
          }
        };
    
        Util.prototype.innerHeight = function() {
          if ('innerHeight' in window) {
            return window.innerHeight;
          } else {
            return document.documentElement.clientHeight;
          }
        };
    
        return Util;
    
      })();
    
      WeakMap = this.WeakMap || this.MozWeakMap || (WeakMap = (function() {
        function WeakMap() {
          this.keys = [];
          this.values = [];
        }
    
        WeakMap.prototype.get = function(key) {
          var i, item, j, len, ref;
          ref = this.keys;
          for (i = j = 0, len = ref.length; j < len; i = ++j) {
            item = ref[i];
            if (item === key) {
              return this.values[i];
            }
          }
        };
    
        WeakMap.prototype.set = function(key, value) {
          var i, item, j, len, ref;
          ref = this.keys;
          for (i = j = 0, len = ref.length; j < len; i = ++j) {
            item = ref[i];
            if (item === key) {
              this.values[i] = value;
              return;
            }
          }
          this.keys.push(key);
          return this.values.push(value);
        };
    
        return WeakMap;
    
      })());
    
      MutationObserver = this.MutationObserver || this.WebkitMutationObserver || this.MozMutationObserver || (MutationObserver = (function() {
        function MutationObserver() {
          if (typeof console !== "undefined" && console !== null) {
            console.warn('MutationObserver is not supported by your browser.');
          }
          if (typeof console !== "undefined" && console !== null) {
            console.warn('WOW.js cannot detect dom mutations, please call .sync() after loading new content.');
          }
        }
    
        MutationObserver.notSupported = true;
    
        MutationObserver.prototype.observe = function() {};
    
        return MutationObserver;
    
      })());
    
      getComputedStyle = this.getComputedStyle || function(el, pseudo) {
        this.getPropertyValue = function(prop) {
          var ref;
          if (prop === 'float') {
            prop = 'styleFloat';
          }
          if (getComputedStyleRX.test(prop)) {
            prop.replace(getComputedStyleRX, function(_, _char) {
              return _char.toUpperCase();
            });
          }
          return ((ref = el.currentStyle) != null ? ref[prop] : void 0) || null;
        };
        return this;
      };
    
      getComputedStyleRX = /(\-([a-z]){1})/g;
    
      this.WOW = (function() {
        WOW.prototype.defaults = {
          boxClass: 'wow',
          animateClass: 'animated',
          offset: 0,
          mobile: true,
          live: true,
          callback: null
        };
    
        function WOW(options) {
          if (options == null) {
            options = {};
          }
          this.scrollCallback = bind(this.scrollCallback, this);
          this.scrollHandler = bind(this.scrollHandler, this);
          this.resetAnimation = bind(this.resetAnimation, this);
          this.start = bind(this.start, this);
          this.scrolled = true;
          this.config = this.util().extend(options, this.defaults);
          this.animationNameCache = new WeakMap();
          this.wowEvent = this.util().createEvent(this.config.boxClass);
        }
    
        WOW.prototype.init = function() {
          var ref;
          this.element = window.document.documentElement;
          if ((ref = document.readyState) === "interactive" || ref === "complete") {
            this.start();
          } else {
            this.util().addEvent(document, 'DOMContentLoaded', this.start);
          }
          return this.finished = [];
        };
    
        WOW.prototype.start = function() {
          var box, j, len, ref;
          this.stopped = false;
          this.boxes = (function() {
            var j, len, ref, results;
            ref = this.element.querySelectorAll("." + this.config.boxClass);
            results = [];
            for (j = 0, len = ref.length; j < len; j++) {
              box = ref[j];
              results.push(box);
            }
            return results;
          }).call(this);
          this.all = (function() {
            var j, len, ref, results;
            ref = this.boxes;
            results = [];
            for (j = 0, len = ref.length; j < len; j++) {
              box = ref[j];
              results.push(box);
            }
            return results;
          }).call(this);
          if (this.boxes.length) {
            if (this.disabled()) {
              this.resetStyle();
            } else {
              ref = this.boxes;
              for (j = 0, len = ref.length; j < len; j++) {
                box = ref[j];
                this.applyStyle(box, true);
              }
            }
          }
          if (!this.disabled()) {
            this.util().addEvent(window, 'scroll', this.scrollHandler);
            this.util().addEvent(window, 'resize', this.scrollHandler);
            this.interval = setInterval(this.scrollCallback, 50);
          }
          if (this.config.live) {
            return new MutationObserver((function(_this) {
              return function(records) {
                var k, len1, node, record, results;
                results = [];
                for (k = 0, len1 = records.length; k < len1; k++) {
                  record = records[k];
                  results.push((function() {
                    var l, len2, ref1, results1;
                    ref1 = record.addedNodes || [];
                    results1 = [];
                    for (l = 0, len2 = ref1.length; l < len2; l++) {
                      node = ref1[l];
                      results1.push(this.doSync(node));
                    }
                    return results1;
                  }).call(_this));
                }
                return results;
              };
            })(this)).observe(document.body, {
              childList: true,
              subtree: true
            });
          }
        };
    
        WOW.prototype.stop = function() {
          this.stopped = true;
          this.util().removeEvent(window, 'scroll', this.scrollHandler);
          this.util().removeEvent(window, 'resize', this.scrollHandler);
          if (this.interval != null) {
            return clearInterval(this.interval);
          }
        };
    
        WOW.prototype.sync = function(element) {
          if (MutationObserver.notSupported) {
            return this.doSync(this.element);
          }
        };
    
        WOW.prototype.doSync = function(element) {
          var box, j, len, ref, results;
          if (element == null) {
            element = this.element;
          }
          if (element.nodeType !== 1) {
            return;
          }
          element = element.parentNode || element;
          ref = element.querySelectorAll("." + this.config.boxClass);
          results = [];
          for (j = 0, len = ref.length; j < len; j++) {
            box = ref[j];
            if (indexOf.call(this.all, box) < 0) {
              this.boxes.push(box);
              this.all.push(box);
              if (this.stopped || this.disabled()) {
                this.resetStyle();
              } else {
                this.applyStyle(box, true);
              }
              results.push(this.scrolled = true);
            } else {
              results.push(void 0);
            }
          }
          return results;
        };
    
        WOW.prototype.show = function(box) {
          this.applyStyle(box);
          box.className = box.className + " " + this.config.animateClass;
          if (this.config.callback != null) {
            this.config.callback(box);
          }
          this.util().emitEvent(box, this.wowEvent);
          this.util().addEvent(box, 'animationend', this.resetAnimation);
          this.util().addEvent(box, 'oanimationend', this.resetAnimation);
          this.util().addEvent(box, 'webkitAnimationEnd', this.resetAnimation);
          this.util().addEvent(box, 'MSAnimationEnd', this.resetAnimation);
          return box;
        };
    
        WOW.prototype.applyStyle = function(box, hidden) {
          var delay, duration, iteration;
          duration = box.getAttribute('data-wow-duration');
          delay = box.getAttribute('data-wow-delay');
          iteration = box.getAttribute('data-wow-iteration');
          return this.animate((function(_this) {
            return function() {
              return _this.customStyle(box, hidden, duration, delay, iteration);
            };
          })(this));
        };
    
        WOW.prototype.animate = (function() {
          if ('requestAnimationFrame' in window) {
            return function(callback) {
              return window.requestAnimationFrame(callback);
            };
          } else {
            return function(callback) {
              return callback();
            };
          }
        })();
    
        WOW.prototype.resetStyle = function() {
          var box, j, len, ref, results;
          ref = this.boxes;
          results = [];
          for (j = 0, len = ref.length; j < len; j++) {
            box = ref[j];
            results.push(box.style.visibility = 'visible');
          }
          return results;
        };
    
        WOW.prototype.resetAnimation = function(event) {
          var target;
          if (event.type.toLowerCase().indexOf('animationend') >= 0) {
            target = event.target || event.srcElement;
            return target.className = target.className.replace(this.config.animateClass, '').trim();
          }
        };
    
        WOW.prototype.customStyle = function(box, hidden, duration, delay, iteration) {
          if (hidden) {
            this.cacheAnimationName(box);
          }
          box.style.visibility = hidden ? 'hidden' : 'visible';
          if (duration) {
            this.vendorSet(box.style, {
              animationDuration: duration
            });
          }
          if (delay) {
            this.vendorSet(box.style, {
              animationDelay: delay
            });
          }
          if (iteration) {
            this.vendorSet(box.style, {
              animationIterationCount: iteration
            });
          }
          this.vendorSet(box.style, {
            animationName: hidden ? 'none' : this.cachedAnimationName(box)
          });
          return box;
        };
    
        WOW.prototype.vendors = ["moz", "webkit"];
    
        WOW.prototype.vendorSet = function(elem, properties) {
          var name, results, value, vendor;
          results = [];
          for (name in properties) {
            value = properties[name];
            elem["" + name] = value;
            results.push((function() {
              var j, len, ref, results1;
              ref = this.vendors;
              results1 = [];
              for (j = 0, len = ref.length; j < len; j++) {
                vendor = ref[j];
                results1.push(elem["" + vendor + (name.charAt(0).toUpperCase()) + (name.substr(1))] = value);
              }
              return results1;
            }).call(this));
          }
          return results;
        };
    
        WOW.prototype.vendorCSS = function(elem, property) {
          var j, len, ref, result, style, vendor;
          style = getComputedStyle(elem);
          result = style.getPropertyCSSValue(property);
          ref = this.vendors;
          for (j = 0, len = ref.length; j < len; j++) {
            vendor = ref[j];
            result = result || style.getPropertyCSSValue("-" + vendor + "-" + property);
          }
          return result;
        };
    
        WOW.prototype.animationName = function(box) {
          var animationName;
          try {
            animationName = this.vendorCSS(box, 'animation-name').cssText;
          } catch (_error) {
            animationName = getComputedStyle(box).getPropertyValue('animation-name');
          }
          if (animationName === 'none') {
            return '';
          } else {
            return animationName;
          }
        };
    
        WOW.prototype.cacheAnimationName = function(box) {
          return this.animationNameCache.set(box, this.animationName(box));
        };
    
        WOW.prototype.cachedAnimationName = function(box) {
          return this.animationNameCache.get(box);
        };
    
        WOW.prototype.scrollHandler = function() {
          return this.scrolled = true;
        };
    
        WOW.prototype.scrollCallback = function() {
          var box;
          if (this.scrolled) {
            this.scrolled = false;
            this.boxes = (function() {
              var j, len, ref, results;
              ref = this.boxes;
              results = [];
              for (j = 0, len = ref.length; j < len; j++) {
                box = ref[j];
                if (!(box)) {
                  continue;
                }
                if (this.isVisible(box)) {
                  this.show(box);
                  continue;
                }
                results.push(box);
              }
              return results;
            }).call(this);
            if (!(this.boxes.length || this.config.live)) {
              return this.stop();
            }
          }
        };
    
        WOW.prototype.offsetTop = function(element) {
          var top;
          while (element.offsetTop === void 0) {
            element = element.parentNode;
          }
          top = element.offsetTop;
          while (element = element.offsetParent) {
            top += element.offsetTop;
          }
          return top;
        };
    
        WOW.prototype.isVisible = function(box) {
          var bottom, offset, top, viewBottom, viewTop;
          offset = box.getAttribute('data-wow-offset') || this.config.offset;
          viewTop = window.pageYOffset;
          viewBottom = viewTop + Math.min(this.element.clientHeight, this.util().innerHeight()) - offset;
          top = this.offsetTop(box);
          bottom = top + box.clientHeight;
          return top <= viewBottom && bottom >= viewTop;
        };
    
        WOW.prototype.util = function() {
          return this._util != null ? this._util : this._util = new Util();
        };
    
        WOW.prototype.disabled = function() {
          return !this.config.mobile && this.util().isMobile(navigator.userAgent);
        };
    
        return WOW;
    
      })();
    
    }).call(this);

在footer.php（主题/component/footer.php）（前添加）

    <script>
    wow = new WOW({
    animateClass: 'animated',
    });
    wow.init();
    </script>

在Content.php（主题/libs/Content.php）改

第1077

    $html .= '<div class="panel wow animated flipInX">';

第1083

    <div class="panel  wow animated flipInX"><div class="index-post-img"><a href="{$parameterArray['linkUrl']}"><img {$imageHtml}

盒子模式改进

    /*盒子改进*/
    @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,.35)}.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,.3)}.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,.2)}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,.2)}.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,.3);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,.2.5)}.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,.35);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}

修复透明模式下目录树BUG

    /* 开发者设置——自定义css里面添加这个即可*/
    #toc {
    background: rgba(255, 255, 255, 0.3);
    }

博主前端不精，美化代码全部来源于网络！如有侵权，请联系站长删除

前言

介绍

美化

1. 头像呼吸光环和鼠标悬停旋转放大

2. 左侧文章图标和评论头像鼠标悬停旋转

3. 文章内打赏图标跳动

4. 彩色标签云

5. 首页文章列表悬停上浮

6. 首页文章列表头图悬停放大并将超出范围隐藏

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

8. 右侧列表导航栏图标颜色

9. 点击空白区域隐藏歌曲列表

10.文章标题居中

复制弹窗效果

关于我页面时间轴记录

js动态标题

春节倒计时

首页左侧博主介绍

底部版权

文章页面添加百度收录查询

首页添加翻转动画

盒子模式改进

修复透明模式下目录树BUG

21 条评论

发表评论 取消回复

handsome美化 魔改

前言

介绍

美化

1. 头像呼吸光环和鼠标悬停旋转放大

2. 左侧文章图标和评论头像鼠标悬停旋转

3. 文章内打赏图标跳动

4. 彩色标签云

5. 首页文章列表悬停上浮

6. 首页文章列表头图悬停放大并将超出范围隐藏

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

8. 右侧列表导航栏图标颜色

9. 点击空白区域隐藏歌曲列表

10.文章标题居中

复制弹窗效果

关于我页面时间轴记录

js动态标题

春节倒计时

首页左侧博主介绍

底部版权

文章页面添加百度收录查询

首页添加翻转动画

盒子模式改进

修复透明模式下目录树BUG

发表评论取消回复

handsome美化魔改