基于Memos 实现说说功能和首页说说轮播

博客增加基于Memos的说说页面。本文以Typecho博客主题Jasmine为例。

Memos安装

Docker安装Memos。

Docker compose安装：

version: "3.0"
services:
  memos:
    image: neosmemo/memos:latest
    container_name: memos
    volumes:
      - /root/docker_data/memos:/var/opt/memos
    ports:
      - 5230:5230

增加说说页面

适配Typecho主题Jasmine的说说页面模板。说说数据来自于Memos。

代码已开源在GitHub：

代码修改自:https://immmmm.com/

删除了部分功能：

回忆
搜索
设置
评论
分类
图片灯箱效果
调整了部分css样式。

如果想用原版的样式和功能，替换php文件中的js链接为原作者链接，并添加相关功能的js和html代码即可。

原作者教程见：https://immmmm.com/bb-by-memos/

博客主题文件夹根目录下新建page-memos.php文件，写入以下内容：

修改代码中的bbMemos中的部分变量。

<?php
/**
 * Memos
 *
 * @package custom
 */
if (!defined("__TYPECHO_ROOT_DIR__")) {
  exit();
}
?>
<!DOCTYPE html>
<html lang="zh">
<?php $this->need("header.php"); ?>

<body class="jasmine-body" data-prismjs-copy="点击复制" data-prismjs-copy-error="按Ctrl+C复制" data-prismjs-copy-success="内容已复制！">
  <div class="jasmine-container grid grid-cols-12">
    <!--左侧边栏-->
    <?php $this->need("component/sidebar-left.php"); ?>
    <div class="flex col-span-12 lg:col-span-8 flex-col lg:border-x-2 border-stone-100 dark:border-neutral-600 lg:pt-0 lg:px-6 pb-10 px-3">
      <?php $this->need("component/menu.php"); ?>
      <div class="flex flex-col gap-y-12">
        <div></div>
        <?php $this->need("component/post-title.php"); ?>
        
        <!-- 正文 -->
        <div class="markdown-body dark:!bg-[#161829] dark:!bg-[#0d1117] !text-neutral-900 dark:!text-gray-400" itemprop="articleBody">
            <div id="bber"></div>
                <script type="module" src="https://immmmm.com/emaction.js?v=230811"></script>
                <script src="https://fastly.jsdelivr.net/npm/marked/marked.min.js"></script>
                <script src="https://fastly.jsdelivr.net/gh/Tokinx/Lately/lately.min.js"></script>
                
                <style>
                    .mx-1.flex.flex-col .dark\:text-gray-400 {
                        display: none;
                }</style>
                
                <script type="text/javascript">
                  var bbMemos = {
                    memos : 'https://yourdomain.com/',//修改为自己部署 Memos 的网址，末尾有 / 斜杠
                    limit : '',//默认每次显示 10 条
                    creatorId:'1' ,//早期默认为 101 用户，新安装是 1； https://demo.usememos.com/u/101
                    domId: '',//默认为 bber
                  }
                </script>
                <script src="https://cdn.jsdelivr.net/gh/WShuai123/shuoshuo-page-for-typecho-theme-Jasmine@main/shuoshuo.js"></script>

        <!-- 正文结束 -->
        </div>
        <!--    评论区    -->
            <div>
             <?php $this->need("comments.php"); ?>
          </div>
      </div>
    </div>
    <div class="hidden lg:col-span-3 lg:block" id="sidebar-right">
      <?php $this->need("component/sidebar.php"); ?>
    </div>
  </div>
  <?php $this->need("footer.php"); ?>
</body>

</html>

打开Typecho后台---管理----独立页面----新增----右侧自定义模板----说说页面---自定标题和网址---保存
如果要在左侧菜单栏增加说说的菜单卡，在Typecho后台--设置外观的左边栏菜单中增加相关内容即可。

效果图：

演示站：https://blog.nice2cu.cc/memos.html

首页轮播

编辑主题文件夹下的index.php，增加一行代码。

<?php
/**
 * 专为博客类网站开发，简洁、美观、响应式的 Typecho 主题。<br/>
 * Github：<a href="https://github.com/liaocp666/Jasmine" target="_blank" title="Jasmine Github Repo">https://github.com/liaocp666/Jasmine</a>
 * Demo：<a href="https://www.liaocp.cn/" target="_blank" title="Jasmine Demo Website">https://www.liaocp.cn/</a>
 *
 * @package Jasmine
 * @author Kent Liao
 * @version 2.5.5
 * @link https://www.liaocp.cn/
 */
