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

发布于 2023-09-10  5k 次阅读


本文于 2023年9月12日 2:42 更新,注意查看最新内容

前言

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

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

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

步骤

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)

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

Download

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

后话

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

参考

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

《wordpress添加自定义页面》

《在wordpress添加自制html页面》


这短短的一生,我们最终都会失去。