static timeline generator
1.0.0
Легко создайте статическую веб-страницу временной шкалы, например, мою временную шкалу Викимедиа. Ознакомьтесь с предварительным просмотром этого примера сайта, развернутого с помощью страниц GitHub: https://molly.github.io/static-timeline-generator/.
Содержание
Клонируйте этот репозиторий, затем запустите npm install из каталога.
npm run-script serve соберет проект и предоставит статические файлы локально по адресу http://localhost:8080. npm run-script build просто запускает этап сборки без запуска сервера разработки.
Почти весь контент, который вам нужно изменить, находится в src/_data/content.js .
header (HTML, необязательно): содержимое, отображаемое в заголовке вверху страницы.footer (HTML, необязательно): содержимое, отображаемое в нижнем колонтитуле внизу страницы.entries ( обязательный массив объектов): список записей, отображаемых на временной шкале, в том порядке, в котором они должны отображаться.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 . Обычно я делаю «ГГГГ-ММ-ДД ЧЧ-СС». Если времени нет, а есть только дата, используйте параметр 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 ( обязательное поле): текст, который будет помещен в тег <title> , чтобы установить заголовок страницы в браузере.pageDescription (строка, необязательно): описание страницы для включения в метатеги.pageAuthor (строка, необязательно): автор страницы, который будет указан в метатегах. Если вы хотите добавить дополнительные параметры цвета для кругов на временной шкале, вы можете отредактировать файл src/css/custom.css добавив свои собственные. Вы можете использовать этот инструмент для выбора цветов и получения их шестнадцатеричных кодов цветов. Они определяются так:
. timeline-icon . yourcolorhere {
background-color : # hexcol or code;
} Затем вы должны использовать color: yourcolorhere в файле content.js.
Замените изображения в папке src/img , чтобы настроить значок страницы и изображение OpenGraph.
После запуска npm run-script buld вы увидите каталог _site , содержащий статические файлы HTML/CSS/JS с содержимым вашего сайта. Теперь вы можете использовать любой хостинг статических сайтов для развертывания этих файлов!
Чтобы развернуть статический сайт на страницах GitHub (бесплатно), создайте ветку, содержащую статические файлы, в корневом каталоге, запустив git subtree push --prefix _site origin gh-pages . Затем вы можете перейти в «Настройки» вашего репозитория > «Параметры страниц» и выбрать «Развернуть из ветки», затем выбрать gh-pages в качестве ветки.
Есть несколько хороших руководств по развертыванию статического сайта на различных других бесплатных сервисах. Некоторые из них перечислены ниже.
Вы также можете найти учебные пособия о том, как развернуть сайт, созданный с помощью одиннадцати, поскольку именно это лежит в основе этого проекта. Некоторые службы веб-хостинга, такие как Vercel, специально поддерживают одиннадцать действительно удобными способами.
npm run-script build_site Временные шкалы хорошо отображаются на планшетах:
или мобильные устройства:
Это должно хорошо работать во всех современных браузерах. IE <9 не поддерживается.
Без включенного JavaScript страница плавно ухудшается. Однако сообщения будут отображаться на временной шкале в один столбец, а фильтры не будут отображаться.
В этом проекте используется
Он выпускается под лицензией MIT.
