前几日看见杜老师搭建的说说广场，感觉很不错，便开始想着自己弄个类似于空间的东西。先是看了杜老师这篇博文《使用 Memos 搭建时光机教程》，自己搭建也成功了，就是杜老师写的 CSS 略显粗糙。我便又百度了一下，找到了大大的小蜗牛的博客写的几篇博文，魔改并内嵌WordPress页面。
此文参考的文章会依次写在每个标题的开头，请尊重作者原创。
目前尚存问题
既然是魔改，那总会带来一些问题，这里先列举几个发现的问题，后面会慢慢处理（能力有限，理解一哈）
- 手机端的深色模式有时显示不正常
- Artalk 评论PC/Mobile 端深色模式显示不正常
目前集成功能
- 内嵌WordPress页面
- 适配PC端主题深色模式
- 前端生成类似空间的时间线（具体效果：点击跳转）
- 前端后端均集成Artalk评论
注意：此魔改深度适配子比主题，其他 WordPress 主题适配性未知。例如：主题自带图片灯箱功能，已将原本自带灯箱功能删除等。
魔改删减功能
- 图片灯箱功能
- 解析各大视频音乐链接功能
- 中英混编排版功能
完整教程及部分魔改说明
安装 Memos 后端
参考教程：
1. 来自“木木木木木”的博客，文章《Hi，Memos》
2. 来自“大大的小蜗牛”的博客，文章《Memos 简介》
Docker 部署
此部署方式，数据库位于 ~/.memos ，注意备份数据库。
docker run -d \
--init \
--name memos \
--publish 5230:5230 \
--volume ~/.memos/:/var/opt/memos \
ghcr.io/usememos/memos:latestDocker-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，开终端，丢代码。
docker-compose up -d
- 版本更新也是 一行代码 搞定：
docker-compose pull && docker-compose up -d --force-recreate- 当然，也可以官方的一句拉起 Docker。之后更新需要先去 docker 管理器里删除镜像，再输入下句拉起服务。
docker run -d --name memos -p 5230:5230 -v ${PWD}/.memos/:/var/opt/memos neosmemo/memos:latest
- 注意不定时备份网址目录下的
.memos文件夹，所有数据都在这。
Nginx 反向代理及 SSL 设置
- 反向代理，如图设置。注意：端口号填写自己定义的，默认为5230
![图片[1] - WordPress 借助 Memos 搭建博客空间 - 云晓晨CatchYXC](https://cdn.catchyxc.com/wp-content/uploads/aa09d3e63720240616001251.webp)
- SSL 设置
填入所需的 KEY 和 PEM 即可
![图片[2] - WordPress 借助 Memos 搭建博客空间 - 云晓晨CatchYXC](https://cdn.catchyxc.com/wp-content/uploads/e045f31e9920240616001250.webp)
各类部署备份数据的方法
- 需要备份的数据是此目录下的
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需修改部分内容（代码中行号大致相同）
1. 这个地方无需改动，前端HTML中已经设置，改动此处无效
![图片[3] - WordPress 借助 Memos 搭建博客空间 - 云晓晨CatchYXC](https://cdn.catchyxc.com/wp-content/uploads/811f58072a20240616001256.webp)
2. 名称和服务端地址改为自己的数据
![图片[4] - WordPress 借助 Memos 搭建博客空间 - 云晓晨CatchYXC](https://cdn.catchyxc.com/wp-content/uploads/1263a6d99720240616001255.webp)
3. 改为自己的 Artalk 评论服务地址
![图片[5] - WordPress 借助 Memos 搭建博客空间 - 云晓晨CatchYXC](https://cdn.catchyxc.com/wp-content/uploads/8b07c8d1db20240616001254.webp)
Memos 后端加入 Artalk 评论
参考教程：参考教程：来自“大大的小蜗牛”的博客，文章《Memos 配置 Artalk 评论系统》
自定义样式
![图片[6] - WordPress 借助 Memos 搭建博客空间 - 云晓晨CatchYXC](https://cdn.catchyxc.com/wp-content/uploads/270273644120240616001253.webp)
登录 Memos 应用后台，在 设置 系统 自定义样式 中添加 CSS 代码：
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))
}
自定义脚本
登录 Memos 应用后台，在 设置 系统 自定义脚本 中添加 JS 代码：
// 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 评论服务地址需要替换为自己的。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
- 最新
- 最热
只看作者