<!DOCTYPE html><!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="blog/amaze/header::head-fragment"></head>
<body id="blog">
<div th:replace="blog/amaze/header::header-fragment" style="position: fixed;"></div>
<div class="am-g am-g-fixed blog-fixed" style="position: relative;top: 10rem;">
    <div class="am-u-lg-8 am-u-sm-12">
        <th:block th:unless="${#lists.isEmpty(favoriteLinks)}">
            <div id="friendlink" class="am-g">
                <th:block th:each="favoriteLink : ${favoriteLinks}">
                    <div class="am-u-sm-4"
                         data-scrollspy="{animation: 'slide-top', delay: 500}" style="text-align: center">
                        <a th:href="@{${favoriteLink.linkUrl}}" target="_blank">
                            <img class=".am-round" th:src="@{${favoriteLink.linkLogo}}"
                                 alt="logo">
                        </a>
                        <a th:href="@{${favoriteLink.linkUrl}}" target="_blank">
                            <h2 th:text="${favoriteLink.linkName}">为移动而生</h2>
                        </a>
                        <p class="am-text-truncate" th:text="${favoriteLink.linkDescription}"
                           th:alt="${favoriteLink.linkDescription}">Amaze UI 以移动优先（Mobile
                            first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。</p>
                    </div>
                </th:block>
            </div>
        </th:block>
    </div>
    <div id="source" style="display: none">
        <div class="amz-container">
            <header>
                <h1 data-am-scrollspy="{animation:'fade'}"
                    class="am-scrollspy-init am-scrollspy-inview am-animation-fade">链接须知</h1>
                <p data-scrollspy="{animation:'slide-bottom', delay: 200}">欢迎互换友链 ^_^ 不过请确定贵站可以正常运行.</p>
            </header>
        </div>
        <div data-scrollspy="{animation:'scale-up', delay: 300}">
            <p>发送以下信息到邮箱:
                <th:block th:text="${configurations.get('yourEmail')}"></th:block>
            </p>
            <ul class="am-list am-list-static">
                <li>网站名称：不会敲代码的小白</li>
                <li>网站链接：http://blog.javafan.club</li>
                <li>网站描述：不会敲代码的小白的个人博客</li>
                <li>网站logo: 推荐使用https，图片大小120 * 60</li>
            </ul>
        </div>
    </div>
    <div class="am-u-lg-4 am-u-sm-12 am-u-lg-offset-0 am-u-sm-offset-0 sidebar-container" style="margin-top: 5rem;">
        <section>
            <div id="output"></div>
        </section>
    </div>
</div>
<!-- 引入页脚footer-fragment -->
<footer th:replace="blog/amaze/footer::footer-fragment"></footer>
</body>


<!--逐字打印-->
<script type="text/javascript">
    class Typing {
        constructor(opts) {
            this.opts = opts || {};
            this.source = opts.source;
            this.output = opts.output;
            this.delay = opts.delay || 30;
            this.chain = {
                parent: null,
                dom: this.output,
                val: []
            };
            if (!(typeof this.opts.done === 'function')) this.opts.done = function () {
            };
        }

        init() {
            //初始化函数
            this.chain.val = this.convert(this.source, this.chain.val);
        }

        convert(dom, arr) {
            //将dom节点的子节点转换成数组，
            let children = Array.from(dom.childNodes)
            for (let i = 0; i < children.length; i++) {
                let node = children[i]
                if (node.nodeType === 3) {
                    arr = arr.concat(node.nodeValue.split(''))   //将字符串转换成字符串数组，后面打印时才会一个一个的打印
                } else if (node.nodeType === 1) {
                    let val = []
                    val = this.convert(node, val)
                    arr.push({
                        'dom': node,
                        'val': val
                    })
                }
            }
            return arr
        }

        print(dom, val, callback) {
            setTimeout(function () {
                dom.appendChild(document.createTextNode(val));
                callback();
            }, this.delay);
        }

        play(ele) {
            //当打印最后一个字符时，动画完毕，执行done
            if (!ele.val.length) {
                if (ele.parent) this.play(ele.parent);
                else this.opts.done();
                return;
            }
            let current = ele.val.shift()  //获取第一个元素，同时删除数组中的第一个元素
            if (typeof current === 'string') {
                this.print(ele.dom, current, () => {
                    this.play(ele); //继续打印下一个字符
                })
            } else {
                let dom = current.dom.cloneNode() //克隆节点，不克隆节点的子节点，所以不用加参数true
                ele.dom.appendChild(dom)
                this.play({
                    parent: ele,
                    dom,
                    val: current.val
                })
            }
        }

        start() {
            this.init();
            this.play(this.chain);
        }
    }
</script>

<!--逐字打印调用-->
<script type="text/javascript">
    let source = document.getElementById('source')
    let output = document.getElementById('output')
    let typing = new Typing({
        source,
        output
    })
    typing.start();
</script>

<!--打印彩色闪烁字体-->
<script language="javascript">
    function changeColor() {
        var color = "#ee3f4d|#db8540|#f7da94|#8cc269|#12a182|#1177b0|#813c85";
        color = color.split("|");
        document.getElementById("output").style.color = color[parseInt(Math.random() * color.length)];
    }

    setInterval("changeColor()", 200);
</script>

<!-- 背景动画 -->
<script th:src="@{/blog/plugins/bg/canvas-nest.js}" color="0,0,205" opacity='0.7' zIndex="-2" count="199"></script>
</html>