此文章介绍借助 Memos 在 WordPress 搭建博客空间的方法，参考多篇博文。含安装 Memos 后端的 Docker 部署等，教前端部署、CSS 与 JS 文件部署，及加入 Artalk 评论，深度适配子比主题。

前几日看见杜老师搭建的说说广场，感觉很不错，便开始想着自己弄个类似于空间的东西。先是看了杜老师这篇博文《使用 Memos 搭建时光机教程》，自己搭建也成功了，就是杜老师写的 CSS 略显粗糙。我便又百度了一下，找到了大大的小蜗牛的博客写的几篇博文，魔改并内嵌WordPress页面。

此文参考的文章会依次写在每个标题的开头，请尊重作者原创。

目前尚存问题

既然是魔改，那总会带来一些问题，这里先列举几个发现的问题，后面会慢慢处理（能力有限，理解一哈）

手机端的深色模式有时显示不正常
Artalk 评论PC/Mobile 端深色模式显示不正常

目前集成功能

内嵌WordPress页面
适配PC端主题深色模式
前端生成类似空间的时间线
前端后端均集成Artalk评论

注意：此魔改深度适配子比主题，其他 WordPress 主题适配性未知。例如：主题自带图片灯箱功能，已将原本自带灯箱功能删除等。

魔改删减功能

图片灯箱功能
解析各大视频音乐链接功能
中英混编排版功能

完整教程及部分魔改说明

安装 Memos 后端

参考教程：

来自“木木木木木”的博客，文章《Hi，Memos》
来自“大大的小蜗牛”的博客，文章《Memos 简介》

Docker 部署

此部署方式，数据库位于 ~/.memos ，注意备份数据库。

docker run -d \
  --init \
  --name memos \
  --publish 5230:5230 \
  --volume ~/.memos/:/var/opt/memos \
  ghcr.io/usememos/memos:latest

Docker-Compose.yml 部署

推荐使用此部署方式，方便更新和备份。其中使用 ${PWD} 指定路径为当前文件夹。

version: "3.0"
services:
  memos:
    image: neosmemo/memos:latest
    container_name: memos
    volumes:
      - ${PWD}/.memos/:/var/opt/memos
    ports:
      - 5230:5230

注意：ports: 冒号前面为宿主机映射端口，可以自定义，但冒号后是容器端口，请勿改动。

宝塔为例：新建网站，新建 yml，开终端，丢代码。

1	docker-compose up -d

版本更新也是 一行代码 搞定：

1	docker-compose pull && docker-compose up -d --force-recreate

当然，也可以官方的一句拉起 Docker。之后更新需要先去 docker 管理器里删除镜像，再输入下句拉起服务。

1	docker run -d --name memos -p 5230:5230 -v ${PWD}/.memos/:/var/opt/memos neosmemo/memos:latest

注意不定时备份网址目录下的 .memos 文件夹，所有数据都在这。

Nginx 反向代理及 SSL 设置

反向代理，如图设置。注意：端口号填写自己定义的，默认为5230

SSL 设置

填入所需的 KEY 和 PEM 即可

各类部署备份数据的方法

需要备份的数据是此目录下的 memos_prod.db 文件，是一个 SQLite 数据库文件，Memos 的所有设置、用户信息、附件和 Memos 都保存在这个文件中。
Docker 部署：数据库位于 /home/username 下的 .memos 目录，是一个隐藏目录。
Docker-Compose部署：数据库位于所设置的路径。

WordPress 前端部署

参考教程：来自“大大的小蜗牛”的博客，文章《Memos API 调用渲染页面》

1.创建一个新的页面

2.插入模块：自定义HTML

3.放入以下代码：（代码中很多地方需要改成自己的数据）

<!DOCTYPE html>
<html lang="zh-CN">
<head_memos>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="referrer" content="no-referrer">
    <base href="#填入css和js文件所在根目录，注意路径与下面文件路径对应，只需填写前部分路径#" >
    <link rel="icon" href="img/logo.webp" type="image/*" />
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href="#填入Artalk服务端地址#/dist/Artalk.css" rel="stylesheet">
</head_memos>
<body>
    <section id="main_memos" class="container">
        <h1_memos>#填入H1大标题#</h1_memos>
        <blockquote_memos>
            <p></p>
            <p>#填入H1大标题下需显示内容#</p>
        </blockquote_memos>
        <div class="total_memos">总计 ：<span id="total">0</span> 条 🎉</div>
        </blockquote_memos>
        <div id="memos" class="memos">
            <!-- Memos Container -->
        </div>
    </section>
    <footer_memos class="markdown-body footer">
        <p>Copyright @2023 All Rights Reserved.</p>
    </footer_memos>
    <!-- Your Memos API -->
    <script type="text/javascript">
        var memos = {
            host: '#Memos服务地址，最后需要加"/"#',  // Your Memos instance.
            limit: '8',  // Pagination to show.
            creatorId: '1',  // The old instance is 101, and the new instance is 1. 
            domId: '#memos',  // Default #memos.
        }
    </script>
    <script type="text/javascript" src="js/lazyload.min.js"></script>
    <script type="text/javascript" src="js/marked.min.js"></script>
    <script type="text/javascript" src="js/moment.min.js"></script>
    <script type="text/javascript" src="js/moment.twitter.js"></script>
    <script type="text/javascript" src="js/highlight.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="#填入Artalk服务端地址#/dist/Artalk.js"></script>
