主题美化

1. 鼠标点击特效

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

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

2. 首页头像放大并自动旋转

本项修改的是首页头像,效果就是将首页头像放大,并使其自动旋转。将以下代码直接添加后台的设置外观,放到开发者设置-自定义CSS。

#旋转速度请修改3s数值(别复制该行)
/*首页头像放大并自动旋转*/
.thumb-lg{
    width:130px;
}

@-webkit-keyframes rotation{
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

.img-full{
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}

3. 右侧导航栏图标加颜色

.glyphicon-fire {
    color: #ff0000;
}

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

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

4. 修改“文章最后修改时间”

handsome/libs/Content.php 575行

<span>'._mt("最后修改").':'.date(_mt("Y 年 m 月 d 日 h : i  A") , $time + $obj).'</span> 

5. 页面看板娘——伊斯特瓦尔和雷姆

需要插件。

6. 背景粒子效果

将下面js代码添加到后台设置外观自定义JavaScript里面

var D = "bg_effect"     //画布ID
var T = 100;            //点的数量
var R = "0.0.0";        //点的颜色 RGB颜色 使用.(句号)
var C = "0,0,0";        //连线颜色 RGB颜色 使用,(逗号)
var E = 0;              //连线大小 值为0时启用动态大小(消耗更多系统资源)
var N = 6000;           //点之间连线的距离
var S = 20000;          //与鼠标连线的距离
var F = 0;              //禁止点连线的个数
var X = 2;              //X轴移动系数 >=2
var Y = 2;              //y轴移动系数 >=2
var H = ""              //连线阴影颜色(如引号内存在颜色代码,将消耗巨大系统资源,慎用)
var J = 0;              //连线阴影大小系数

!function BGE() {
    function o(w, v, i) {
        return w.getAttribute(v) || i
    }
    function j(i) {
        return document.getElementsByTagName(i)
    }
    function l() {
        var i = j("script"),
        w = i.length,
        v = i[w - 1];
        return {
            l: w,
            z: o(v, "zIndex", -1),
            o: o(v, "opacity", 1),
            c: o(v, "color", C),
            n: o(v, "count", T)
        }
    }
    function k() {
        r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    }
    function G(H) {
        if (E = 0) {
            E = A / 2
            return H;
        }
    }
    function b() {
        e.clearRect(0, 0, r, n);
        var w = [f].concat(t);
        var x, v, A, B, z, y;
        t.forEach(function(i) {
            i.x += i.xa,
            i.y += i.ya,
            i.xa *= i.x > r || i.x < 0 ? -1 : 1,
            i.ya *= i.y > n || i.y < 0 ? -1 : 1,
            e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);
            for (v = 0; v < w.length; v++) {
                x = w[v];
                if (i !== x && null !== x.x && null !== x.y && (E ==0 || E==null)) {
                    B = i.x - x.x,
                    z = i.y - x.y,
                    y = B * B + z * z;
                    y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.fillStyle = "rgba(" + R + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke(),e.shadowColor = H, e.shadowBlur = J)
                }else if(i !== x && null !== x.x && null !== x.y && E !=0){
                    B = i.x - x.x,
                    z = i.y - x.y,
                    y = B * B + z * z;
                    y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = E, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.fillStyle = "rgba(" + R + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke(),e.shadowColor ="rgba("+H+")", e.shadowBlur = J)
                }
            }
            w.splice(w.indexOf(i), F)
        }),
        m(b)
    }
    var u = document.createElement("canvas"),
    s = l(),
    c = D,
    e = u.getContext("2d"),
    r,
    n,
    m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(i) {
        window.setTimeout(i, 1000 / 45)
    },
    a = Math.random,
    f = {
        x: null,
        y: null,
        max: S
    };
    u.id = c;
    u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;
    j("body")[0].appendChild(u);
    k(),
    window.onresize = k;
    window.onmousemove = function(i) {
        i = i || window.event,
        f.x = i.clientX,
        f.y = i.clientY
    },
    window.onmouseout = function() {
        f.x = null,
        f.y = null
    };
    for (var t = [], p = 0; s.n > p; p++) {
        var h = a() * r,
        g = a() * n,
        q = X * a() - 1,
        d = Y * a() - 1;
        t.push({
            x: h,
            y: g,
            xa: q,
            ya: d,
            max: N,
        });
    }
    setTimeout(function() {
        b();
    },
    100);
} ();

7. 文章底部添加版权信息

html部分

代码添加到文章输出代码的后面
我的是post.php的<!--文章页脚的广告位-->上面一个</div>的前面

<div class="cpright">
<span>本文作者:<span class="sr-only"><?php _me("作者") ?>:</span> <a class="meta-value" href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a></span>&nbsp;&nbsp;&nbsp;
文章标题:<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br><span>本文地址:<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br><span>版权说明:若无注明,本文皆为“<a href="<?php $this->options->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>”原创,转载请保留文章出处。</span>
</div>

css部分

将下面css代码添加到后台设置外观自定义CSS里面

.cpright {
    padding: 10px;
    background: rgba(220, 220, 220, 0.1);
    margin: 8px 0;
    font-size: 13px;
    border-left: 3px #68a8f6 solid;
    position: relative;
    z-index: 1;
    font-family: "Microsoft Yahei","Droid Serif",Georgia,"Times New Roman",STHeiti,serif;
    text-align: left;
}
.cpright a:hover {
    color: #68a8f6!important;
}
.cpright a {
    color: #b5fbe1!important;
    margin: 4px;
    border-bottom: 0px solid #999!important;
}

8. 翻转动画

  1. 引入wow.js
    在后台设置外观自定义输出head 头部的HTML代码里面添加
<script src="https://cdn.bootcss.com/wow/1.1.2/wow.js"></script>
  1. 在footer.php(主题/component/footer.php)前面添加
<script>
wow = new WOW({
animateClass: 'animated',
});
wow.init();
</script>
  1. 在Content.php(主题/libs/Content.php)
    第953
$html .= '<div class="panel">';

改为

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

第959

<div class="panel">

改为

<div class="panel wow animated flipInX">

第971

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

改为

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

9. 彩色标签云

在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;
});
本文作者:Author:     文章标题:主题美化
本文地址:https://www.ningcaichen.top/archives/11.html     
版权说明:若无注明,本文皆为“宁采晨's Blog”原创,转载请保留文章出处。
Last modification:2019 年 11 月 04 日 22 : 38 PM
如果觉得我的文章对你有用,请随意赞赏

2 comments

  1. aruki

    请问这个主题模板是什么

    1. 宁采晨
      @aruki

      typecho主题。https://www.ihewro.com/archives/489/

Leave a Comment

召唤看板娘