前言
之前看别的博客有说说的页面,也想给自己博客整一个,结果一搜教程,又是代码要改,又是数据库要改,就感觉很麻烦。
用某个大佬的话就是我不想为难我的小主机(笑死),直到我看到了杜老师的说说广场教程。
一瞬间,我又觉得自己可以了,于是说干就干,这里记录一下折腾教程,以备之后查阅。
步骤
1、在杜老师的说说广场注册一个账号:https://s.dusays.com/auth
当然你也可以自己部署,项目地址为 https://github.com/usememos/memos
2、在该贴下询问自己账号的ID:https://dusays.com/561/
杜老师原贴中的ID查看方法已失效,原贴见参考文章
3、在博客使用的主题下新建一个文件,命名格式为page-自定义内容.php
,例如:page-mood.php
。
博客使用的主题路径为:
博客根目录(是博客安装根目录,不是服务器根目录)/wp-content/themes / 使用主题文件夹(博客本身存在安装多个主题及同个主题不同版本时,需要注意自己当前使用的主题)。
4、复制粘贴如下代码:
<?php /** Template Name: mood */ get_header(); ?> <div class="container"> <p>共发表了 <span id="total">0</span> 条 Memos 说说!</p> </div> <script> function getTotal() { var totalUrl = "https://s.dusays.com/api/v1/memo/stats?creatorId=1"; fetch(totalUrl).then(res => res.json()).then(resdata => { if (resdata) { var memosCount = document.getElementById('total'); memosCount.innerHTML = resdata.length; } }).catch(err => { }); }; window.onload = getTotal(); </script> <div id="bber"></div> <script> var bbMemos = { memos : 'https://s.dusays.com/', limit : '10', creatorId:'1' , domId: '#bber', } </script> <script src="https://npm.onmicrosoft.cn/penndu@4.0.9/memos.js"></script> <script src="https://npm.onmicrosoft.cn/marked/marked.min.js"></script> <script src="https://jsd.onmicrosoft.cn/gh/Tokinx/ViewImage/view-image.min.js"></script> <script src="https://jsd.onmicrosoft.cn/gh/Tokinx/Lately/lately.min.js"></script> <?php get_footer();?>
PS:limit为展示数量限制,creatorId对应用户ID(上述代码有两处ID需要修改),修改后WordPress用户可以直接开箱即用。
5、打开Wordpress后台,新建页面,选择对应的模板文件发布即可。
如果使用其他博客程序或者自建博客可以参考下列代码:
JavaScript部分(这里引用静态资源均来自渺软公益 CDN):
<script> var bbMemos = { memos: 'https://s.dusays.com/', limit: '10', creatorId: '1', domId: '#bber', } </script> <script src="https://npm.onmicrosoft.cn/penndu@4.0.9/memos.js"></script> <script src="https://npm.onmicrosoft.cn/marked/marked.min.js"></script> <script src="https://jsd.onmicrosoft.cn/gh/Tokinx/ViewImage/view-image.min.js"></script> <script src="https://jsd.onmicrosoft.cn/gh/Tokinx/Lately/lately.min.js"></script>
HTML部分
<div id="bber"></div>
说说统计(因杜老师代码异常,使用了ChatGPT 3.5进行了修改):
<div class="container"> <p>共发表了 <span id="total">0</span> 条 Memos 说说!</p> </div> <script> function getTotal() { var totalUrl = "https://s.dusays.com/api/v1/memo/stats?creatorId=1"; fetch(totalUrl).then(res => res.json()).then(resdata => { if (resdata) { var memosCount = document.getElementById('total'); memosCount.innerHTML = resdata.length; } }).catch(err => { }); }; window.onload = getTotal(); </script>
演示
发现在国产浏览(小米浏览器、夸克)中打开演示页面,说说时间会出现异常,Chrome系(狐猴浏览器)正常显示。
具体问题未知,有能力可以排查一下,然后评论区告知一下,2333
下载
安卓端(2.6M)
这个大小四舍五入可以忽略不计,但使用起来体验却丝毫不差,就是不支持离线使用,这一点还满伤的。
Download技巧:目前通过上述代码展示说说页面时,如说说内添加的话题后未有空格,不会对添加话题的文字应用话题文字的样式,在发布说说携带话题时可以注意一下。
后话
目前使用人数不多,感觉探索页面里面有一半是我的口水话,逃~