движок шаблонов jade (под node.js): многострочный блок без символа трубы - PullRequest
Новая
       7

движок шаблонов jade (под node.js): многострочный блок без символа трубы

16 голосов
/ 17 января 2011

Я сейчас использую Jade для нового проекта. Кажется, он хорошо подходит для составления макетов веб-приложений, но не для написания статического содержимого, такого как веб-страница с

элементами, содержащими текст.

Например, чтобы создать такой абзац, я считаю, что мне нужно сделать следующее: 

p
  | This is my long,
  | multi-line
  | paragraph.

Для статической веб-страницы, полной реальных абзацев текста, использование нефрита становится бременем из-за того, что этот символ в начале каждой строки.

Существует ли какой-то синтаксический сахар для маркировки всего блока как текстового узла, как символ канала для каждой строки? Или существующий фильтр, о котором я не знаю?

Одно из решений, которое я изучаю, - это создание: блочного фильтра или чего-то другого, который добавляет каждую строку к | а затем передает его Jade, но документация jade по созданию фильтров, по меньшей мере, недостаточна, поэтому для выяснения может потребоваться некоторое время. Если кто-то может дать рекомендации относительно такого решения, я был бы признателен.

Ответы [ 2 ]

39 голосов
/ 28 апреля 2011

со страницы jade github : 

p.
foo asdf
asdf
 asdfasdfaf
 asdf
asd.

производит вывод: 

<p>foo asdf
asdf
  asdfasdfaf
  asdf
asd
.
</p>

Трейлинг после p - это то, что вы ищетедля.

8 голосов
/ 18 января 2011

После некоторой обработки я разработал детали фильтра, который выполняет это. Размещение ответа здесь, так как я думаю, что это будет полезно для других, использующих Jade.

Код для создания фильтра оказывается довольно простым: 

var jade = require ("jade");

jade.filters.text = function(block, compiler){
    return new TextBlockFilter(block).compile();
};

function TextBlockFilter(node) {
    this.node = node;
}

TextBlockFilter.prototype.__proto__ = jade.Compiler.prototype;

TextBlockFilter.prototype.visit = function(node){

    // first this is called with a node containing all the block's lines
    // as sub-nodes, with their first word interpreted as the node's name
    //
    // so here, collect all the nodes' text (including its name)
    // into a single Text node, and then visit that instead.
    // the child nodes won't be visited - we're cutting them out of the
    // parse tree

    var text = new jade.nodes.Text();
    for (var i=0; i < node.length; i++) {
        text.push (node[i].name + (node[i].text ? node[i].text[0] : ""));
    }
    this.visitNode (text);
};

И тогда разметка выглядит следующим образом. Обратите внимание, что он позволяет вам включать другие вещи из нефрита между: текстовые блоки: 

p
  :text
    This is my first line of text,
    followed by another
    and another.  Now let's include a jade link tag:
  a(href="http://blahblah.com")
  :text
    and follow it with even more text 
    and more,
    etc
...