XBlog开发手册
小游
2021-08-01

文章

文章界面也是一个重要的内容，用来显示文章的详细信息

这个在根目录下的 post.php 中，你可以通过调用各种函数来获取文章的相关信息，这里就不一一介绍了，可以自己到API参考章节查看。

# 加密内容

这里我说一下加密文章的事情，我们可以通过 get_post_encrypt 判断文章是否加密，如果加密我们就显示一个密码输入框让用户输入密码，注意这个input的name是 password ，用户输入密码后 get_post_encrypt 就会变成 false ，然后就可以直接调用 post_content 来显示文章内容了

<div class="entry-content">
    <?php if (get_post_encrypt()): ?>
    <form action="" class="post-password-form" method="get">
        <p>这是一篇受密码保护的文章，您需要提供访问密码：</p>
        <p><label for="pwbox-7">密码： <input name="password" id="pwbox-7" type="password" size="20"></label> <input type="submit" value="提交"></p>
    </form>
    <?php else: post_content(); endif;?>
</div>
1
2
3
4
5
6
7
8

# 文章评论

文章评论是一个单独的模块，大家可以调用下面这个函数来获取文章的评论内容

<?php xy_comments(get_post_id());
1

而评论部分的代码在 content/comments.php 这个文件里。评论部分最难的就是嵌套评论的问题，我这里使用的是最简单的暴力递归的方法，这个方法其实很消耗性能，不过好在网站的评论一般不会很多，后续可能会考虑优化。下面这里说一下我的处理方法，大家可以参考一下，也可以自己想别的方法来实现。

首先我们要定义一个显示评论框界面的函数，这个$show 可以用来控制是否显示回复按钮

