WebCode — библиотека для Python, для написания Фронтэнда

Введение


Недавно я наткнулся на интересную библиотеку на GitHubWebCode. Библиотека позволяет писать на Python CSS и HTML код. Ранее я не встречал аналогов, поэтому решил изучить WebCode поподробнее.

Начало


Чтобы скачать WebCode нужно перейти по ссылке, а далее нажать на 'Clone or download' => 'Download ZIP'. (После извлечения файла, перенесите его в папку, где будете писать код)

Итак, перейдём к делу.

Первые строки, которые надо написать это:

import webcode as wb
wb.startuse(name='Test', header='Testing WebCode', css='forTesting', lang='ru')
wb.finuse(True)

В начале импортируем библиотеку, как wb. А дальше пишем базовую функцию startuse().

Первый аргумент в этой функции — название HTML файла, который библиотека будет генерировать, второй — имя вашего сайта во вкладке, третий — название CSS файла(если не собираетесь его создавать, напишите css=0) и наконец четвёртый аргумент отвечает за язык, на котором Вы будете писать текст. finuse() завершает работу и принимает 1 аргумент, который может быть либо True, либо False. Если Вы укажите True, то когда вы запустите файл, он автоматически откроется в браузере. Если же False, то он этого делать не будет.

Как можно было догадаться, между startuse() и finuse(), будет наш дальнейший код.

Давайте его напишем:

wb.writep(text='Первый текст на WebCode! Ура!', clss='simple-text', change=True)

Функция writep() добавляет HTML p тег на наш сайт, иными словами — пишет текст на нашу страницу. С первым аргументом text в этой функции — всё понятно, второй аргумент — это класс(в дальнейшем с помощью этого свойства, мы сможем изменить цвет или размер нашего текста), третий аргумент отвечает за то, будет ли наш текст принадлежать другому элементу. True — не будет, False — будет. Пример:

simple_text = wb.writep(text='Первый текст на WebCode! Ура!', clss='simple-text', change=False)
wb.writediv(text=simple_text, clss="writings", change=True)

Как видите, чтобы «положить» один элемент в другой, нам нужно создать переменную, которая будет содержать в нашем случае p тег, указать change=False, а далее указать переменную в text.

Примечание: функция writediv() аналогична writep(), только вместо p создаётся div элемент.

Можете запустить и посмотреть, что у нас получилось:

import webcode as wb

wb.startuse(name='Test', header='Testing WebCode', css='forTesting', lang='ru')
simple_text = wb.writep(text='Первый текст на WebCode! Ура!', clss='simple-text', change=False)
wb.writediv(text=simple_text, clss="writings", change=True)

wb.finuse(True)

Украшаем нашу страницу


Давайте сделаем наш сайт, более ярким. Для этого нам нужно написать несколько функций:

wb.stylestart()
wb.startclass(clss='simple-text', pseudo=0)
wb.usestyle('font-size', '24px', True)

wb.stylefin()

Функции stylestart() и stylefin() — это по сути тоже самое, что и startuse() finuse(), только теперь мы запускаем CSS, а не HTML код.

Помните, мы назначали writep() класс «simple-text»? Так вот, теперь мы его объявляем с помощью функции startclass(), задавая псевдо-классу(:hover, :active, :focus и т.д) значение 0, то есть его не объявляем. usestyle() принимает стандартные CSS свойства. К последнему usestyle() нужно приписать True. Так мы показываем, что после этой функции в нашем классе ничего не будет.

Теперь поменяем фон на нашей странице:

wb.startobject('body')
wb.usestyle('background-color', 'black', True)

Прошу заметить, что для тегов используется startobject(), а не startclass().

Используем преимущества Python для создания сайта


В написании кода на HTML и CSS зачастую возникает проблема: несколько раз писать одно и тоже. Но WebCode её решает:

for i in range(1, 7):
    wb.writeh(i, 'Я заголовок!') #Создаем h элемент. Первый аргумент отвечает за "важность" заголовка (h1, h2, h3...)

Как видите, использование данной библиотеки сильно облегчает жизнь программистам.
Вот весь код, который мы сегодня написали:

import webcode as wb

wb.startuse(name='Test', header='Testing WebCode', css='forTesting', lang='ru')
simple_text = wb.writep(text='Первый текст на WebCode! Ура!', clss='simple-text', change=False)
wb.writediv(text=simple_text, clss='writings', change=True)
for i in range(1, 7):
    wb.writeh(i, 'Я заголовок!') #Создаем h элемент. Первый аргумент отвечает за "важность" заголовка (h1, h2, h3...)

wb.finuse(True)

wb.stylestart()

wb.startclass(clss='simple-text', pseudo=0)
wb.usestyle('font-size', '24px', True)

wb.startobject('body')
wb.usestyle('color', 'white')
wb.usestyle('font-family', 'monospace')
wb.usestyle('background-color', 'black', True)

wb.stylefin()

Спасибо за чтение!
Tags:
Python, CSS, HTML

You can't comment this post because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author's username will be hidden by an alias.