已实现动态的说说页面,可实时发布说说。详情见:为你的hexo博客添加动态的(可直接发布说说的)说说页面

解决导语中的问题的很好的一个办法就是,添加一个说说的页面,每次只有一两句话,以类似于时间轴的形式展现出来。
我在网上搜了好久,基本上都是针对于wordpress的php的代码。wordpress我是真的用不好,还是hexo得我心。
然后我这个前端小白,抱着试一试的心理把php的代码直接做成页面放进了我的博客。没想到还真的成了。但是肯定也是改了一些东西的,不然这篇文章意义何在?
一个比较大的变化就是,原版的代码中使用php获取当前时间的函数再html中我没有找到与之对应的。所以有个很尴尬的问题就是,当你想新建一个说说并且显示日期的时候,你得手动。。。这个确实不太方便,但是我的能力也就止步于此了。
我是在这里找到的源码:纯代码给wordpress增加说说/微博/微语功能 | 言曌博客

下面是hexo添加这个页面的大致步骤。

  1. ..\blog文件夹\source中新建一个文件夹,命名随意,但是一定要记住。这里我新建的文件夹叫shuoshuo
  2. 在文件夹中新建一个index.html,并将代码粘贴进去
  3. 在对应的主题页面菜单添加说说,并链接到创建的说说页面

上面的第一第三步不难,并且每个主题可能还不一样,所以就不细说了。

第二步:
将下面的代码粘贴到你的index.html中
特殊原因,点击这个去复制代码(不知名的直接放代码页面会卡爆艹)

每次想要新建一个说说的时候按照这个格式来

<li> <span class="shuoshuo_author_img"><img src="https://cdn.jsdelivr.net/gh/drew233/cdn/dreww.webp" class="avatar avatar-48" width="48" height="48"></span>
<!-- 这个img src里面的链接是说说头像的链接 -->
    <a class="cbp_tmlabel" href="">
    <!-- 这个href是你想要让这个说说链接到的地方,如果没有不管它就行 -->
        <p></p>
        <p><!-- 这里写的就是说说的内容 --></p>
        <p></p>
        <p class="shuoshuo_time"><i class="fa fa-clock-o"></i>
            2019年9月10日
            <!-- 这个地方写上时间,如果不想写删除就行了。 -->
        </p>
    </a>
</li>

按照你的想法将上面的代码改好之后,粘贴到你的shuoshuo文件夹中index.html里面。根据每个\

  • 标签查找你应该粘贴到的位置。注意这个顺序就会是你在页面上现实的顺序。
  • 为了预防你还不知道怎么添加,给你一个三个说说的部分代码的例子

    <div id="primary" class="content-area" style="">
        <main id="main" class="site-main" role="main">
            <div id="shuoshuo_content">
                <ul class="cbp_tmtimeline">
                    <li> <span class="shuoshuo_author_img"><img src="https://cdn.jsdelivr.net/gh/drew233/cdn/dreww.webp" class="avatar avatar-48" width="48" height="48"></span>
                        <a class="cbp_tmlabel" href="">
                            <p></p>
                            <p>第一个说说</p>
                            <p></p>
                            <p class="shuoshuo_time"><i class="fa fa-clock-o"></i>
                                2019年9月10日
                            </p>
                        </a>
                    </li>
                    <li> <span class="shuoshuo_author_img"><img src="https://cdn.jsdelivr.net/gh/drew233/cdn/dreww.webp" class="avatar avatar-48" width="48" height="48"></span>
                        <a class="cbp_tmlabel" href="">
                            <p></p>
                            <p>第一个说说</p>
                            <p></p>
                            <p class="shuoshuo_time"><i class="fa fa-clock-o"></i>
                                2019年9月10日
                            </p>
                        </a>
                    </li>
                    <li> <span class="shuoshuo_author_img"><img src="https://cdn.jsdelivr.net/gh/drew233/cdn/dreww.webp" class="avatar avatar-48" width="48" height="48"></span>
                        <a class="cbp_tmlabel" href="">
                            <p></p>
                            <p>第一个说说</p>
                            <p></p>
                            <p class="shuoshuo_time"><i class="fa fa-clock-o"></i>
                                2019年9月10日
                            </p>
                        </a>
                    </li>
                </ul>
            </div>
    </div>
    

    这里我还是挺希望大家可以留言评论的,因为点赞功能我加不上。。。这个源码很强的一点就是我试了好几个主题,它的兼容性都特别好,直接融入主题,毫无违和感的那种,还是舔一波原作者,太强了。

    效果图:


    我的说说界面传送门: Drew最帅