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”，文件夹设置为“/（根）”。