首页 >web前端 >js教程 >如何嵌入您的 Mastodon 个人资料

如何嵌入您的 Mastodon 个人资料

DDD
DDD原创
2025-01-11 20:30:46409浏览

How to embed your Mastodon profile

在 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

以上是如何嵌入您的 Mastodon 个人资料的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn