static timeline generatorダウンロード - static timeline generatorソースコードのダウンロード

static timeline generator

その他のカテゴリー

1.0.0

ダウンロード

静的タイムラインジェネレーター

私のウィキメディアタイムラインのような静的なタイムライン Web ページを簡単に作成できます。 GitHub Pages でデプロイされたこのサンプルサイトのプレビューを確認してください: https://molly.github.io/static-timeline-generator/。

コンテンツ

インストール
カスタマイズ
- 主なコンテンツ
- メタ
追加のカスタマイズ
展開する
- GitHub ページ
- その他のサービス
応答性
ブラウザの互換性
ボンネットの下で

ダミーコンテンツを含むタイムラインページのスクリーンショット

インストール

このリポジトリのクローンを作成し、ディレクトリからnpm install実行します。

npm run-script serveプロジェクトをビルドし、静的ファイルを http://localhost:8080 でローカルに提供します。 npm run-script build開発サーバーを起動せずにビルドステップを実行するだけです。

カスタマイズ

変更する必要があるコンテンツのほとんどはsrc/_data/content.jsにあります。

主なコンテンツ

header (HTML、オプション): ページ上部のヘッダーに表示するコンテンツ。
footer (HTML、オプション): ページ下部のフッターに表示するコンテンツ。
entries (オブジェクトの配列、必須): タイムラインに表示されるエントリのリスト (表示される順序)。
- id (文字列、必須): このタイムラインエントリの一意の ID。
- categories (文字列の配列、オプション): このエントリに適用されるカテゴリのリスト。これらはページの上部にチェックボックスとして表示され、読者がタイムラインをフィルターできるようになります。コンマを含めることはできません。これらはハイフンまたはスペースで区切ることができます ( sample categoryまたはsample-category両方ともSample categoryとしてページに表示されます)。カテゴリのないエントリは常に表示されます。
- color (文字列、オプション): タイムラインラインに表示される円の色。すでに定義されているオプションは、 green 、 red 、およびgreyです。 css/custom.cssで追加の色を定義できます (下記を参照)。
- faicon (文字列、オプション): タイムラインライン上の円で使用する Font Awesome アイコンの名前。オプションを調べてください。これは単なるアイコン名です ( fa-接頭語は付きません)。例: anchor 。
- datetime (文字列、 datetimeまたはdateいずれかが存在する必要があります): 項目の日付と時刻の指定子。これは、 moment.js認識する任意の形式にすることができます。私は普段「YYYY-MM-DD HH-SS」をしています。時間がなく日付のみがある場合は、 datetimeの代わりにdateパラメーターを使用します。
- date (文字列、 datetimeまたはdateいずれかが存在する必要があります): 項目の日付指定子。「YYYY-MM-DD」。
- title (HTML、必須): タイムラインエントリのタイトル。
- image (オプション): エントリに表示する画像
  - src (文字列、必須): ページに埋め込む画像ファイルへの直接 URL、またはこのディレクトリ内の画像への相対リンク (例: img/filename.png )。
  - link (文字列、オプション): 画像をクリックして大きなバージョンを表示できるようにしたい場合、画像を含むページへのハイパーリンク。
  - alt (文字列、オプション): 画像を説明する代替テキスト。
  - caption (HTML、オプション): 画像を説明するキャプション。
- body (HTML、必須): タイムラインエントリのテキスト。複数の段落が必要な場合は、 <p>タグを自分で含める必要があります。それ以外の場合は追加されます。
- links (オブジェクトの配列、オプション): エントリの下部に表示するリンクの配列。
  - href (文字列、必須): リンクのターゲット。
  - linkText (HTML、必須): リンクテキスト。
  - extra (HTML、オプション): リンクの最後に表示する追加の HTML。

メタ

pageTitle (文字列、必須): ブラウザーでページのタイトルを設定するために、 <title>タグに入れるテキスト。
pageDescription (文字列、オプション): メタタグに入るページの説明。
pageAuthor (文字列、オプション): メタタグに入るページの作成者。

追加のカスタマイズ

タイムライン上の円の色のオプションをさらに追加したい場合は、 src/css/custom.cssファイルを編集して独自の色オプションを追加できます。このツールを使用して色を選択し、その 16 進カラーコードを取得できます。それらは次のように定義されます。

. timeline-icon . yourcolorhere {
  background-color : # hexcol or code;
}

次に、content.js ファイルでcolor: yourcolorhereを使用します。

src/imgフォルダー内の画像を置き換えて、ページのファビコンと OpenGraph 画像をカスタマイズします。

展開する

npm run-script buld実行すると、サイトのコンテンツを含む静的 HTML/CSS/JS ファイルを含む_siteディレクトリが表示されます。これで、任意の静的サイトホスティングを使用してこれらのファイルを展開できるようになりました。

GitHub ページ

静的サイトを GitHub ページ (無料) にデプロイするには、 git subtree push --prefix _site origin gh-pages実行して、ルートディレクトリに静的ファイルを含むブランチを作成します。次に、リポジトリの [設定] > [ページ] オプションに移動し、[ブランチからデプロイ] を選択し、ブランチとしてgh-pages選択します。

Github Pagesの構成設定。「ビルドとデプロイメント」で、ソースは「ブランチからデプロイ」に設定され、ブランチは「gh-pages」に設定され、フォルダーは「/ (ルート)」に設定されます。