Hitokoto——复刻Mashiro博客的留言板【念两句诗】效果

发布于 2019-12-20  165 次阅读


这篇文章是上课摸鱼的作品……
上一版文章因为不明原因代码块被转义了……重新复制了一遍。

两天逛Mashiro大佬的博客,在留言板处发现了有小可爱在问【念两句诗】是怎么做到的。然后闲的没事的我大致猜测了一下实现方法,复刻了一份。

大致思路是类Hitokoto后端输出句子的API+前端js调用

首先,你需要

  • 基本的HTML和CSS知识
  • 一点点Javascript知识
  • 一点点Jquery ajax知识
  • 了解Wordpress博客/Sakura主题的基本结构
  • 可以的话,一点点PHP知识当然是最好的辣!XDDD【可以自己做简单的一言后端】

注意:本方法在Wordpress 5.2 和 Sakura v3.3.0 (PHP7.2)下测试有效!其他版本请自行测试修改~

第一步——后端

在这里,你可以使用现成的Hitokoto,然后设置一下CSS样式。

然后全文完。

……

……

……

好叭我错了【抱头】

我是用的是宝塔面板,在博客站点根目录下新建一个hitokoto文件夹,在里面新建两个文件:api.php和data.dat。

api.php里填充如下内容:

<?php
header('Access-Control-Allow-Origin:*');
// 存储数据的文件
$filename = 'data.dat';        
// 指定页面编码
header('Content-type: text/html; charset=utf-8');
if(!file_exists($filename)) {
    die($filename . ' 数据文件不存在');
}
// 读取整个数据文件
$data = file_get_contents($filename);
// 按换行符分割成数组
$data = explode(PHP_EOL, $data);
// 随机获取一行索引
$result = $data[array_rand($data)];
// 去除多余的换行符(保险起见)
$result = str_replace(array("\r","\n","\r\n"), '', $result);
echo $result;
?>

这段代码其实是我咕狗【一言的简单实现】后复制过来的,感谢编写它的人~(其实就是我忘了出处了DBQ QAQ)

然后,在data.dat文件中放入诗句/句子,格式如下(一行一句):

这个世界上不存在绝对的免费,哪怕你摘一个野果也是要向果树付出劳动的!——《原创》

解释:整个句子以破折号为界,前半段是句子的body,后半段是句子的author/article,切记破折号一定要有!后续js要调用split方法把句子前后分开的!

然后,你访问http://yourblog.site/hitokoto/api.php 就会发现它会随机返回给你一个句子了!简单的api就做好辣~

第二步——前端


基于Jquery Ajax

进入 你博客的根目录/wp-content/themes/Sakura

复制一份page-links.php并重命名为page-hitokoto.php。

删除所有内容并复制粘贴如下(请自行比较与原page-links.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>Hitokoto</h3></div>
                <div id="hitokoto-body">挑选中……</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();
?>

似乎代码块里出现了一个{1},不知道哪里来的后台这边没有【摊手】,请自行删除~

然后,保存!完事!然后Wordpress新建页面,选择Hitokoto模板即可~

使用原生Javascript


Update 2019/12/20 利用XMLHttpRequest()实现

在使用过程中,发现了这样一个问题:

  • 如果将Ajax代码直接插入page-hitokoto.php当中,由于Sakura主题将Jquery放在了HTML文档末引用,导致如果你对着留言页面Ctrl+F5强制刷新或者直接链接打开页面的时候控制台会报错且hitokoto会加载不出来【摊手】。
  • 而如果将那段Ajax代码放在footer.php中则会因为页面采用ajax刷新而footer部分不跟着刷新导致不会在留言板打开的时候执行这段代码,除非你Ctrl+F5强制刷新或者直接链接打开页面……

于是乎就矛盾了【捂脸】,纠结再三,从网上(SegmentFault)咕狗了一段封装好的原生Javascript Ajax post方法“拿来主义”了一下,代码如下:

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","/hitokoto/api.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        var hitokoto_arr = xmlhttp.responseText.split("——");
        document.getElementById("hitokoto-body").innerHTML=hitokoto_arr[0];
        document.getElementById("hitokoto-author").innerHTML=hitokoto_arr[1];
    }
  }

替换原来的jquery ajax的那串Code就可以啦~


Daily life, Daily 213.