如何嵌入您的 Mastodon 个人资料

在 X（又名 Twitter）中，您可以通过其官方页面轻松嵌入您的个人资料页面。但是，如何在 Mastodon 中做到这一点呢？这是如何制作的分步教程。

1. 导入模块

您可以通过 JSDelivr 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">
<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>

2. 添加嵌入包装器

您可以将其嵌入到任何您想要的位置。

<div>



<h2>
  
  
  3. Add JS configuration
</h2>

<p>After import and add the wrapper, now you need to add the JS config.<br>
</p>

<pre class="brush:php;toolbar:false"><script>
   const myTimeline = new MastodonTimeline.Init({
      instanceUrl: "https://mastodon.social/",
      timelineType: "profile",
      userId: "950856",
      profileName: "@LIGMATV",
   });
</script>

1. 将 instanceUrl 更改为您注册 Mastodon 帐户的位置。例如，如果您的个人资料链接是 https://mastodon.social/@example，则实例为 https://mastodon.social/。

2. timelineType，就留着吧。您的目的只是嵌入您的个人资料

3. userId，您可以通过实例API找到您的用户ID。例如，如果您的个人资料链接是 https://mastodon.social/@example，则 API 链接位于 https://mastodon.social/api/v1/accounts/lookup?acct=example。您可以在第一部分找到它（例如：{“id”：“950856”，...）

4. profileName，这是您在实例中的用户名。

您可以看到我的 Mastodon 帐户在此嵌入方法中的外观的工作示例：

---

就这样！考虑给 star 并为 mastodon-embed-timeline 存储库做出贡献！ ⭐ https://gitlab.com/idotj/mastodon-embed-timeline