Загрузка tinystatic - Загрузка исходного кода tinystatic

tinystatic

Другие категории

JS helper functions; Dynamic URLs

Скачать

крошечный статический

Крошечный генератор статических веб-сайтов, гибкий и простой в использовании. Он гибкий, поскольку не требует ни обязательной структуры веб-сайта, ни каких-либо концепций, специфичных для блога. Его легко использовать, поскольку мы можем начать со стандартного HTML-сайта и постепенно внедрять tinystatic.

Концепция tinystatic проста: из каждого файла во входном каталоге создайте файл в выходном каталоге, который затем можно будет использовать в качестве общедоступного каталога нашего веб-сервера. То, как tinystatic генерирует выходной файл, зависит от расширения входного файла: Markdown преобразуется в HTML, а CSS, JS и изображения просто копируются. Для файлов уценки и HTML вы можете указать метаданные в верхней части файла. Указав шаблон в метаданных этого файла и предоставив шаблоны в отдельных каталогах, вы можете использовать механизм шаблонов HTML Go. Ниже приведен пример типичного веб-сайта блога и краткое руководство по началу работы.

Установить

Готовые двоичные файлы

Загрузите бинарный файл tinystatic для вашей операционной системы:

Линукс
macOS

При желании добавьте двоичный файл в путь к вашей оболочке, либо поместив двоичный файл в существующий каталог, например /usr/bin , либо добавив родительский каталог двоичного файла в переменную пути.

Если вы добавили tinystatic в свой путь, вы сможете вызвать

tinystatic -help

В противном случае вам нужно будет указать путь к бинарному файлу tinystatic при его вызове.

/path/to/tinystatic -help

Компиляция из исходников

Если вы не хотите использовать готовые двоичные файлы, вам нужно будет установить компилятор Golang для компиляции tinystatic. Затем вы можете установить tinystatic, запустив

go install -u github.com/julvo/tinystatic

или клонировав репозиторий и запустив go install или go build в корневом каталоге этого репозитория.

Быстрый старт

Это 10-минутное руководство, в котором мы создаем небольшой блог, начиная с одной HTML-страницы и последовательно знакомя с функциями tinystatic.

Сначала мы создаем папку под названием routes . Внутри этой папки мы создаем один HTML-файл index.html со следующим содержимым:

 <!doctype html >
< html >
  < head >
    < title > Our first tinystatic website </ title >
  </ head >
  < body >
      < h1 > Welcome to our blog </ h1 >
  </ body >
</ html >

Теперь мы можем впервые запустить tinystatic . По умолчанию tinystatic ожидает вызова в каталоге, содержащем каталог routes , но вы можете изменить это, используя параметр -routes . После запуска команды вы должны увидеть output папки рядом с папкой routes . Наша файловая структура теперь выглядит так:

 my-blog/
    routes/
        index.html
    output/
        index.html

Теперь мы можем запустить веб-сервер в выходном каталоге, например, используя встроенный сервер Python, чтобы открыть наш веб-сайт по http://localhost:8000 :

 cd output
python3 -m http.server

До сих пор все, что делал tinystatic, это копировал index.html из routes в output — не так уж и полезно, но подождите…

Давайте добавим в routes второй HTML-файл, например about.html :

 <!doctype html >
< html >
  < head >
    < title > Our first tinystatic website </ title >
  </ head >
  < body >
      < h1 > About us </ h1 >
  </ body >
</ html >

После того, как мы снова запустим tinystatic и наш веб-сервер все еще работает, мы можем перейти по адресу http://localhost:8000/about . Обратите внимание, что в этом маршруте больше нет .html , поскольку tinystatic создал папку about одним index.html , вот так:

 output/
    index.html
    about/
        index.html

Что нам не нравится в наших текущих страницах, так это дублирование всей базовой структуры HTML. Не лучше ли было бы использовать общий шаблон для index.html и about.html ? Для этого мы создаем папку templates рядом с папкой routes и помещаем в нее HTML-файл default.html :

 my-blog/
    routes/
        index.html
        about.html
    templates/
        default.html

Содержимое default.html должно быть:

 <!doctype html >
< html >
  < head >
    < title > Our first tinystatic website </ title >
  </ head >
  < body >
      {{template "body" .}}
  </ body >
</ html >

Кроме того, мы меняем содержимое routes/index.html на

---
template: default.html
---
{{define "body"}}
< h1 > Welcome to our blog </ h1 >
{{end}}

и содержимое routes/about.html в

---
template: default.html
---
{{define "body"}}
< h1 > About us </ h1 >
{{end}}

При повторном запуске tinystatic результат идентичен предыдущему, но мы объединили скелет HTML в одном месте.

