折腾了个把月,终于敲定使用 halo 博客系统,并且选择了 这款主题,当前版本是 1.1.5,在此记录一下自用魔改的一些地方,以备后用。

1、标题栏特效(在用)

效果展示

离开网站时

1.png

进入网站时

2.png

实现

修改 module/script.ftl 文件,将以下代码复制到文件大概54行左右即可。

<!--切换标签实现网页标题变化-->
<script type="text/javascript">
    /*自动刷新页面,避免无法访问*/
    var OriginTitile = document.title;
    var titleTime;
    document.addEventListener('visibilitychange', function () {
        if (document.hidden) {
            document.title = '404啦!!!!∑(゚Д゚ノ)ノ ';
            clearTimeout(titleTime);
        } else {
            document.title = '哈哈,骗你的!ヾ(゚∀゚ゞ)';
            titleTime = setTimeout(function () {
                document.title = OriginTitile;
            }, 3000);
        }
    });
</script>

3.png

2、鼠标点击特效(在用)

效果展示

4.png

实现

修改 module/script.ftl 文件,将以下代码复制到文件大概73行左右即可。

<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善","索嗨");
        var $i = $("<span></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": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

5.png

3、首页个性签名(在用)

效果展示

6.png

实现

修改 index.ftl 文件,将大概17行左右的 p标签 修改为如下代码

<p class="slogan text-center" id="binft"></p>

7.png

然后在文件 P标签 之后加上如下代码

<!-- 个性签名 begin -->
<script>
    var binft = 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 = [${settings.home_description!}].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()
    };
    binft(document.getElementById('binft'));
</script>
<!-- 个性签名 end-->

然后到 博客后台-外观-主题-设置-基本设置 下设置 首页描述 即可。

8.png9.png

PS:个性签名须用英文 "" 包裹

4、文章页显示文章时间(在用)

效果展示

10.png

实现

修改 post.ftl 文件,在大概46行位置新增如下代码即可

<span style="color: red;">文章发布于 ${post.createTime?string("yyyy-MM-dd HH:mm:ss")},最后更新于 ${post.updateTime?string("yyyy-MM-dd HH:mm:ss")}</span>

11.png

5、友链模板显示自定义内容(在用)

效果展示

12.png

实现

修改 sheet_links.ftl 文件,在大概21行的位置新增如下代码

<div class="article-content content-container">
     <div class="container mx-auto px-4 md-content mt-8 max-w-6xl tracking-wider md:leading-relaxed sm:leading-normal ct-container cn-pd" id="write">
         ${post.formatContent!}
     </div>
</div>

13.png

然后在 后台-页面-新建页面 内容部分填写要展示的内容即可

14.png

6、改回旧版分类样式(在用)

效果展示

15.png

实现

修改 categories.ftl 文件,注释掉已有的分类样式,在之后新增以下代码即可

<div class="container mx-auto px-4 mt-16 max-w-6xl tracking-wider md:leading-relaxed sm:leading-normal ct-container cn-pd">
     <@categoryTag method="list">
           <#if categories?? && categories?size gt 0>
                <#list categories as category>
                    <a href="${category.fullPath}/" class="ah-hf ah-hv" title="${category.postCount!}篇文章">
                         <span class="ah-dt ct-f-size op-10"><span class="cst-icon icon-toc"></span> ${category.name}</span>
                         <span class="ah-tt h-6 op-06">${category.description}</span>
                    </a>
                </#list>
           </#if>
     </@categoryTag>
</div>

16.png

Q.E.D.

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议