--- title: 配置说说页面 tags: 网站 cover: https://pic.biss.click/image/0f3b8150-af77-426f-afc1-36df5ab27b36.webp categories: 建站手札 series: webcustom abbrlink: ad244066 summary: >- 这段文字看起来是一个部署教程，主要是关于如何在服务器上部署一个名为“Moments”的应用，并将其与网站集成。以下是对这段文字的概括： 1. 介绍了硬件和软件的要求，包括服务器、域名、Docker环境和反向代理工具（如Nginx）。 2. 提供了Moments应用的部署方法，包括使用docker-compose进行部署和配置Nginx反向代理。 3. 介绍了如何在前端集成Moments应用，包括引入必要的CSS和JS文件，以及创建一个新的页面来显示Moments的内容。 需要注意的是，这段文字中的一些链接和代码可能已经过时或者不适用于所有场景，建议在实际操作时参考最新的官方 date: 2025-08-10 08:25:39 --- 又开始折腾啦，这次把说说页面加上，改用moments项目的api {% link Moments 极简朋友圈,githun@kingwrcy,https://github.com/kingwrcy/moments %} # 前期要求 ## 硬件要求 1. 一台服务器 2. 一个可自主解析的域名 ## 软件要求 1. docker环境 2. 反向代理工具（本文以Nginx为例） # 介绍与展示 这里先给大家展示一下最终的效果，注意该教程可能仅适合部分主题，如果出现主题不适配的情况请自行适配，这里以本站主题 `Hexo-theme-butterfly`为基础进行修改： 1. 说说页面： {% link 我的说说,胡言乱语ing。。。,https://blog.biss.click %} 2. 轻量朋友圈 {% link 朋友圈,依旧胡言乱语,https://mm.biss.blog %} 3. 功能说明 Moments作为一个轻量朋友圈，其功能都是分享上的部分，如下所示： * 分享：链接，图片，音乐，视频，书籍，电影 * 信息：自定义位置，自定义标签，是否公开 * 页面：Markdown渲染，编辑说说，删除说说，暗夜模式，自定义图标，信息，CSS及JS代码 * 功能：S3存储，文件查询，多用户注册，点赞，评论，API 简单介绍完毕，下面我就来教大家如何进行部署！ # 部署教程 ## Moments部署 ### Compose部署 官方给予了很完善的教程，这里我仅仅简单介绍一下 `docker-compose`部署的方式，如果你想以源码等其他方式进行部署，请查看文章开头部分的 `github`地址进行查阅。 首先，在服务器任意位置创建文件：`docker-compose.yaml`，填入以下内容： ```bash version: '3' services: moments: image: kingwrcy/moments:latest container_name: moments restart: always environment: port: 3000 JWT_KEY: "自己随便生成点字符串" ENABLE_SWAGGER: "true" CORS_ORIGIN: # 填写跨域域名 ports: - "3000:3000" # 自行换端口，换前面的，后面的3000不要动 volumes: - ./opt/data:/app/data # - ./data/localtime:/etc/localtime:ro # - ./data/timezone:/etc/timezone:ro ``` 注意文件，我将 `/opt/`文件夹(当然可以改成其他的)下的 `/data`文件夹挂载了进去，数据都会在里面，迁移时仅需整体打包到新服务器即可。然后执行以下两条命令，后续需要升级也仅需要执行这两个命令： ```bash docker-compose pull docker-compose up -d ``` 如果网络环境不佳，可尝试替换 `docker`源，可以自行查找 通过反向代理将其添加到某个域名中，这里就不再多说了，各大面板都有极其完备的反代文档。 ### Nginx修改 `Moments`在跨域 `docker-compose`文件中可以配置，所以不必进行此步 网站目录 返回到上一级目录，也就是域名名称的文件夹下，找到 `Proxy`文件夹，编辑里面的 `root.conf`文件为如下内容： ```bash #代理配置 location / { # 跨域设置 add_header Access-Control-Allow-Origin *; # 允许所有域名访问，你也可以指定具体域名 add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS'; # 允许的 HTTP 方法 add_header Access-Control-Allow-Headers 'Origin, X-Requested-With, Content-Type, Accept, Authorization'; # 允许的请求头 # 处理 OPTIONS 请求，预检请求 if ($request_method = 'OPTIONS') { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS'; add_header Access-Control-Allow-Headers 'Origin, X-Requested-With, Content-Type, Accept, Authorization'; add_header Access-Control-Max-Age 1728000; add_header Content-Type 'text/plain charset=UTF-8'; add_header Content-Length 0; return 204; } # 原代理设置 proxy_pass http://127.0.0.1:3003; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $http_connection; proxy_set_header X-Forwarded-Proto $scheme; proxy_http_version 1.1; add_header X-Cache $upstream_cache_status; add_header Cache-Control no-cache; proxy_ssl_server_name off; proxy_ssl_name $proxy_host; add_header Strict-Transport-Security "max-age=31536000"; } ``` 下面是原代理设置，可以仅仅复制上面部分内容，下面保持不变，注意端口不要出问题。 ## 前端实现 由于该项目利用了MetingJS和APlayer，所以请提前引入这两个包，Hexo-theme-butterfly中虽然有内置的两个包，仅需修改配置文件即可开启，但是版本比较老，这里我建议自行引入最新版本，在配置中引入以下文件，注意css和js应该是分开引入的： ```bash ``` 新建页面shuoshuo，在文件内写入一下内容： ```bash --- title: 日常哔哔，键盘侠的日常吐槽 aside: false ---
- 只展示最近30条说说 -
``` 其中的JS文件地址清自行修改，放在主题目录 `/script/`目录，自行创建，并写入以下内容： ```js function renderTalks() { const talkContainer = document.querySelector('#talk'); const domain = 'https://mm.biss.click'; if (!talkContainer) return; talkContainer.innerHTML = ''; const generateIconSVG = () => { return ``; } const waterfall = (a) => { function b(a, b) { var c = window.getComputedStyle(b); return parseFloat(c["margin" + a]) || 0 } function c(a) { return a + "px" } function d(a) { return parseFloat(a.style.top) } function e(a) { return parseFloat(a.style.left) } function f(a) { return a.clientWidth } function g(a) { return a.clientHeight } function h(a) { return d(a) + g(a) + b("Bottom", a) } function i(a) { return e(a) + f(a) + b("Right", a) } function j(a) { a = a.sort(function (a, b) { return h(a) === h(b) ? e(b) - e(a) : h(b) - h(a) }) } function k(b) { f(a) != t && (b.target.removeEventListener(b.type, arguments.callee), waterfall(a)) } "string" == typeof a && (a = document.querySelector(a)); var l = [].map.call(a.children, function (a) { return a.style.position = "absolute", a }); a.style.position = "relative"; var m = []; l.length && (l[0].style.top = "0px", l[0].style.left = c(b("Left", l[0])), m.push(l[0])); for (var n = 1; n < l.length; n++) { var o = l[n - 1], p = l[n], q = i(o) + f(p) <= f(a); if (!q) break; p.style.top = o.style.top, p.style.left = c(i(o) + b("Left", p)), m.push(p) } for (; n < l.length; n++) { j(m); var p = l[n], r = m.pop(); p.style.top = c(h(r) + b("Top", p)), p.style.left = c(e(r)), m.push(p) } j(m); var s = m[0]; a.style.height = c(h(s) + b("Bottom", s)); var t = f(a); window.addEventListener ? window.addEventListener("resize", k) : document.body.onresize = k }; const fetchAndRenderTalks = () => { const url = 'https://mm.biss.click/api/memo/list'; const cacheKey = 'talksCache'; const cacheTimeKey = 'talksCacheTime'; const cacheDuration = 30 * 60 * 1000; // 半个小时 (30 分钟) const cachedData = localStorage.getItem(cacheKey); const cachedTime = localStorage.getItem(cacheTimeKey); const currentTime = new Date().getTime(); // 判断缓存是否有效 if (cachedData && cachedTime && (currentTime - cachedTime < cacheDuration)) { const data = JSON.parse(cachedData); renderTalks(data); // 使用缓存渲染数据 } else { if (talkContainer) { talkContainer.innerHTML = ''; fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ size: 30 }) }) .then(res => res.json()) .then(data => { if (data.code === 0 && data.data && Array.isArray(data.data.list)) { // 缓存数据 localStorage.setItem(cacheKey, JSON.stringify(data.data.list)); localStorage.setItem(cacheTimeKey, currentTime.toString()); renderTalks(data.data.list); // 渲染数据 } }) .catch(error => { console.error('Error fetching data:', error); }); } } // 渲染函数 function renderTalks(list) { // 确保 data 是一个数组 if (Array.isArray(list)) { let items = list.map(item => formatTalk(item, url)); items.forEach(item => talkContainer.appendChild(generateTalkElement(item))); waterfall('#talk'); } else { console.error('Data is not an array:', list); } } }; const formatTalk = (item, url) => { let date = formatTime(new Date(item.createdAt).toString()); let content = item.content; let imgs = item.imgs ? item.imgs.split(',') : []; let text = content; content = text.replace(/\[(.*?)\]\((.*?)\)/g, `@$1`) .replace(/- \[ \]/g, '⚪') .replace(/- \[x\]/g, '⚫'); // 保留换行符，转换 \n 为
content = content.replace(/\n/g, '
'); // 将content用一个类包裹，便于后续处理 content = `
${content}
`; if (imgs.length > 0) { const imgDiv = document.createElement('div'); imgDiv.className = 'zone_imgbox'; imgs.forEach(e => { const imgLink = document.createElement('a'); const imgUrl = domain + e; imgLink.href = imgUrl; imgLink.setAttribute('data-fancybox', 'gallery'); imgLink.className = 'fancybox'; imgLink.setAttribute('data-thumb', e); const imgTag = document.createElement('img'); imgTag.src = domain + e; imgLink.appendChild(imgTag); imgDiv.appendChild(imgLink); }); content += imgDiv.outerHTML; } // 外链分享功能 if (item.externalUrl) { const externalUrl = item.externalUrl; const externalTitle = item.externalTitle; const externalFavicon = item.externalFavicon; const externalContainer = `
${externalTitle}
点击跳转
`; content += externalContainer; } const ext = JSON.parse(item.ext || '{}'); if (ext.music && ext.music.id) { const music = ext.music; const musicUrl = music.api.replace(':server', music.server) .replace(':type', music.type) .replace(':id', music.id); content += ` `; } if (ext.doubanMovie && ext.doubanMovie.id) { const doubanMovie = ext.doubanMovie; const doubanMovieUrl = doubanMovie.url; const doubanTitle = doubanMovie.title; // const doubanDesc = doubanMovie.desc || '暂无描述'; const doubanImage = doubanMovie.image; const doubanDirector = doubanMovie.director || '未知导演'; const doubanRating = doubanMovie.rating || '暂无评分'; // const doubanReleaseDate = doubanMovie.releaseDate || '未知上映时间'; // const doubanActors = doubanMovie.actors || '未知演员'; const doubanRuntime = doubanMovie.runtime || '未知时长'; content += `
电影名: ${doubanTitle}
导演: ${doubanDirector}
评分: ${doubanRating}
时长: ${doubanRuntime}
 `; } if (ext.doubanBook && ext.doubanBook.id) { const doubanBook = ext.doubanBook; const bookUrl = doubanBook.url; const bookTitle = doubanBook.title; // const bookDesc = doubanBook.desc; const bookImage = doubanBook.image; const bookAuthor = doubanBook.author; const bookRating = doubanBook.rating; const bookPubDate = doubanBook.pubDate; const bookTemplate = `
书名: ${bookTitle}
作者: ${bookAuthor}
出版年份: ${bookPubDate}
评分: ${bookRating}
`; content += bookTemplate; } if (ext.video && ext.video.type) { const videoType = ext.video.type; const videoUrl = ext.video.value; if (videoType === 'bilibili') { // Bilibili 视频模板 // 从形如https://www.bilibili.com/video/BV1VGAPeAEMQ/?vd_source=91b3158d27d98ff41f842508c3794a13 的链接中提取视频 BV1VGAPeAEMQ const biliTemplate = `
`; // 将模板插入到 DOM 中 content += biliTemplate; } else if (videoType === 'youtube') { // YouTube 视频模板 // 从形如https://youtu.be/2V6lvCUPT8I?si=DVhUas6l6qlAr6Ru的链接中提取视频 ID2V6lvCUPT8I const youtubeTemplate = `
`; // 将模板插入到 DOM 中 content += youtubeTemplate; } } return { content: content, user: item.user.nickname || '匿名', avatar: item.user.avatarUrl || 'https://p.liiiu.cn/i/2024/03/29/66061417537af.png', date: date, location: item.location || '山西', tags: item.tags ? item.tags.split(',').filter(tag => tag.trim() !== '') : ['无标签'], text: content.replace(/\[(.*?)\]\((.*?)\)/g, '[链接]' + `${imgs.length ? '[图片]' : ''}`) }; }; const generateTalkElement = (item) => { const talkItem = document.createElement('div'); talkItem.className = 'talk_item'; const talkMeta = document.createElement('div'); talkMeta.className = 'talk_meta'; const avatar = document.createElement('img'); avatar.className = 'no-lightbox avatar'; avatar.src = item.avatar; const info = document.createElement('div'); info.className = 'info'; const talkNick = document.createElement('span'); talkNick.className = 'talk_nick'; talkNick.innerHTML = `${item.user} ${generateIconSVG()}`; const talkDate = document.createElement('span'); talkDate.className = 'talk_date'; talkDate.textContent = item.date; const talkContent = document.createElement('div'); talkContent.className = 'talk_content'; talkContent.innerHTML = item.content; const talkBottom = document.createElement('div'); talkBottom.className = 'talk_bottom'; const TagContainer = document.createElement('div'); const talkTag = document.createElement('span'); talkTag.className = 'talk_tag'; talkTag.textContent = `🏷️${item.tags}`; const locationTag = document.createElement('span'); locationTag.className = 'location_tag'; locationTag.textContent = `🌍${item.location}`; TagContainer.appendChild(talkTag); TagContainer.appendChild(locationTag); const commentLink = document.createElement('a'); commentLink.href = 'javascript:;'; commentLink.onclick = () => goComment(item.text); const commentIcon = document.createElement('span'); commentIcon.className = 'icon'; const commentIconInner = document.createElement('i'); commentIconInner.className = 'fa-solid fa-message fa-fw'; commentIcon.appendChild(commentIconInner); commentLink.appendChild(commentIcon); talkMeta.appendChild(avatar); info.appendChild(talkNick); info.appendChild(talkDate); talkMeta.appendChild(info); talkItem.appendChild(talkMeta); talkItem.appendChild(talkContent); talkBottom.appendChild(TagContainer); talkBottom.appendChild(commentLink); talkItem.appendChild(talkBottom); return talkItem; }; const goComment = (e) => { const match = e.match(/
([\s\S]*?)<\/div>/); const textContent = match ? match[1] : ""; const n = document.querySelector(".atk-textarea"); n.value = `> ${textContent}\n\n`; n.focus(); btf.snackbarShow("已为您引用该说说，不删除空格效果更佳"); // const n = document.querySelector(".atk-textarea"); // n.value = `> ${e}\n\n`; // n.focus(); // btf.snackbarShow("已为您引用该说说，不删除空格效果更佳"); }; const formatTime = (time) => { const d = new Date(time); const ls = [ d.getFullYear(), d.getMonth() + 1, d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds(), ]; const r = ls.map((a) => (a.toString().length === 1 ? '0' + a : a)); return `${r[0]}-${r[1]}-${r[2]} ${r[3]}:${r[4]}`; }; fetchAndRenderTalks(); } renderTalks(); // function whenDOMReady() { // const talkContainer = document.querySelector('#talk'); // talkContainer.innerHTML = ''; // fetchAndRenderTalks(); // } // whenDOMReady(); // document.addEventListener("pjax:complete", whenDOMReady); ``` 自行修改js文件中的Moments地址为你的地址，在文件中，有一个gocomment函数，实现的是获取卡片中的文本内容，如果如果出现不匹配的情况，请自行修改一下类名，这里我匹配的是artalk的输入框。在这里我把代码做了修改，因为我不想使用s3，结果导致说说图片无法加载。。。 修改历程：日后再写 然后引入样式文件，这个文件可以在配置文件中引用，也可以在页面文件中类似于shuoshuo.js一样引用，样式内容如下： ```css :root { --liushen-card-bg: #fff; --liushen-card-border: 1px solid #e3e8f7; --card-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.09); --card-hover-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.2); --liushen-card-secondbg: #f1f3f8; --liushen-button-hover-bg: #2679cc; --liushen-text: #4c4948; --liushen-button-bg: #f1f3f8; --liushen-fancybox-bg: rgba(255,255,255,0.5); } :root, [data-theme=dark] { --liushen-card-bg: #181818; --liushen-card-secondbg: #30343f; --liushen-card-border: 1px solid #42444a; --card-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.09); --card-hover-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.2); --liushen-button-bg: #30343f; --liushen-button-hover-bg: #2679cc; --liushen-text: rgba(255,255,255,0.702); --liushen-fancybox-bg: rgba(0,0,0,0.5); } /* 卡片初始化 */ #talk .talk_item { width: calc(33.333% - 6px); background: var(--liushen-card-bg); border: var(--liushen-card-border); box-shadow: var(--card-box-shadow); transition: box-shadow .3s ease-in-out; border-radius: 12px; display: flex; flex-direction: column; padding: 20px; margin-bottom: 9px; margin-right: 9px; } #talk .talk_item:hover { box-shadow: var(--card-hover-box-shadow); } @media (max-width: 900px) { #talk .talk_item { width: calc(50% - 5px); } } @media (max-width: 450px) { #talk .talk_item { width: calc(100%); } } #talk{ position: relative; width: 100%; box-sizing: border-box; } #talk .talk_meta .avatar { margin: 0 !important; width: 60px; height: 60px; border-radius: 12px; } #talk .talk_bottom, #talk .talk_meta { display: flex; align-items: center; } #talk .talk_meta { display: flex; align-items: center; width: 100%; padding-bottom: 10px; border-bottom: 1px dashed grey; /* 添加灰色虚线边框 */ } #talk .talk_bottom { margin-top: 15px; padding-top: 10px; border-top: 1px dashed grey; /* 添加灰色虚线边框 */ justify-content: space-between; } #talk .talk_meta .info { display: flex; flex-direction: column; margin-left: 10px; } #talk .talk_meta .info .talk_nick { color: #6dbdc3; font-size: 1.2rem; } #talk .talk_meta .info svg.is-badge.icon { width: 15px; padding-top: 3px; } #talk .talk_meta .info span.talk_date { opacity: .6; } #talk .talk_item .talk_content { margin-top: 10px; } #talk .talk_item .talk_content .zone_imgbox { display: flex; flex-wrap: wrap; --w: calc(25% - 8px); gap: 10px; margin-top: 10px; } #talk .talk_item .talk_content .zone_imgbox a { display: block; border-radius: 12px; width: var(--w); aspect-ratio: 1/1; position: relative; } #talk .talk_item .talk_content .zone_imgbox a:first-child { width: 100%; aspect-ratio: 1.8; } #talk .talk_item .talk_content .zone_imgbox img { border-radius: 10px; width: 100%; height: 100%; margin: 0 !important; object-fit: cover; } /* 底部 */ #talk .talk_item .talk_bottom { opacity: .9; } #talk .talk_item .talk_bottom .icon { float: right; transition: all .3s; } #talk .talk_item .talk_bottom .icon:hover { color: #49b1f5; } #talk .talk_item .talk_bottom span.talk_tag, #talk .talk_item .talk_bottom span.location_tag { font-size: 14px; background-color: var(--liushen-card-secondbg); border-radius: 12px; padding: 3px 15px 3px 10px; transition: box-shadow 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } #talk .talk_item .talk_bottom span.location_tag { margin-left: 5px; } #talk .talk_item .talk_bottom span.talk_tag:hover, #talk .talk_item .talk_bottom span.location_tag:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } #talk .talk_item .talk_content>a { margin: 0 3px; color: #ff7d73 !important; } #talk .talk_item .talk_content>a:hover{ text-decoration: none !important; color: #ff5143 !important } @media screen and (max-width: 900px) { #talk .talk_item .talk_content .zone_imgbox { --w: calc(33% - 5px); } #talk .talk_item #post-comment{ margin: 0 3px } } @media screen and (max-width: 768px) { .zone_imgbox { gap: 6px; } .zone_imgbox { --w: calc(50% - 3px); } span.talk_date { font-size: 14px; } } #talk .talk_item .talk_content .douban-card { margin-top: 10px !important; text-decoration: none; align-items: center; border-radius: 12px; color: #faebd7; display: flex; justify-content: center; margin: 10px; max-width: 400px; overflow: hidden; padding: 15px; position: relative; } .douban-card .douban-card-bgimg { background-position: 50%; background-repeat: no-repeat; background-size: 100%; filter: blur(15px) brightness(.6); height: 115%; position: absolute; width: 115%; } .douban-card .douban-card-left { align-items: center; display: flex; flex-direction: column; position: relative; } .douban-card .douban-card-left .douban-card-img { transition: all .5s ease; height: 130px; position: relative; width: 80px; background-position: 50%; background-repeat: no-repeat; background-size: 100%; } .douban-card .douban-card-left:hover .douban-card-img { filter: blur(5px) brightness(.6); transform: perspective(800px) rotateX(180deg); } .douban-card .douban-card-right { color: #faebd7; display: flex; flex-direction: column; font-size: 14px; line-height: 1.5; margin-left: 12px; position: relative; } .douban-card .douban-card-right .douban-card-item { margin-top: 4px; max-width: 95%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 外链卡片 */ #talk .talk_item .talk_content .shuoshuo-external-link { /* 无下划线 */ width: 100%; height: 80px; margin-top: 10px; border-radius: 12px; background-color: var(--liushen-card-secondbg); color: var(--liushen-card-text); border: var(--liushen-card-border); transition: background-color .3s ease-in-out; } .shuoshuo-external-link:hover { background-color: var(--liushen-button-hover-bg); } .shuoshuo-external-link .external-link { display: flex; color: var(--liushen-text) !important; width: 100%; height: 100%; } .shuoshuo-external-link .external-link:hover { color: white !important; } .shuoshuo-external-link .external-link:hover { text-decoration: none !important; } .shuoshuo-external-link .external-link-left { width: 60px; height: 60px; margin: 10px; border-radius: 12px; background-size: cover; background-position: center; } .shuoshuo-external-link .external-link-right { display: flex; flex-direction: column; justify-content: center; width: calc(100% - 80px); padding: 10px; } .shuoshuo-external-link .external-link-right .external-link-title { font-size: 1.0rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shuoshuo-external-link .external-link-right i { margin-left: 5px; } .limit { width: 100%; text-align: center; margin-top: 30px; } ``` 如果一切正常，应该就可以显示了，但是我在使用时发现卡片是黑色的，把前面的root内容删除之后就好了。 # 参考内容 {% link liushen的博客,liushen,https://blog.liushen.fun/posts/8338183a/ %} 当然还有chatgpt的支持