blog/themes/Ying/layouts/_default/single.html

{{ define "main" }}
<div id="pjax-container">
    <article style="margin-bottom: 3.5em;">
        <h1 class="post-title" itemprop="name headline">{{ .Title }}</h1>
        <div class="meta">
            作者: 小赵同学 浏览: {{ .Params.views }} 字数: {{ .WordCount }} 分类: {{ range .Params.categories }}<a
                href="{{ .Permalink }}">{{ . }}</a>{{ end }}
        </div>
        <div class="post-content" itemprop="articleBody">
            {{ .Content }}
        </div>
        <div class="post-tags" style="margin-top: -30px;">
            <nav class="nav tags">
                <ul class="flat">

                </ul>
            </nav>
        </div>
    </article>
    <hr class="uk-divider-icon">
    <div id="comments" class="comments-area">
        <!-- 评论区内容 -->
        <div id="waline"></div>
    </div>

    <script type="text/javascript">
        $(document).ready(function() {
            // 获取当前页面的路径
            var currentPath = "{{ .RelPermalink }}";
    
            // 动态获取评论并发布弹幕
            $.ajaxSettings.async = true;
            $.getJSON('https://waline.usj.cc/api/comment?path=' + encodeURIComponent(currentPath), function(response) {
                var data = response.data.data;
                console.log(data);
                // 每条弹幕发送间隔
                var looper_time = 3 * 1000;
                var items = data;
                // 弹幕总数
                var total = items.length;
                // 是否首次执行
                var run_once = true;
                // 弹幕索引
                var index = 0;
                // 先执行一次
                barrager();
    
                function barrager() {
                    if (run_once) {
                        // 如果是首次执行, 则设置一个定时器, 并且把首次执行置为 false
                        looper = setInterval(barrager, looper_time);
                        run_once = false;
                    }
                  
                    // 转换数据为弹幕所需的格式
                    var item = {
                        img: items[index].avatar || 'static/default-avatar.png', // 头像
                        info: items[index].orig || 'No comment', // 评论内容
                        href: items[index].link || '#', // 用户链接
                        close: true, // 显示关闭按钮
                        speed: 6, // 延迟,单位秒,默认6
                        color: '#fff', // 颜色,默认白色
                        old_ie_color: '#000000' // ie低版兼容色,不能与网页背景相同,默认黑色
                    };
                  
                    // 发布一个弹幕
                    $('body').barrager(item);
                    // 索引自增
                    index++;
                    // 所有弹幕发布完毕，清除计时器
                    if (index == total) {
                        clearInterval(looper);
                        return false;
                    }
                }
            });
        });
    </script>

</div>
{{ end }}