复刻-wordpress-留言板-一言API

关于留言板

中间随机生成一段文字，且为留言者提供留言环境。

实现方法

在网站的根目录website_April/wp-content/themes/Sakurairo (仅对于本网站)

新建一份文本文档，命名为page-hitokoto.php (注意：文件扩展名)

将以下代码复制到其中

<?php

/**
 Template Name: hitokoto
 */

get_header();

?>
<?php while (have_posts()) : the_post(); ?>
    <?php if (akina_option('patternimg') || !get_post_thumbnail_id(get_the_ID())) { ?>
    <?php } ?>
    <article <?php post_class("post-item"); ?>>
        <?php the_content(); ?>
        <style>
            #hitokoto {
                color: #666;
                border: 2px solid #999;
                padding: 3em;
                padding-bottom: 2em;
                position: relative;
                box-sizing: border-box;
                margin-top: 6em;
                margin-bottom: 6em;
                margin-left: 5em;
                margin-right: 5em;
            }

            #hitokoto-title {
                width: 100%;
                padding-right: 2em;
                padding-left: 2em;
                font-size: 2em;
                text-align: center;
                position: absolute;
                top: -3.4em;
                left: 0;
                box-sizing: border-box;
                z-index: 1;
            }

            #hitokoto-title h3 {
                display: inline-block;
                padding: 1em;
                background: #fff;
            }

            #hitokoto-body {
                font-size: 22px;
                box-sizing: border-box;
                position: relative;
                z-index: 2;
            }

            #hitokoto-author {
                font-size: 1em;
                box-sizing: border-box;
                text-align: center;
                margin-top: 1em;
            }

            @media screen and (max-width:768px) {
                #hitokoto {
                    color: #666;
                    border: 2px solid #999;
                    padding: 1em;
                    padding-bottom: 2em;
                    position: relative;
                    box-sizing: border-box;
                    margin-top: 6em;
                    margin-bottom: 6em;
                    margin-left: 2em;
                    margin-right: 2em;
                }

                #hitokoto-title {
                    width: 100%;
                    padding-right: 2em;
                    padding-left: 2em;
                    font-size: 2em;
                    text-align: center;
                    position: relative;
                    top: 0em;
                    left: 0;
                    box-sizing: border-box;
                    z-index: 1;
                }

                #hitokoto-title h3 {
                    display: inline-block;
                    padding: 0em;
                    background: #fff;
                }

                #hitokoto-body {
                    font-size: 22px;
                    box-sizing: border-box;
                    position: relative;
                    z-index: 2;
                }

                #hitokoto-author {
                    font-size: 1em;
                    box-sizing: border-box;
                    text-align: center;
                    margin-top: 1em;
                }
            }
        </style>
        <div id="hitokoto">
            <div id="hitokoto-title">
                <h3>坦白说</h3>
            </div>
            <div id="hitokoto-body">
                <script type="text/javascript" src="https://api.btstu.cn/yan/api.php?charset=utf-8&encode=js"></script>
                <div id="yan" style="text-align:center">
                    <script>
                        text()
                    </script>
                </div>
            </div>
            <div id="hitokoto-author"></div>
        </div>
    </article>
    <script>
        $.post("/hitokoto/api.php", function(data) {
            var hitokoto_arr = data.split("——");
            $("#hitokoto-body").html(hitokoto_arr[0]);
            $("#hitokoto-author").html(hitokoto_arr[1]);
        });
    </script>
    <div class="have-toc"></div>
    <div class="toc-container">
        <div class="toc"></div>
    </div>
<?php endwhile; ?>
<?php
get_footer();
?>

其中第115行，https://api.btstu.cn/yan/api.php?charset=utf-8&encode=js用到一个随机返回句的接口，你可以点击这里来进行查看。

在这里提供一些接口：

• https://v1.jinrishici.com/all.json
• https://v1.jinrishici.com/all.svg
• https://api.btstu.cn/yan/api.php?charset=utf-8&encode=js

有兴趣的话可以深入了解一下一言开发者中心 或者 今日诗词。

关于留言环境，不要忘记在wordpress编辑页面勾选上允许评论。

实际效果可以参考我的博客：点击这里