Этот блог был впервые опубликован наwww.litreily.top
Pug — надежный, элегантный, многофункциональный шаблонизатор для Node.js.
pugоригинальное имяjade, переименован из-за проблем с авторскими правамиpug, а именно мопс. а такжеhexoмодуль по умолчаниюejsТакой же,pugЭто также механизм шаблонов, который можно использовать для быстрой разработки веб-сайтов и, конечно же, для дизайна статических сайтов блогов. Текущая тема, используемая на этом сайтеmanupassantтакже используетсяpug.
Эта статья направлена наHexoиспользуется вpugПример, чтобы проиллюстрировать его основной синтаксис.
Установить
# common install
npm install pug
# install for hexo blog
npm install hexo-renderer-pug --save
грамматика
pugотличный отhtml, первый не требует открытия и закрытия этикетки, напримерhtmlиз<p>Demo</p>,существуетpugиспользоватьp DemoВот и все.
отступ
pugЧувствителен к пробелам, чем-то похожpythonВкладкиtabчувствительный.pugИспользуйте пробелы в качестве отступов, и, конечно же, возможны мягкие табуляции. Метки на одном уровне должны быть выровнены по левому краю.
div
p Hello, world!
p Hello, pug.
Результат рендеринга следующий:
<div>
<p>Hellow, world!</p>
<p>Hello, pug.</p>
</div>
Примечания
pugиспользовать//-или//Аннотируйте код, прежний контент аннотаций не появляется после рендерингаhtmlфайл, последний наоборот.
//- html中不包含此行
// html中会包含此行
Атрибуты
pugПоместите атрибуты тега в круглые скобки()Внутри несколько атрибутов разделяются запятыми или пробелами. Кроме того, для этикеткиidа такжеclass,pugиспользовать#следуй за этикеткойid,использовать.следуй за этикеткойclass, вы можете установить несколькоclass.
h1#title Test title
img#name.class1.class2(src="/test.png" alt="test")
↓
<h1 id="title">Test title</h1>
<img id="name" class="class1 class2" src="/test.png" alt="test">
Включать
Чтобы облегчить повторное использование кода,pugпри условииincludeВключите функцию, следующий код будет_partialв каталогеhead.pugСодержимое файла включается в местоположение текущего вызова. немногоC/C++означает встроенную функцию.
doctype html
html(lang='en')
include _partial/head.pug
наследовать
Ниже приведен простойbaseшаблон, черезblockопределяет заголовок страницыheadи содержаниеbody. Кусокblockнесколько похожеC/C++Абстрактная функция должна быть определена в наследнике, чтобы заполнить конкретное содержимое.
//- base.pug
html
head
block title
body
block content
Следующие файлыextendsНаследуйте вышеуказанный шаблон, передайтеblockПерезаписать или заменить исходный блокblock. Конечно, преемник также может продолжать расширяться на исходной основе.
//- index.pug
extends base.pug
block title
title "Test title"
block content
h1 Hello world!
block article
определить переменную
pugпрошедший- var name = valueопределить переменные в виде
- var intData = 100
- var boolData = false
- var stringData = 'Test'
p.int= intData
p.bool= boolData
p.stringData= stringData
Следует отметить, что при ссылке на переменные необходимо добавить
=номер, в противном случае имя переменной по умолчанию будет использоваться как обычная строка.
Если вы хотите объединить переменные с другими строковыми константами или переменными, вы не можете использовать знак равенства, вы должны использовать#{}, который оценивает и экранирует переменные внутри фигурных скобок, что приводит к отображению выходных данных.
- var girl = 'Lily'
- var boy = 'Jack'
p #{girl} is so beautiful!
p And #{boy} is handsome.
условная структура
pugУсловные операторы аналогичны операторам других языков, а именно:
- var A = {value: 'Test'}
- var B = true
if A.value
p= A.value
else if B
p= B
else
p nothing
повторять
pugиспользуется вeachа такжеwhileреализовать итерацию цикла,eachОн может возвращать значение индекса текущего элемента, которое по умолчанию отсчитывается от 0.
//- each
ol
each item in ['Sun', 'Mon', 'Tus', 'Wen', 'Thu', 'Fri', 'Sat']
li= item
//- get index of each
- var week = ['Sun', 'Mon', 'Tus', 'Wen', 'Thu', 'Fri', 'Sat']
ol
each item, index in week
li= index + ':' + item
↓
<ol>
<li>Sun</li>
<li>Mon</li>
<li>Tus</li>
<li>Wen</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
</ol>
<ol>
<li>0:Sun</li>
<li>1:Mon</li>
<li>2:Tus</li>
<li>3:Wen</li>
<li>4:Thu</li>
<li>5:Fri</li>
<li>6:Sat</li>
</ol>
whileМетод вызова следующий:
//- while
- var day = 1
ul
while day < 7
li= day++
Minix
mixinимясмешать, как и в других языках программированияфункция, а также для повторного использования кода с параметрами или без них, определяемыми следующим образом:
mixin menu-item(href, name)
li
span.dot ●
a(href=href)= name
в,menu-itemимя, используемое при вызове, которое можно рассматривать как имя функции,hrefа такжеnameявляется параметром. То жеопределить переменнуюсказал,a(href=href)= nameВо-вторых=для преобразования последнихnameРассматривается как параметр, а не как строка «имя».
передачаmixinОпределенный блок кода, который необходимо передать+с последующимmixinНазвание и параметры:
+menu-item('/Archives','Archives')
+menu-item('/About','About')
mixinЭто называется мистин, потому что его синтаксис не ограничивается вызовами функций, вmixinблок можно использоватьblock
mixin print(post)
if block
block
else
p= post
+print("no block")
+print("")
div.box
p this is the content of block
↓
<p>no block</p>
<div class="box"><p>this is the content of block</p></div>
JavaScript
Обратите внимание на следующееpugпервая строка заявления.Нет.
script(type='text/javascript').
var data = "Test"
var enable = true
if enable
console.log(data)
else
console.log('nothing')
↓
<script type='text/javascript'>
var data = "Test"
var enable = true
if enable
console.log(data)
else
console.log('nothing')
</script>
Для простых скриптов используйтеpugНичего страшного, сложные пишутся отдельно.jsфайл, затем передатьpugЦитировать удобнее, а способ цитирования следующий:
script(type='text/javascript', src='/path/to/js')
//- with hexo function url_for
script(type='text/javascript', src=url_for(theme.js) + '/ready.js')
гексо-связанный
существуетhexoиспользуется в темеpug, вы можете использоватьhexoПредоставленные глобальные переменныеconfig,themeдля вызова корневого каталога блога соответственно_config.ymlПараметры в файле и в корневой директории темы_config.ymlпараметры в файле.
//- blog config
p= config.description
//- theme config
p= theme.title
Конечно,pugможно использовать непосредственно вhexoДругие глобальные переменные и вспомогательные функции предоставлены, см. Детали для использованияhexoизДокументация
Пример
//- head.pug
head
meta(http-equiv='content-type', content='text/html; charset=utf-8')
meta(content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0', name='viewport')
meta(content='yes', name='apple-mobile-web-app-capable')
meta(content='black-translucent', name='apple-mobile-web-app-status-bar-style')
meta(content='telephone=no', name='format-detection')
meta(name='description', content=config.description)
block title
link(rel='stylesheet', type='text/css', href=url_for(theme.css) + '/style.css' + '?v=' + theme.version)
link(rel='Shortcut Icon', type='image/x-icon', href=url_for('favicon.png'))
script(type='text/javascript', src='//cdn.bootcss.com/jquery/3.3.1/jquery.min.js')
block more
//- base.pug
doctype html
html(lang='en')
include _partial/head.pug
block more
link(rel='stylesheet', type='text/css', href=url_for(theme.plugins) + '/prettify/doxy.css')
script(type='text/javascript', src=url_for(theme.js) + '/ready.js' + '?v=' + theme.version, async)
//- body
body: #container.box
.h-wrapper
include _partial/nav-menu.pug
// article content
block content
include _partial/footer.pug
в:
-
theme.*Настроить файл для темы_config.ymlпараметры в -
url_forдляhexoФункция предоставлена, чтобы найти пути ресурсов
Суммировать
pugОн предоставляет несколько методов, таких как включение, наследование и миксин для повторного использования кода Синтаксис лаконичен и прост для понимания За исключением того, что изучение значения различных знаков препинания для начинающих занимает некоторое время, это не так уж сложно.
конечно,pugЕсть много других функций, но для моего текущего варианта использования этого достаточно.