Введение
Недавно я наткнулся на интересную библиотеку на GitHub — WebCode. Библиотека позволяет писать на 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()
Спасибо за чтение!