if (!defined("__TYPECHO_ROOT_DIR__")) {
  exit();
} ?>
<!DOCTYPE html>
<html lang="zh">
<?php $this->need("header.php"); ?>
<body class="jasmine-body">
<div class="jasmine-container grid grid-cols-12">
    <?php $this->need("component/sidebar-left.php"); ?>
    <div class="flex col-span-12 lg:col-span-8 flex-col lg:border-x-2 border-stone-100 dark:border-neutral-600 lg:pt-0 lg:px-6 pb-10 px-3">
        <?php $this->need("component/menu.php"); ?>
        
        <!--  增加下面这一行   -->
        <?php $this->need("component/memos_wrap.php"); ?>
        
        <?php if ($this->is("index") && $this->_currentPage == 1): ?>
            <?php $this->need("component/post-top.php"); ?>
        <?php endif; ?>
        <?php $this->need("component/post-item.php"); ?>
        <?php $this->need("component/paging.php"); ?>
    </div>
    <div class="hidden lg:col-span-3 lg:block" id="sidebar-right">
        <?php $this->need("component/sidebar.php"); ?>
    </div>
</div>
    <?php $this->need("footer.php"); ?>
</body>

</html>

在主题文件夹下的component文件夹下新建memos_wrap.php文件，写入以下内容：

更改jsonUrl的值。改为自己部署的Memos的地址，将creatorId的值改为memos用户的ID，limit的值改为获取的memos的条数。

<?php if (!defined("__TYPECHO_ROOT_DIR__")) {
    exit();
} ?>

<div id="header-memos"
    class="jasmine-primary-color hidden lg:block border-b border-stone-100 lg:py-5 bg-[#ffffffe6] dark:bg-[rgba(22,24,41,0.9)] dark:border-neutral-600 backdrop-blur">
    <span id='memos-t'>首页说说轮播加载中...</span>
    <script src="https://fastly.jsdelivr.net/gh/Tokinx/Lately/lately.min.js"></script>
    <script>
        // 改成自己的网址
        var jsonUrl = "https://****.***.***/api/v1/memos?filter=visibilities==['PUBLIC']&pageSize=10" +
            "&t=" +
            Date.parse(new Date());

        fetch(jsonUrl)
            .then((res) => res.json())
            .then((resdata) => {
                console.log(resdata.memos),
                    resultIndexMemos = new Array(resdata.memos.length);
                for (var i = 0; i < resdata.memos.length; i++) {
                    var talkTime = new Date(resdata.memos[i].createTime).toLocaleString();
                    var talkContent = resdata.memos[i].content;
                    var newtalkContent = talkContent
                        .replace(/```([\s\S]*?)```[\s]*/g, " <code>$1</code> ") //全局匹配代码块
                        .replace(/`([\s\S ]*?)`[\s]*/g, " <code>$1</code> ") //全局匹配内联代码块
                        .replace(/<iframe([\s\S ]*?)iframe>[\s]*/g, "📺")  //全局匹配视频
                        .replace(/\!\[[\s\S]*?\]\([\s\S]*?\)/g, "🌅")  //全局匹配图片
                        .replace(/\[[\s\S]*?\]\([\s\S]*?\)/g, "🔗")  //全局匹配连接
                        .replace(
                            /\bhttps?:\/\/(?!\S+(?:jpe?g|png|bmp|gif|webp|jfif|gif))\S+/g,
                            "🔗"
                        ); //全局匹配纯文本连接
                    if (newtalkContent.length > 100) {
                        newtalkContent = newtalkContent.substring(0, 100) + '...';
                    }
                    resultIndexMemos[i] = `<span class="datetime">${talkTime}</span>： <a href="https://blog.nice2cu.cc/memos.html">${newtalkContent}</a>`;
                }
            });


        // 滚动效果 
        var i = 0; 
        setInterval(function () {
            document.getElementById("memos-t").innerHTML = resultIndexMemos[i]; 
            window.Lately && Lately.init({ target: ".datetime" }); 
            i++; 
            if (i == resultIndexMemos.length) i = 0; 
        }, 4000);
    </script>
</div>

完成。效果图如博客首页上方所示。

目前只适配了桌面端的显示效果。