docs: new post blog embed mastodon

Author: eallion

assets/data/summary/summary.json

@@ -974,7 +974,7 @@
     },
     {
       "title": "你在玩微博？微博在玩你！",
-      "slug": "weibo",
+      "slug": "weibo-play-you",
       "generated": true,
       "summary": "这篇文章介绍了中国微博中三大门派：福建帮、华艺百创和酒红冰蓝。这些门派通过控制大量账号和粉丝数量，在微博平台上获得巨大的影响力和收益。他们利用微博进行营销和品牌推广，已经成为微博江湖中最有权势的人物。微博用户数量快速增长，对于这三大门派来说，微博是一个赚钱的生意。虽然微博平台尚未找到盈利模式，但这些门派已经成功地利用微博获得了巨大的成功和财富。"
     },

content/blog/code/blog-embed-mastodon/background.jpg

@@ -0,0 +1,294 @@
+---
+title: "Hugo 博客集成 Mastodon"
+authors: ["eallion"]
+categories: ["代码"]
+series: ["Mastodon"]
+tags: 
+  - Mastodon
+  - 长毛象
+  - 博客
+slug: "hugo-blog-embed-mastodon"
+summary: "本文介绍了如何将 Hugo 博客集成到 Mastodon 中。作者首先解释了 API 和 RSS 两种方式可以用来集成 Mastodon，然后详细介绍了使用 API 和 JS 的方法。他使用了一个名为 mastodon-embed-timeline 的 JS 包进行集成，并提供了安装步骤。接下来，作者说明了如何创建一个新的模板文件并修改其中的 CSS 和 JS 引入部分以及配置 Mastodon 参数。最后，作者指导读者在 content 目录下创建一个页面，并插入渲染 Mastodon 容器所需的 HTML 代码。文章给出了具体示例和技巧，帮助读者实现 Hugo 博客与 Mastodon 的集成。"
+draft: false
+date: 2024-10-20T16:05:03+08:00
+# images: ["/assets/images/og/blog-integration-mastodon.png"] # Delete this line
+---
+
+### 说明
+
+所有博客类型（Hugo、Hexo、Wordpress 等）都可以通过这个 JS 插件集成 Mastodon。本文以 Hugo 为例。
+
+### 前言
+
+我的博客子栏目「[嘀咕](https://www.eallion.com/mastodon/)」这个微博客（说说、自言自语），几经变迁，现在进化到了集成 Mastodon 时间线。可以把发布在联邦宇宙中的嘟文集成到博客中来。
+应邀写一篇博客整理一下实现过程。
+
+PS：`Mastodon` 是一个专有名词，像 `Iphone` `mAcOs` 一样，别写错了，很尬。
+
+### 选型
+
+- API or RSS
+
+Mastodon 提供 API（Json）和 RSS 两种信息流输出，可以选一种方式集成。
+
+- SSG or JS
+
+Hugo、Hexo 等 SSG 类型的博客可以构建时渲染成静态内容，也可以用 JS 动态集成。
+在早期为了极致的加载速度，我采用静态渲染的方式，发布一条嘟文时，构建一次 Hugo，但是现在构建一次 Hugo 要 3 分多钟，改为用 JS 的方式实时调用 API 了。
+
+- 我的方式：API + JS
+
+我是用 [https://github.com/eallion/mastodon-embed-timeline](https://github.com/eallion/mastodon-embed-timeline) 这个 JS 包集成的。简单方便易维护。
+
+预览：
+
+- [https://www.eallion.com/mastodon](https://www.eallion.com/mastodon)
+- [https://codepen.io/ipuntoj/pen/MWppNGL](https://codepen.io/ipuntoj/pen/MWppNGL)
+
+### 安装
+
+有 3 种方式安装 [mastodon-embed-timeline](https://github.com/eallion/mastodon-embed-timeline)
+
+参考说明文档：[README#installation](https://github.com/eallion/mastodon-embed-timeline?tab=readme-ov-file#installation)
+
+我选择的是通过 `git submodule` 子模块的方式加载，相当于文档中下载的安装方式。
+
+在博客根目录执行：
+
+```bash
+git submodule add https://github.com/eallion/mastodon-embed-timeline.git assets/lib/mastodon-embed-timeline
+```
+
+把 mastodon-embed-timeline 下载到博客的 `assets/lib` 这个目录，这个目录可以随便选，只要记得这个路径就可以了。
+
+![](git-submodule.png)
+
+注意事项：
+
+1. 在另外的电脑上 Clone 博客后，要执行 `git submodule update --init --recursive` 才能同步克隆子模块。
+2. 子模板有更新时，执行 `git submodule update --remote --merge` 更新子模块。
+
+### 新建模板
+
+在博客的根目录的 `layouts/_default` 下（没有可以创建），新建一个 `mastodon.html` 文件。按 Hugo 的构建规则 [Docs](https://gohugo.io/templates/lookup-order/) 尽量不要去 themes 的 `layouts` 目录创建，除非你本人是当前主题的开发者。
+更好的方式可以从主题的 `themes/xxx/layouts/_default` 复制一个模板文件过来，改名为 `mastodon.html`。
+`mastodon.html` 可以是其他名字，如 `bb.html` `shuoshuo.html` `whisper.html`
+
+![](layouts-mastodon.png)
+
+### 模板内容
+
+> 参考：
+>
+> - [examples/profile-timeline.html](https://github.com/eallion/mastodon-embed-timeline/blob/master/examples/profile-timeline.html)
+> - [layouts/_default/mastodon.html](https://github.com/eallion/eallion.com/blob/main/layouts/_default/mastodon.html)
+
+模板文件 `mastodon.html` 需要与主题的结构兼容（所以最好的方法是从主题中复制一个差不多的过来），主要修改三个地方：
+
+##### 1. 引入 CSS
+
+在模板文件的靠前部分插入下面的 CSS。
+两个方式二选一：
+
+```html
+<!-- git submodule 方式 -->
+{{ $mastodonCss := resources.Get "lib/mastodon-embed-timeline/dist/mastodon-timeline.min.css" | minify | fingerprint "sha256" }}
+<link rel="stylesheet" href="{{ $mastodonCss.RelPermalink }}" integrity="{{ $mastodonCss.Data.Integrity }}" crossorigin="anonymous">
+
+<!-- CDN 方式 -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.4.2/dist/mastodon-timeline.min.css" integrity="sha256-1UGgxsonaMCfOEnVOL89aMKSo3GEAmaRP0ISbsWa6lU=" crossorigin="anonymous">
+```
+
+如果有自定义的 CSS 样式需要，可以参考：
+
+- [assets/css/mastodon-timeline-custom.scss](https://github.com/eallion/eallion.com/blob/main/assets/css/mastodon-timeline-custom.scss)
+
+##### 2. 引入 JS
+
+在模板文件的结尾部分插入下面的 JS。
+两个方式二选一，是否使用 ESM 版本的 JS 自行决定，不懂就无脑用 UMD 版本：
+
+```html
+<!-- git submodule 且 ESM 方式 -->
+{{ $js := resources.Get "lib/mastodon-embed-timeline/dist/mastodon-timeline.esm.js" }}
+<script type="module">
+	import * as MastodonTimeline from '{{ $js.RelPermalink }}';
+	const myTimeline = new MastodonTimeline.Init();
+</script>
+
+<!-- CDN 方式 -->
+<script src="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.4.2/dist/mastodon-timeline.umd.js" integrity="sha256-E6WPG6iq+qQIzvu3HPJJxoAeRdum5siq13x4ITjyxu8=" crossorigin="anonymous"></script>
+```
+
+##### 3. 配置 Mastodon
+
+在引入 mastodon-timeline.umd.js 之后，修改下面这些配置（并非所有参数都需要配置）
+
+```html
+<script>
+	const myTimeline = new MastodonTimeline.Init({
+		// 包含时间线的 <div> 的 ID
+		mtContainerId: "mt-container",
+
+		// Mastodon 实例的 URL，包含 https://
+		instanceUrl: "https://mastodon.social",
+
+		// 选择要在时间线中显示的帖子类型：'local', 'profile', 'hashtag'
+		// 默认：local
+		timelineType: "profile",
+
+		// 你在 Mastodon 实例上的用户 ID 号
+		// 如果你没有选择 'profile' 作为时间线类型，请留空
+		userId: "107666",
+
+		// 你在 Mastodon 实例上的用户名（包括开头的 @ 符号）
+		// 如果你没有选择 'profile' 作为时间线类型，请留空
+		profileName: "@eallion",
+
+		// 标签的名称（不包括 # 符号）
+		// 如果你没有选择 'hashtag' 作为时间线类型，请留空
+		hashtagName: "",
+
+		// 加载旋转器的类名（也在 CSS 文件中使用）
+		spinnerClass: "mt-loading-spinner",
+
+		// 首选颜色主题：'light', 'dark' 或 'auto'
+		// 默认：auto
+		defaultTheme: "auto",
+
+		// 向服务器请求的最大帖子数量
+		// 默认：20
+		maxNbPostFetch: "40",
+
+		// 在时间线中显示的最大帖子数量
+		// 默认：20
+		maxNbPostShow: "20",
+
+		// 根据选择的语言/国家指定日期格式
+		// 默认：英式英语（日 - 月 - 年顺序）
+		dateLocale: "en-US",
+
+		// 使用选项自定义日期格式
+		// 默认：DD MMM YYYY
+		dateOptions: {
+			day: "2-digit",
+			month: "short",
+			year: "numeric",
+		},
+
+		// 隐藏未列出的帖子
+		// 默认：不隐藏
+		hideUnlisted: true,
+
+		// 隐藏转发的帖子
+		// 默认：不隐藏
+		hideReblog: false,
+
+		// 隐藏回复帖子
+		// 默认：不隐藏
+		hideReplies: true,
+
+		// 从个人资料时间线中隐藏置顶帖子
+		// 默认：不隐藏
+		hidePinnedPosts: true,
+
+		// 隐藏用户名下的用户账号
+		// 默认：不隐藏
+		hideUserAccount: false,
+
+		// 将文本内容限制为最大行数
+		// 使用 "0" 表示不显示文本
+		// 默认：""（无限制）
+		txtMaxLines: "",
+
+		// 自定义用于显示/隐藏敏感/剧透文本的按钮文本
+		btnShowMore: "显示更多",
+		btnShowLess: "显示更少",
+
+		// 将 Markdown 符号 ">" 转换为块引用 HTML 标签
+		// 默认：false（不应用）
+		markdownBlockquote: false,
+
+		// 隐藏服务器上的自定义表情符号
+		// 默认：不隐藏
+		hideEmojos: false,
+
+		// 自定义用于显示敏感/剧透媒体内容的按钮文本
+		btnShowContent: "显示内容",
+
+		// 隐藏视频预览并加载视频播放器
+		// 默认：不隐藏
+		hideVideoPreview: true,
+
+		// 自定义用于加载和播放视频的按钮文本
+		btnPlayVideoTxt: "加载并播放视频",
+
+		// 如果帖子包含来自 URL 的链接、照片或视频，则隐藏预览卡片
+		// 默认：不隐藏
+		hidePreviewLink: true,
+
+		// 将预览文本描述限制为最大行数
+		// 使用 "0" 表示不显示文本
+		// 默认：""（无限制）
+		previewMaxLines: "",
+
+		// 隐藏回复、转发和点赞的帖子计数器
+		// 默认：不隐藏
+		hideCounterBar: false,
+
+		// 当用户点击帖子中的图片时显示轮播/灯箱
+		// 默认：不关闭
+		disableCarousel: false,
+
+		// 自定义轮播/灯箱的按钮文本
+		carouselCloseTxt: "关闭轮播",
+		carouselPrevTxt: "上一个媒体项",
+		carouselNextTxt: "下一个媒体项",
+
+		// 自定义指向 Mastodon 页面的按钮文本，放置在时间线末尾
+		// 留空以隐藏
+		btnSeeMore: "在 e5n.cc 查看更多帖子",
+
+		// 自定义重新加载帖子列表的按钮文本，放置在时间线末尾
+		// 留空以隐藏
+		btnReload: "刷新",
+
+		// 在构建时间线之前继续搜索主 <div> 容器。在某些情况下很有用，需要额外的时间来渲染页面
+		// 默认：不应用
+		insistSearchContainer: true,
+
+		// 定义继续搜索主 <div> 容器的最长时间
+		// 默认：3 秒
+		insistSearchContainerTime: "3000",
+
+	});
+
+</script>
+```
+
+### 新建页面
+
+在博客的 `content` 目录新建一个页面，如 `mastodon.md` 用来显示 Mastodon 的独立页面。有的主题的独立页面结构可能是 `mastodon/_index.md`。
+Front Matter 里需要指定 `layout` 的名称，要跟模板名称对应上。
+
+在此 `mastodon.md`（或 `_index.md`）文件中插入以下内容，用于渲染 Mastodon 的 Dom 容器：
+
+```html
+<div id="mt-container" class="mt-container">
+	<div class="mt-body" role="feed">
+	<div class="mt-loading-spinner"></div>
+	</div>
+</div>
+```
+
+![](frontmatter-layout.png)
+
+小技巧：Hugo 自带 `aliases` 参数，在 Front Matter 里写上这个参数，可以把这些需要的页面重定向到此页面，不需要另外新建那些页面。
+
+### 其他
+
+另外我的页面中，实现了 2 个小功能：
+针对国内访客，劫持图片链接，替换成国内 CDN 实现加速；
+拦截白名单外的域名，添加跳转提示。
+这些修改都不破坏 `git submodule` 引入的子模块的完整性。
+可在源码中查看：[layouts/_default/mastodon.html](https://github.com/eallion/eallion.com/blob/main/layouts/_default/mastodon.html)

content/blog/code/blog-embed-mastodon/featured.png

@@ -4,7 +4,7 @@ authors: ["eallion"]
 categories: ["日志"]
 tags: ["微博","草根微博","微博营销","创业","微博创业"]
 draft: false
-slug: "weibo"
+slug: "weibo-play-you"
 summary: "这篇文章介绍了中国微博中三大门派：福建帮、华艺百创和酒红冰蓝。这些门派通过控制大量账号和粉丝数量，在微博平台上获得巨大的影响力和收益。他们利用微博进行营销和品牌推广，已经成为微博江湖中最有权势的人物。微博用户数量快速增长，对于这三大门派来说，微博是一个赚钱的生意。虽然微博平台尚未找到盈利模式，但这些门派已经成功地利用微博获得了巨大的成功和财富。"
 date: "2011-07-21 09:49:00"
 lastmod: "2011-07-21 09:49:00"

content/blog/code/blog-embed-mastodon/frontmatter-layout.png

@@ -24,6 +24,9 @@ aliases:
     - /en/x
     - /en/twitter
     - /en/toot
+    - /en/weibo
+    - /en/shuoshuo
+    - /en/bb
 ---
 
 I've been deploying a micro-blogging sub-section of my blog similar to **Whisper** since shortly after my introduction to independent blogging. The main difference is that it is a self-talking, **defense of the desire to express** as opposed to a long blog post. The initial role was to back up QZone, Twitter and Weibo, etc. Feed from [{{< icon "mastodon" >}} Mastodon](https://e5n.cc) , tool: [{{< icon "gitlab" >}} Mastodon embed timeline](https://gitlab.com/idotj/mastodon-embed-timeline) .

content/blog/code/blog-embed-mastodon/git-submodule.png

@@ -24,6 +24,9 @@ aliases:
     - /x
     - /twitter
     - /toot
+    - /weibo
+    - /shuoshuo
+    - /bb
 ---
 
 我从接触独立博客开始不久，就一直在博客中部署了一个类似「**嘀咕**」（Whisper）的微博客子栏目。主要是区别于博客长文的自言自语，「保卫表达欲」。最初的作用是备份 QQ 说说、Twitter 和微博等。信息流来自 [{{< icon "mastodon" >}} Mastodon](https://e5n.cc) ，工具：[{{< icon "gitlab" >}} Mastodon embed timeline](https://gitlab.com/idotj/mastodon-embed-timeline) 。