function echoComment($comment,$show = true)
    {
    $postId = get_post_id();
        echo <<<EOF
<div class="contents">
    <div class="comment-arrow">
        <div class="main">
            <div class="profile">
                <a href="javascript: return false;" rel="nofollow">
                    <img src="https://cdn.jsdelivr.net/gh/moezx/cdn@3.0.2/img/svg/loader/trans.ajax-spinner-preloader.svg" onerror="imgError(this,1)" data-src="${comment["avatar"]}" class="lazyload avatar avatar-24 photo" alt="😀" width="24" height="24">
                </a>
            </div>
            <div class="commentinfo">
                <section class="commeta">
                    <div class="left">
                        <h4 class="author">
                          <a href="javascript: return false;" rel="nofollow">
                            ${comment["nickname"]}
                            <span class="showGrade0" title="萌萌哒新人~">
                                <img src="https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/images/level/level_${comment["level"]}.svg" style="height: 1.5em; max-height: 1.5em; display: inline-block;">
                            </span>
                           </a>
                        </h4>
                    </div>
EOF;
        if ($show){
            echo "<a rel=\"nofollow\" class=\"comment-reply-link\" href=\"#comment-${comment["id"]}\" data-commentid=\"${comment["id"]}\" data-postid=\"$postId\" data-belowelement=\"comment-${comment["id"]}\" data-respondelement=\"respond\">Reply</a>";
        }
echo <<<EOF
                    <div class="right">
                        <div class="info">
                            <time datetime="2020-03-01">发布于 ${comment["date"]}</time>
                        </div>
                    </div>
                </section>
            </div>
            <div class="body">
                <p>${comment["content"]}</p>
            </div>
        </div>
        <div class="arrow-left"></div>
    </div>
</div>
EOF;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

下面就是嵌套评论的部分，我这边统一建议最多可以嵌套5层，多了不好显示，少了也不方便，大家自己选择就好，我的处理逻辑如下：

<?php $comments = get_post_comments();
foreach ($comments as $comment){
    if ($comment["parent"]==0){
        echo '<li class="comment even thread-even depth-1" id="comment-"'.$comment["id"].'>';
        echoComment($comment);
        echo '<hr><ul class="children">';
        foreach ($comments as $comment2){
            if ($comment2["parent"]==$comment["id"]){
                echo '<li class="comment odd alt depth-2" id="comment-"'.$comment2["id"].'>';
                echoComment($comment2);
                echo '<hr><ul class="children">';
                foreach ($comments as $comment3){
                    if ($comment3["parent"]==$comment2["id"]){
                        echo '<li class="comment odd alt depth-3" id="comment-"'.$comment3["id"].'>';
                        echoComment($comment3);
                        echo '<hr><ul class="children">';
                        foreach ($comments as $comment4){
                            if ($comment4["parent"]==$comment3["id"]){
                                echo '<li class="comment odd alt depth-4" id="comment-"'.$comment4["id"].'>';
                                echoComment($comment4);
                                echo '<hr><ul class="children">';
                                foreach ($comments as $comment5){
                                    if ($comment5["parent"]==$comment4["id"]){
                                        echo '<li class="comment odd alt depth-5" id="comment-"'.$comment5["id"].'>';
                                        echoComment($comment5,false);
                                    }
                                }
                                echo '</ul></li>';
                            }
                        }
                        echo '</ul></li>';
                    }
                }
                echo '</ul></li>';
            }
        }
        echo '</ul></li>';
    }
}
?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# owo表情

博客系统自带表情，所以我这边统一建议使用博客系统自带的来进行显示。自带的后续可以扩展，如果自己实现的话，不好维护。

使用 tools_get_smile(); 来获取表情信息，表情的结构信息如下

{
    "bilibili": {
        "type": "images",
        "container": [
            {
                "desc": "':bilibili0:'",
                "icon": "<img title=\":bilibili0:\" class=\"x-owo-icon\" src=\"http://192.168.123.119/assets/images/smilies/bilibili/0.png\"/>",
                "text": ""
            }
        ]
    },
    "小电视": {
        "type": "images",
        "container": [
            {
                "desc": "':tv1:'",
                "icon": "<img title=\":tv1:\" class=\"x-owo-icon\" src=\"http://192.168.123.119/assets/images/smilies/bilibili_tv/tv_1.png\"/>",
                "text": ""
            }
        ]
    },
    "颜文字": {
        "type": "emoticon",
        "container": [
            {
                "desc": "'OωO'",
                "icon": "<span title=\"OωO\" class=\"x-owo-icon\">OωO</span>",
                "text": "Author: DIYgod"
            }
        ]
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

desc 是表情的代码，我们在评论中插入这个文本后在显示表情的时候系统会自动进行转义，icon 是表情内容，自带html标签，我们自己显示就可以了。text是表情的描述，其实可以不需要。

其实我们可以使用owo这个插件来显示我们的表情，这样就不用自己写处理逻辑了，关键代码

	new OwO({
		logo: 'OωO表情',
		container: document.getElementsByClassName('OwO')[0],
		target: document.getElementById('comment'),
		api: '/api/v3/tools/smiles',
		position: 'up',
		width: '100%',
		maxHeight: '250px'
	})
1
2
3
4
5
6
7
8
9

这里我们可以通过api接口自动获取表情信息，然后指定需要显示的容器。相关的js代码和样式可以参考官方主题的

theme.js 内容

image-20210801151943559

# 发表评论

这个也是一个比较麻烦的地方。需要考虑用户是否登录，以及文章id，回复某个用户时用户的id。发表评论需要使用博客系统的接口来进行发送，下面这个是sakura的处理逻辑，这个其实值贴了一部分。

jQuery(document).on("submit", "#commentform", function() {
    // 获取评论的各项信息
    let comments = {
        parent: parseInt($('#comment_parent').val()),
        name: $('input#author').val(),
        content: $('textarea#comment').val(),
        site: $('input#url').val(),
        email: $('input#email').val()
    }
    // 发送的头部信息
    let head = []
    // 判段用戶是否登录
    if (mashiro_option.islogin){
        const info = JSON.parse(mashiro_option.userInfo);
        comments.avatar = info.avatar;
        comments.hang = info.hang;
        comments.email = info.email;
        comments.name = info.nickname;
        comments.user_id = info.user_id
        // 获取登录token
        let token = JSON.parse(xy.tools.getCookie('token'));
        head = {'user_id': token["user_id"], 'token': token['token']};
    } else if (getCookie('user_uid')){
        // 判断有没有B站UID
        comments.uid = getCookie('user_uid');
        comments.avatar = getCookie('user_avatar');
        comments.level = getCookie('user_level');
        comments.hang = getCookie('user_hang');
    }
    jQuery.ajax({
        method: "POST",
        headers: head,
        url: mashiro_option.site_url + `/api/v3/posts/${$('#comment_post_ID').val()}/comments`,
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(comments),
        beforeSend: addComment.createButterbar("提交中(Commiting)...."),
        error: function(res) {
            addComment.createButterbar(JSON.parse(res.responseText).message);
        },
        success: function(data) {
            addComment.createButterbar("提交成功(Succeed)");
            setTimeout(function (){window.location.reload()},1000)
        }
    });
    return false;
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

更详细的信息可以参考文章发布评论的接口

image-20210801152616502

body参数如下

image-20210801152629457

关键的部分自己多多看看代码，因为细节部分比较多，我这里也很难用有限的篇幅来说明。

编辑 (opens new window)
上次更新: 2021/08/01, 17:13:03
登录和注册
日记

← 日记→

Theme by Vdoing | Copyright © 2021-2021 小游