嘟诗 | 子虚栈

嘟了个嘟

✍文章痕迹

写作时间线

2023-10-08

第一次发现Mastopoet项目

2024-1-12

上午开始故障站出现故障，发不了嘟嘟，很无聊，整理gitlab仓库时，开始汉化此项目。

翻译mastopoet为『嘟诗』
在en的基础上，对整体汉化，并添加了一些提示
部署到了quote.si-on.top

2024-1-13

增加半透明效果

嘟诗是什么？

『嘟诗』(原名：Mastopoet)是一个

以poet.so^[1]为灵感
由raikasdev (Roni Äikäs) 开发的
开源的，可自部署的，以MIT为协议的
长毛象^[2]帖子^[3]截图美化工具

它可以让你创建一个✨ 美死人不偿命( stunning)✨ 的嘟文截图，在内容方面，她移除了那些没用的东西（比如书签、可见性、设置等交互按钮），并提供了交换按钮的可见性设置（可以设置点赞、转发、回复的样式为图标^[4]或文本等），以及各种各样主题与背景！会CSS的朋友可以自定义一个主题玩儿

[{"url":"../../../images/20240104/嘟诗-20240112123413569.webp","alt":""},{"url":"../../../images/20240104/嘟诗-20240112123531905.webp","alt":""},{"url":"../../../images/20240104/嘟诗-20240112122510131.webp","alt":""},{"url":"../../../images/20240104/嘟诗-20240112122440859.webp","alt":""},{"url":"../../../images/20240104/嘟诗-20240112122429220.webp","alt":""}]

实例地址

这里提供三个实例地址^[5]，供你选择

mastopoet.raikas.dev	首发实例，运行在开发者自己的服务器上，总是保持最新的代码
poet.bolha.us	开发者提供的另一个实例
quote.si-on.top	秉蕳提供的汉化版实例

URL路由

增加 ?url=<post url> 到上述三个嘟诗实例或你自己部署实例的末尾就可以组成链接，点击即可打开对应嘟诗页面。比如你的嘟文链接是https://social.vivaldi.net/@siontian/111180560535385717，你想用咱提供的汉化实例来制作截图，那么就可以这样组合起来https://quote.si-on.top/?url=https://social.vivaldi.net/@siontian/111180560535385717

优雅的截图

嵌入网页

你甚至可以不用保存成图片，仅仅通过HTML的iframe来嵌入进博客/网页里。

<iframe
  src="https://quote.si-on.top/embed?url=<嘟文链接>"
  width= 100%  //设置宽度
  allowfullscreen="allowfullscreen" //允许全屏
  sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms"
></iframe>

你也可以更改下面的值(&key=value) 来修改嵌入的样式^[6]：

theme (bird-ui, bird-ui-light, mastodon, mastodon-light)
interactions (feed, feed no-date, normal, normal no-replies, hidden)
background Any valid value for CSS background (hex values, linear-gradient...)
width The background width in pixels (0-400, default 0), also remember to modify the iframe width!
height The background width in pixels (0-200, default 0)

<iframe
  src="https://quote.si-on.top/embed?url=https://social.vivaldi.net/@siontian/111180560535385717"
  width=80%  //设置宽度
  height=150
  interactions= normal
  theme=bird-ui-light
  background= linear-gradient(to right, #00f260, #0575e6)
  allowfullscreen="allowfullscreen" //允许全屏
  sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms"
></iframe>

主题与背景

作者提供了两个主题，以及细分的五个样式、七种渐变背景。基本选项

Bird UI (推特)	暗色,亮色
Mastodon（长毛象）	暗色,暗色+明亮的交互按钮,亮色

关于背景，作者提供了六种背景渐变，分别是：

"linear-gradient(to bottom right, #fc5c7d, #6a82fb)",
"linear-gradient(to bottom right, #FF61D2, #FE9090)",
"linear-gradient(to bottom right, #FD8451, #FFBD6F)",
"linear-gradient(to bottom right, #00C0FF, #4218B8)",
"linear-gradient(to right, #2980b9, #6dd5fa, #ffffff)",
"linear-gradient(to bottom right, #FF3E9D, #0E1F40)",

我们可以自定义添加其他背景，点击上图中第八个按钮，然后输入自己想要的样式即可，这里推荐Gradient Magic提供的样式，大部分可以使用。比如你看到这个蓝图般的背景，立马想到了自己学CAD的时光，而你又刚好画完一幅CAD，发了个嘟嘟，那么好巧不巧，我们就可以把这css给提取出来，然后再嘟诗里把这两者“缝合”起来，做一个精美的截图。

网页中给出的css样式

background-image: repeating-linear-gradient(0deg, hsla(208,43%,84%,0.09) 0px, hsla(208,43%,84%,0.09) 1px,transparent 1px, transparent 9px),repeating-linear-gradient(90deg, hsla(208,43%,84%,0.09) 0px, hsla(208,43%,84%,0.09) 1px,transparent 1px, transparent 9px),linear-gradient(90deg, hsl(203,93%,43%),hsl(203,93%,43%));

注意填写的时候要去掉background-image:与最后的“;”只留下中间部分，否则无法应用样式！也就是填写repeating-linear-gradient(0deg, hsla(208,43%,84%,0.09) 0px, hsla(208,43%,84%,0.09) 1px,transparent 1px, transparent 9px),repeating-linear-gradient(90deg, hsla(208,43%,84%,0.09) 0px, hsla(208,43%,84%,0.09) 1px,transparent 1px, transparent 9px),linear-gradient(90deg, hsl(203,93%,43%),hsl(203,93%,43%))

如果你使用hexo的Butterfly主题，可以在_config.butterfly.yml里的Website Background (設置網站背景)一栏配置网站的css背景；文章的frontmatter中cover也可以用background来写。这样的好处是不需要额外的图片，仅仅是一个样式占用几行字而已，比本站用的纯svg头图占用的空间还少！

透明背景

2024/1/13 晚间，咱家参考Poet.so的样式，对推特(Bird UI)进行了修改，现在可以显示半透明的效果了！

半透明

&.theme-bird-ui {
  --color-bg: #1e2028e0;
  --color-text: #f7f9f9;
  --color-text-dim: #717c9b;
  --color-text-link: #858afa;
  --color-border: #38384d;
}

&.theme-bird-ui-light {
  --color-bg: #fffcfc54;
  --color-text: #000000;
  --color-text-dim: #00000080;
  --color-text-link: #242763;
  --color-border: #e6e1ed;
}

半透明！

自部署

Docker

代码仓库源文件里有作者撰写的dockerfile，你可以把代码仓库克隆下来，然后使用docker部署：

1	docker build -t mastopoet .

# BUILD APPLICATION STEP
FROM node:18-alpine as build

RUN mkdir -p /usr/src/app

WORKDIR /usr/src/app

# Because at vite.config.ts we use "git rev-parse --short HEAD"
RUN apk add git

COPY package.json .
COPY package-lock.json .

RUN npm ci --verbose

COPY . .

RUN npm run build

# SERVE APPLICATION IN PRODUCTION
FROM nginx:stable-alpine AS nginx

COPY --from=build /usr/src/app/dist/ /usr/share/nginx/html/

EXPOSE 80

CMD ["nginx", "-g", "daemon off;" ]

它将构建应用程序并部署在 nginx 实例中，构建映像后，您可以使用以下命令运行：

1	docker run -d -p 80:80 mastopoet

至于更多的配置，参见 nginx container options at dockerhub

SaaS

嘟诗是一个React的SPA(Single Page Application)，你可以通过一些主流的SaaS(Software-as-a-service)^[7]进行部署，比如：Cloudflare Pages, Netlify，Vercel，Github Pages等，操作非常简单！本站提供的汉化版便是在Cloudflare中部署的

常见问题

图片显示不出来？

照片加载不出来这大多是由于跨源资源共享(CORS)导致的，它其实是浏览器的一种安全功能：当从其他网站访问资源（如个人资料图片）时就会自动阻止。作者表示从 1.0.3 版本开始，如果 CORS 被阻止，嘟诗(Mastopoet)会自动使用代理服务器，所以这种情况不应该再发生了。如果仍旧犯病，请通过 [roni@raikas.dev]（mailto:roni@raikas.dev）与作者联系。
然而经过我的试验，如果长毛象实例本身设置了禁止跨域访问，那么即便加了代理，三个实例也仍都不能解决这个问题，需要向实例的管理员提出申请，让他/她/它在服务器上的header添加Access-Control-Allow-Origin即可。如果它他/她不加，你就换实例，走人，哼哼！

项目进度

[x] Customizable gradient
[x] Bird UI light theme port
[x] Mastodon theme port
[ ] Customizable date format
[x] A logo (to website embed)
[x] Read toot URL from query
[x] Default toot with information
[x] Fix multi image image galleries
[x] Support for non-Mastodon links
[x] Alt text generator
[ ] PDF export with link (idea)
[x] Detect CORS failed images and show user info box
[x] If toot div is not an full integer, weird bars show in image.
[x] Add support for Misskey/Firefish (src/instance/Misskey.ts)

推特帖子截图工具（这个工具随着推特(X)API权限的更新，已经没落了，但它的透明渐变效果贼拉好看，嘟诗目前还没有这种效果。）（1-13：现在嘟诗也有半透明效果了！） ↩︎
Mastodon项目代码仓库 ↩︎
用户们一般把它亲切地称为“toot”、“嘟文”、“嘟嘟”等 ↩︎
Tabler Icons, licensed under MIT ↩︎
子虚栈 / Mastopoet · GitLab：嘟诗的代码仓库 ↩︎
我修改后发现只有长度与宽度可以变，其他的效果似乎还不行，有会用的朋友欢迎告诉我 ↩︎
比较Vercel和Netlify - Plantree ↩︎