• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

AzetJP/mastodon-timeline-widget: Here is a "widget" in Javascript for ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

AzetJP/mastodon-timeline-widget

开源软件地址(OpenSource Url):

https://github.com/AzetJP/mastodon-timeline-widget

开源编程语言(OpenSource Language):

JavaScript 71.0%

开源软件介绍(OpenSource Introduction):

English version

Mastodon.widgetについて

このJSで作られたウィジェットはあなたのホームページにマストドンのタイムラインを表示します。

要件

  • jQuery
  • ウィジェットに表示したいマストドンのインスタンスのアクセストークン

設定がしやすい用に、ウィザードを作りましたので、よろしければご利用下さい。
Azet.jpのマストドンウィジェットウィザード

設定

  1. 必要なファイルをダウンロードをして下さい(CSSファイルとJSファイル).

  2. 下記のコードをホームページに入れてください:

<link rel="stylesheet" href="mastodon.widget.css">
<script type="text/javascript" src="mastodon.widget.js"></script>
<script type="text/javascript" src="mastodon.widget-jp.js"></script>
<script>
	$(document).ready(function() {
		// jQUERY is required!
		var mapi = new MastodonApi({
			target_selector          : '#myTimeline'
			,instance_uri            : '[マストドンのインスタンスURL]'
			,access_token            : '[アクセストークン]'
			,account_id              : '[ユーザのアカウントID]'
			// === optional parameters ===
			//,toots_limit           : 5
			// 下記のサンプルはhttp://fontawesome.io使用
			//,pic_icon              : '<i class="fa fa-picture-o"></i>' 
			//,boosts_count_icon     : '<i class="fa fa-retweet"></i>'
			//,favourites_count_icon : '<i class="fa fa-star"></i>'
		});
	});
</script>

上記のサンプルコードに、下記の情報を正しく設定して下さい:

  • [マストドンのインスタンスURL] => 例: https://mastodon.technology
  • [アクセストークン] => マストドンのインスタンスのアクセストークン
  • [ユーザのアカウントID] => タイムラインの表示したいユーザのID
  1. タイムラインの為に、DIVのコンテナを追加して下さい:
    <div id="myTimeline" class="mastodon-timeline mastodon-timeline-dark"></div>

mastodon-timeline-dark の代わりに、 mastodon-timeline-light のテーマも用意しております。

パラメータ一覧

下記のパラメータが任意です。

パラメータ名 規定 説明
toots_limit 20 最大トゥーツ表示数
pic_icon [picture] 画像のアイコン
boosts_count_icon [boost] ブースト数のステータスタイトル
favourites_count_icon [favourite] お気に入り数のステータスタイトル

pic_icon の場合は、<img src="mypicicon.gif" /> のような設定ができます。
font-awesomeをご利用の方は<i class="fa fa-picture-o"></i> を設定もできます。
同じく、 boosts_count_iconfavourites_count_icon の設定もできます。

カスタマイズ

テーマ

以下の2つのテーマが用意されております:

  • mastodon-timeline-light
  • mastodon-timeline-dark

又は、オリジナルテーマ作成も可能です。詳しくはCSSファイルを参照下さい。

フォント

他のフォントを使いたい方にはGoogleのNoto Sans Japaneseフォントを準備させて頂きました。
下記のHTMLを追加して下さい:(HEADタグの中に、mastodon.widget.cssの前に)

<!-- Noto Sans Japanese -->
<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">

言語サポート

別JSファイルで英語以外の設定もできます。
例えば、日本語用のファイルmastodon.widget-jp.jsには下記の設定が含めております:

MastodonApi.text = {
	spoilerBtnClosed  : "もっと見る"
	,spoilerBtnOpened : "隠す"
	,nsfwLabel        : "閲覧注意"
	,nsfwViewMsg      : "クリックして表示"
};

mastodon.widget.jsの後で、<script>タグを読み込んで下さい。




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap