随时随地发心情：给博客添加一个说说页面

前言

之前看别的博客有说说的页面，也想给自己博客整一个，结果一搜教程，又是代码要改，又是数据库要改，就感觉很麻烦。

用某个大佬的话就是我不想为难我的小主机（笑死），直到我看到了杜老师的说说广场教程。

一瞬间，我又觉得自己可以了，于是说干就干，这里记录一下折腾教程，以备之后查阅。

步骤

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>

演示

https://lkblog.net/mood/

发现在国产浏览（小米浏览器、夸克）中打开演示页面，说说时间会出现异常，Chrome系（狐猴浏览器）正常显示。

具体问题未知，有能力可以排查一下，然后评论区告知一下，2333

下载

安卓端（2.6M）

这个大小四舍五入可以忽略不计，但使用起来体验却丝毫不差，就是不支持离线使用，这一点还满伤的。

技巧：目前通过上述代码展示说说页面时，如说说内添加的话题后未有空格，不会对添加话题的文字应用话题文字的样式，在发布说说携带话题时可以注意一下。

后话

目前使用人数不多，感觉探索页面里面有一半是我的口水话，逃~

参考

《使用 Memos 搭建时光机教程》

《wordpress添加自定义页面》

《在wordpress添加自制html页面》