关于

<!DOCTYPE html>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typecho微语页面</title>
<style>
    /* 整体页面布局和背景设置 */
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 0;
    }

    /* 微语容器样式 */
    .micro-words-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }

    /* 单个微语气泡样式 */
    .micro-word {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        padding: 15px;
        margin-bottom: 20px;
        position: relative;
    }

    /* 微语内容样式 */
    .micro-word p {
        margin: 0;
        line-height: 1.6;
    }

    /* 微语作者和时间样式 */
    .micro-word .author-time {
        color: #999;
        font-size: 0.8em;
        margin-top: 5px;
    }

    /* 微语气泡的三角指示样式 */
    .micro-word:before {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 30px;
        border-width: 10px;
        border-style: solid;
        border-color: #fff transparent transparent transparent;
    }

    /* 登录状态下的发表微语框样式 */
    .add-micro-word {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        padding: 15px;
        margin-bottom: 20px;
    }

    .add-micro-word textarea {
        width: 100%;
        height: 100px;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 5px;
        resize: vertical;
    }

    .add-micro-word button {
        background-color: #007BFF;
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 5px 10px;
        cursor: pointer;
    }
</style>

<div class="micro-words-container">
    <!-- 循环输出微语内容，这里使用PHP代码结合Typecho的API来获取评论数据并展示 -->
    <?php
    // 假设你已经知道如何获取Typecho的评论数据并进行循环
    foreach ($comments as $comment) {
    ?>
        <div class="micro-word">
            <p><?php echo $comment['content']; ?></p>
            <div class="author-time"><?php echo $comment['author'] . ' - ' . $comment['date']; ?></div>
        </div>
    <?php
    }
    ?>

    <!-- 登录状态下显示发表微语框 -->
    <?php if ($isLoggedIn) { ?>
        <div class="add-micro-word">
            <textarea placeholder="发表你的微语..."></textarea>
            <button type="submit">发表</button>
        </div>
    <?php } ?>
</div>

发表新评论