🎁 Qiita Hackathonで作成したQiita API利用のブログパーツです。
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

Qiita Widget

Qiitaの新着投稿をウェブサイトに埋め込むことができるウィジェットです。

→ Qiita Widgetのデモ

ウィジェットの設置方法

下記のコードのsuinの部分を表示したいユーザ名に置換えてお使いください。

<a href="https://qiita.com/suin" data-qiita-widget data-username="suin">suinのQiita投稿</a>
<script src="https://qiita-widget.suin.io/widget.js" defer></script>

ウィジェットのカスタマイズ

data-*属性を設定することで、ウィジェットの表示をカスタマイズできます。

コンテンツのカスタマイズ

表示するコンテンツは「ユーザ投稿」「タグへの投稿」「キーワード検索結果」のいずれかを選択することができます。

属性 値 説明
data-username="ユーザ名" ユーザ名: string ユーザの新着投稿が表示される
data-tag="タグ" タグ: string タグへの新着投稿が表示される
data-search="キーワード" キーワード: string 検索キーワードに合致する新着投稿が表示される

見た目のカスタマイズ

ウィジェットの大きさや表示件数といった見た目をカスタマイズすることができます。

属性 値 説明
data-items 表示件数: int 表示する投稿数
data-width 幅: string ウィジェットの幅。値はCSSのwidthで使用可能なもの。デフォルト: 100%
data-height 高さ: string ウィジェットの高さ。値はCSSのheightで使用可能なもの。デフォルト: 400px
data-hide-header Qiitaのロゴを非表示にする
data-hide-footer Qiita Widgetへのリンクが非表示になる

開発

git clone git@github.com:suin/qiita-widget.git
cd qiita-widget
npm install
open demo.html
npm run watch

ビルド

npm run build

License

MIT License