Как мы только что видели, мы можем указать шаблон для отображения нашего контента, указав имя шаблона в метаданных в верхней части файла. Мы также можем включить другие шаблоны (см. ниже) и использовать конвейеры шаблонов Go. Во время рендеринга у нас есть доступ к метаданным, определенным в верхней части файла, структуре Route с полями Route.Href , Route.FilePath и Route.Meta , которая снова представляет собой карту метаданных, определенных в верхней части файла. Более того, мы можем получить доступ к Routes , который является срезом (подумайте: массивом для новичков в Go) всех маршрутов, о которых мы узнаем больше дальше.

Давайте используем эти метаданные вместе с примитивами шаблонов Go, чтобы изменить заголовок страницы в зависимости от текущей страницы. Для этого мы меняем метаданные в routes/about.html на

 ---
template: default.html
title: About
---

и, наконец, измените templates/default.html на

 <!doctype html >
< html >
  < head >
    < title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
  </ head >
  < body >
      {{template "body" .}}
  </ body >
</ html >

После регенерации веб-сайта браузер теперь должен отображать разные заголовки страниц для нашего индекса и страницы «О нас».

Теперь давайте создадим несколько сообщений в блоге в нашей папке маршрутов, например

 routes/
    index.html
    about.html
    posts/
        first_post.md
        second_post.md

Поместите некоторую уценку внутри этих файлов .md с разделом метаданных вверху, указав шаблон как default.html , аналогично тому, как мы указывали метаданные в routes/index.html и routes/about.html . Для first_post.md это может выглядеть так:

 ---
template : default.html
title : First Post
---

# Here could be some fine content

Снова запустив tinystatic для регенерации вывода, мы теперь можем посетить http://localhost:8000/posts/first_post и http://localhost:8000/posts/second_post . Уценка была преобразована в HTML и помещена внутри шаблона с именем body , чтобы она отображалась в заполнителе {{template "body" .}} в templates/default.html . Обратите внимание, чем это отличается от файлов .html , где нам нужно вызвать {{define "body"}} ... {{end}} вручную.

Далее давайте создадим список наших сообщений, используя вышеупомянутый срез Routes . Мы меняем содержимое routes/index.html на:

---
template: default.html
---
{{define "body"}}
< h1 > Welcome to our blog </ h1 >

< ul >
{{range .Routes | filterFilePath "**/posts/*.md"}}
< li >
    < a href = {{.Href}} > {{.title}} </ a >
</ li >
{{end}}
</ ul >

После регенерации мы должны увидеть список наших сообщений на индексной странице. Срез Routes предоставляет список всех маршрутов, которые мы можем фильтровать, используя предварительно определенные вспомогательные функции, например

.Routes | filterFilePath "**/posts/*.md" для отображения всех файлов, заканчивающихся на .md в любой папке с именем messages.
.Routes | sortAsc "title" для сортировки маршрутов по title поля метаданных.
.Routes | limit 10 чтобы получить только первые 10 маршрутов
.Routes | offset 3 чтобы пропустить первые три маршрута
.Routes | filter "title" "*Post" для фильтрации на основе title поля метаданных, соответствующего шаблону *Post
.Routes | filterFileName "*.md" чтобы получить все файлы, заканчивающиеся на *.md
.Routes | filterHref "/*" для получения всех маршрутов верхнего уровня.
.Routes | filterFilePath "**/posts/*.md" | sortDesc "title" | limit 10 чтобы объединить некоторые из вышеперечисленных

Далее мы хотели бы использовать для публикаций другой макет, чем для других страниц. Сообщения должны иметь изображение перед текстом, поэтому мы хотим определить URL-адрес изображения в метаданных сообщения. Поэтому мы добавляем второй шаблон под названием templates/post.html со следующим содержимым:

 <!doctype html >
< html >
  < head >
    < title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
  </ head >
  < body >
      < img src = {{.image}} />
      {{template "body" .}}
  </ body >
</ html >

Изменяем метаданные поста на

 ---
template: post.html
title: First Post
image: https://some-image.url
---

Регенерация вывода должна дать нам красивое изображение над нашим постом. Однако в наших шаблонах мы снова столкнулись с дублированием HTML-кода. Чтобы улучшить это, мы создаем еще одну папку рядом с routes и templates называемую partials . Внутри партиалов мы создаем файл head.html с

{{define "head"}}
< head >
  < title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
</ head >
{{end}}

и мы заменяем <head>...</head> в наших шаблонах на {{template "head" .}} , вот так

 <!doctype html >
< html >
  {{template "head" .}}
  < body >
      {{template "body" .}}
  </ body >
</ html >

Теперь мы свели репликацию кода между разными шаблонами до минимума. Мы можем использовать этот каталог partials для хранения всех видов повторяющихся компонентов, например панелей навигации или нижних колонтитулов.

Обратите внимание: на самом деле нам не нужно структурировать проект, используя имена папок, которые мы использовали в этом руководстве. Имена этих папок являются просто значениями по умолчанию, но их можно изменить с помощью соответствующих аргументов командной строки (подробнее см. tinystatic -help ).

Полный пример блога можно найти здесь.

Расширять

Дополнительная информация