<script>
    window.onload = function() {
        Artalk.loadCountWidget({
            server: '#填入Artalk服务端地址#',
            site: '#Artalk站点名称#',
            darkMode: 'auto',
            pvEl: '#ArtalkPV',
            countEl: '#ArtalkCount',
        });
    }
</script>
    <script>hljs.highlightAll();</script>
  </body>
</html>

注意：需改动的地方，已经用 # 将内容替换，改为自己的数据即可

其他 CSS 与 JS 文件部署

这些文件下载完后，上传服务器找个目录保存一下就好。文件下载：点击下载密码：catchyxc.com

需自定义修改文件：/js/main.js 需修改部分内容（代码中行号大致相同）

这个地方无需改动，前端HTML中已经设置，改动此处无效

名称和服务端地址改为自己的数据

改为自己的 Artalk 评论服务地址

Memos 后端加入 Artalk 评论

参考教程：参考教程：来自“大大的小蜗牛”的博客，文章《Memos 配置 Artalk 评论系统》

自定义样式

a.time-text:after { content: ' 评论 💬 '; }
.atk-main-editor { margin-top: 20px; }
.dark .artalk{
  --at-color-font: #fff;
  --at-color-deep: #e7e7e7;
  --at-color-sub: #e7e7e7;
  --at-color-grey: #fff;
  --at-color-meta: #fff;
  --at-color-border: #2d3235;
  --at-color-light: #687a86;
  --at-color-bg: #1e2224;
  --at-color-bg-transl: rgba(30, 34, 36, .95);
  --at-color-bg-grey: #46494e;
  --at-color-bg-grey-transl: rgba(8, 8, 8, .95);
  --at-color-bg-light: rgba(29, 161, 242, .1);
  --at-color-main: #0083ff;
  --at-color-red: #ff5652;
  --at-color-pink: #fa5a57;
  --at-color-yellow: #ff7c37;
  --at-color-green: #4caf50;
  --at-color-gradient: linear-gradient(180deg, transparent, rgba(30, 34, 36, 1))
}

自定义脚本

// Artalk comments
// 用 JS 向页面中插入 JS
function addArtalkJS() { 
    var memosArtalk = document.createElement("script");
    memosArtalk.src = `https://cdn.staticfile.org/artalk/2.5.5/Artalk.min.js`;
    var artakPos = document.getElementsByTagName("script")[0];
    artakPos.parentNode.insertBefore(memosArtalk, artakPos);
};
// div
function startArtalk() {
    start = setInterval(function(){
        var artalkDom = document.getElementById('Comments') || '';
        var memoAt = document.querySelector('.memo-wrapper') || '';
        var memoLoading = document.querySelector('.action-button-container') || '';
        var memoLoadingA = document.querySelector('.action-button-container a') || '';
        if(window.location.href.replace(/^.*\/(m)\/.*$/,'$1') == "m" && memoLoadingA){
        memoLoading.innerHTML = "评论加载中……"
        }
        if(window.location.href.replace(/^.*\/(m)\/.*$/,'$1') == "m" && !artalkDom){
            addArtalkJS()
            if(memoAt){
                clearInterval(start)
                var cssLink = document.createElement("link");
                cssLink.rel = "stylesheet";
                cssLink.href = "https://cdn.staticfile.org/artalk/2.5.5/Artalk.min.css";
                document.head.appendChild(cssLink);
                memoAt.insertAdjacentHTML('afterend', '<div id="Comments"></div>');
                setTimeout(function() {
                    Artalk.init({
                        el: '#Comments',
                        pageKey: location.pathname,
                        pageTitle: document.title,
                        server: 'https://artalk.at.your.server.com/',
                        site: 'memos',
                        darkMode: 'auto'
                    });
                    Artalk.on('list-loaded', function() {
                        // console.log('评论加载完成');
                        memoLoading.innerHTML = ''
                        startArtalk();
                    });
                }, 1000);
            }
        }
        //console.log(window.location.href);
    }, 1000)
}
startArtalk();

注意：JS 代码中Artalk 评论服务地址需要替换为自己的。

WordPress 借助 Memos 搭建博客空间