⚡️ Создание статического генератора сайта с Python - часть 1

Статические генераторы сайта являются безопасной и быстрой альтернативой традиционным системам управления контентом, таких как WordPress.

Статические генераторы сайта или SSG довольно просты, когда вы их получаете. Но изначально может быть кривая обучения. Один из способов обучения (мой предпочтительный путь) – смотреть под капотом и посмотреть, как все работают и пытаются воссоздать их. С этой целью в виду, что мы создадим наш собственный генератор статического сайта, используя Python. Плюс это очень весело сделать.

Если вы новичок в статические генераторы сайта, вы можете сначала прочитать о Что такое статический генератор сайта , Когда использовать один и когда не использовать один Отказ Также взглянуть на Список многих статических генераторов сайта написано на разных языках программирования.

Так что без дальнейшего ADO начнется.

Понимание того, как работают статические генераторы сайта

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

Допустим, вы делаете блог рецепта. Вы пишете свой рецепт в Markdown, как это:

title: Turkish Pide
date: 17-04-19

**Ingredients for the dough:**
500 gm bread flour
1 tblspoon yeast
1 tblspoon honey
1 tsp salt
2 tblsp olive oil
250 ml or as req water.

**Ingredients for the filling:**
1 cup grated Mozerella
½ cup crumbled feta 

Combine the ingredients of the dough and knead until smooth and elastic. Let rest 45 minutes. Divide in two. Roll each in a rectangle. Spread the cheese filling over top. And roll the sides in to form a boat shape. Let rise for 10-15 minutes. Brush the sides with olive oil and bake at 230C for 10-15 minutes or until nicely browned.

И у вас есть шаблон, как это:


    
        {{ title }}
    

    
        
            Published at: {{ date }}
            {{ content }}

Статический генератор сайта будет анализировать текст Markdown и вставить каждый компонент, где он принадлежит, поэтому вы получите что-то подобное:

Turkish Pide

Published at: 17-04-19 Ingredients for the dough:

500 gm bread flour
1 tblspoon yeast
1 tblspoon honey
1 tsp salt
2 tblsp olive oil
250 ml or as req water.

Ingredients for the filling:

1 cup grated Mozerella
½ cup crumbled feta

Combine the ingredients of the dough and knead until smooth and elastic. Let rest 45 minutes. Divide in two. Roll each in a rectangle. Spread the cheese filling over top. And roll the sides in to form a boat shape. Let rise for 10-15 minutes. Brush the sides with olive oil and bake at 230C for 10-15 minutes or until nicely browned.

Поэтому нам нужно найти способ анализа текста от Markdown до HTML и вставить HTML в предварительно созданные шаблоны.

Преобразование Markdown до HTML

Создайте новую папку, где вы хотите, чтобы ваш код жить:

mkdir recipe-ssg

SSG означает статический генератор сайта кстати. И так же хорошо, как и для SEO моего сайта, я довольно устал от печатать статические генераторы сайта снова и снова, поэтому я буду ссылаться на статические генераторы сайта в качестве SSG. Фу!

В этой папке создайте папку содержимого, где мы напишем наш блог в файлах Markdown:

cd recipe-ssg & mkdir content

В папке содержимого создайте файл markdown. Вы можете скопировать содержимое Этот файл и назовите это Turkish-pide.md Отказ

Вы заметите, что файл разделен на две части. Существует некоторые метаданные между двумя приборными сепараторами. И фактический контент ниже сепаратора.

Далее мы хотим, чтобы выбрать путь к этой разметке, преобразуйте его в HTML и храните эти данные, чтобы его можно было потреблять Python. Но нам не нужно изобретать колесо. Удивительное сообщество Python уже написало РАЗМЕЩЕНИЕ ФАРСЕР для нас. Мы устанавливаем его и немного играем, чтобы увидеть, как это работает.

В пределах вашего Виртуальная среда Установить Markdown2 используя Pipenv или Pip.

pipenv install markdown2

В Interactive Python Shell Perry:

from markdown2 import markdown
markdown("**This is a very important message**")

# outputs 'This is a very important message\n'

Большой! Теперь мы можем создать простой скрипт для преобразования наших файлов формата Markdown в файлы HTML.

Создать main.py Файл в корне вашего проекта (не внутри контента) и введите следующее:

from markdown2 import markdown

with open('content/turkish-pide.md', 'r') as file:
    parsed_md = markdown(file.read(), extras=['metadata'])


print('Metadata: ', parsed_md.metadata)
print('Content: ', parsed_md)

Беги main.py И вы увидите содержимое Turkish-pide.md Файл напечатан на консоли с тегами HTML. Также обратите внимание, что метаданные преобразуются в словарь Python. Теперь мы можем использовать эти переменные для создания страниц, использующих шаблоны.

Но сначала нам нужно создать шаблон.

Создание и использование шаблонов

Шаблоны являются обычными HTML-файлами с заполняющими для переменной данных. Мы будем использовать Jinja2. Язык шаблонов для Python, который просто вставит данные из наших переменных в шаблоне HTML. Если вы новичок для языков шаблонов или Jinja2, вы можете сначала читать больше об этом здесь Отказ

Установить Jinja2. В рамках вашей виртуальной среды используют Pipenv или PIP:

pipenv install jinja2

Чтобы попробовать jinja2, создайте папку внутри вашего рута вашего проекта и позвоните в него шаблоны . Теперь создайте test.html внутри Шаблоны и поместите следующий код в нем:






    
    
    
    {{ post.title }}



    {{ post.title }}
    {{ post.date }}
    
        {{ post.content }}

Большой! Теперь у нас есть шаблон, и нам просто нужно извлечь наши переменные из разметки с анализом и передать их в Jinja2.

В вашем main.py Добавьте следующий код:

from jinja2 import Environment, PackageLoader

env = Environment(loader=PackageLoader('main', 'templates'))
test_template = env.get_template('test.html')

data = {
    'content': parsed_md,
    'title': parsed_md.metadata['title'],
    'date': parsed_md.metadata['date']
}

print(test_template.render(post=data))

После импорта Jinja2 мы создаем среду для отображения Jinja2, где находится папка шаблонов. Убедитесь, что первый аргумент для Packageloader Название вашего файла Python в моем случае это Главная Отказ Далее мы получаем нужны шаблон, и после извлечения данных из нашего PARSED файла мы передаем их в Jinja2 во время звонка Визуализация () функция.

Ваш последний код должен выглядеть так:

from markdown2 import markdown
from jinja2 import Environment, PackageLoader

with open('content/turkish-pide.md', 'r') as file:
    parsed_md = markdown(file.read(), extras=['metadata'])

    env = Environment(loader=PackageLoader('main', 'templates'))
    test_template = env.get_template('test.html')

    data = {
    'content': parsed_md,
    'title': parsed_md.metadata['title'],
    'date': parsed_md.metadata['date']
    }

    print(test_template.render(post=data))

Если вы запустите свой main.py Теперь вы должны получить весь код из вашего test.html Файл с содержимым от вашего Turkish-pide.md Файл вставлен в подходящие места.

Теперь, когда мы знаем, как представлять HTML-страницы, используя jinja2, в Следующая часть Мы поставим все куски вместе и сделаем наши SSG.

Особая благодарность Джахангир Рахмонов Откуда я узнал концепции и его статья служил основой для этого урока.

Оригинал: “https://dev.to/nqcm/making-a-static-site-generator-with-python-part-1-3kn3”

Понимание того, как работают статические генераторы сайта

Преобразование Markdown до HTML

Создание и использование шаблонов

{{ post.title }}

Читайте ещё по теме: