前言

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

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

复制弹窗效果

关于我页面时间轴记录

js动态标题

春节倒计时

首页左侧博主介绍

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

    <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
如果觉得我的文章对你有用,请随意赞赏