static timeline generator static timeline generator下載

static timeline generator

其他類別

1.0.0

下載

靜態時間軸產生器

輕鬆建立靜態時間軸網頁，例如我的維基媒體時間軸。查看使用 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”。如果沒有時間，只有日期，請使用date參數而不是datetime 。
- date （字串，必須存在datetime或date ）：項目的日期說明符。「年-月-日」。
- title （HTML，必需）：時間線條目的標題。
- image （可選）：要在條目中顯示的圖像
  - src （字串，必要）：要嵌入到頁面上的圖像檔案的直接 URL，或此目錄中圖像的相對連結（例如img/filename.png ）。
  - link （字串，可選）：指向包含圖像的頁面的超鏈接，如果您希望人們能夠單擊它以查看更大的版本等。
  - alt （字串，可選）：描述圖像的替代文字。
  - caption （HTML，可選）：描述圖像的標題。
- body （HTML，必需）：時間線條目的文字。如果你想要多個段落，你必須自己包含<p>標籤；否則將添加。
- links （物件數組，可選）：顯示在條目底部的連結數組。
  - href （字串，必需）：連結的目標。
  - linkText （HTML，必要）：連結文字。
  - extra （HTML，可選）：在連結末尾顯示的額外 HTML。

元

pageTitle (string, required ): <title>標籤中的文本，用於設定瀏覽器中頁面的標題。
pageDescription （字串，可選）：要進入元標記的頁面描述。
pageAuthor （字串，可選）：進入元標記的頁面作者。

額外客製化

如果您想為時間軸上的圓圈添加更多顏色選項，您可以編輯src/css/custom.css檔案以新增您自己的顏色選項。您可以使用此工具來選擇顏色並取得其十六進位顏色代碼。它們的定義如下：

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

然後，您可以在 content.js 檔案中使用color: yourcolorhere 。

替換src/img資料夾中的映像以自訂頁面 favicon 和 OpenGraph 映像。

部署

執行npm run-script buld後，您將看到一個_site目錄，其中包含具有網站內容的靜態 HTML/CSS/JS 檔案。現在您可以使用任何靜態網站託管來部署這些文件！

GitHub 頁面

若要在 GitHub 頁面（免費）上部署靜態站點，請透過執行git subtree push --prefix _site origin gh-pages建立一個包含根目錄中的靜態檔案的分支。然後，您可以轉到儲存庫的“設定”>“頁面”選項並選擇“從分支部署”，然後選擇gh-pages作為分支。

Github 頁面配置設定。在“建置和部署”下，來源設定為“從分支部署”，分支設定為“gh-pages”，資料夾設定為“/（根）”。