Шаблоны Lab Lab

Я довольно новичок в Pattern Lab, но я чувствую, что если это не особенность, так и должно быть.

По сути, я хочу смоделировать Pattern Labs после реального сайта. На большинстве (или многих) реальных сайтах часто используется шаблонизатор. Это верно для любой основной технологии, которую я использовал (rails, django, ASP.Net или узел с рулем) для управления уровнем представления. В этом примере я буду использовать руль, потому что он наиболее точно отражает синтаксис усов Pattern Lab.

Одна из главных возможностей шаблонизаторов - создание базовой компоновки, которая может включать <html>, <head>, <meta>, <body>, {{> header }}, а также {{> footer }}, Затем у вас есть блоки динамического контента, такие как {{{ body }}} или же {{ title }},

Pattern Lab действительно хорошо справляется с динамикой {{ title }} переменная с помощью _data.json, специфичный для страницы json, или параметры. Однако для того, чтобы сделать все содержимое тела динамическим, вы должны записать все в файл json или передать его через параметры шаблона. Но это ограничит ваш контент, потому что вы не можете передавать другие партиалы в качестве параметров или сохранять их в json.

Другим вариантом может быть создание группы псевдо шаблонов, например:

<div class="main-container">
{{> organisms-header }}
    <div class="page-content">
        {{# first }}
            {{> organisms-first-page }}
        {{/ first }}
        {{# second }}
            {{> organisms-second-page }}
        {{/ second }}
        {{# third }}
            {{> organisms-third-page }}
        {{/ third }}
    </div>
{{> organisms-footer }}
</div>

Но тогда вам придется вкладывать каждую страницу, которую вы хотите использовать.

Надеюсь, это поможет и актуально. Надеюсь, мне просто не хватает чего-то супер вопиющего:)

Источник

2 ответа

Решение

Брайан - сопровождающий Pattern Lab Node здесь. Я сделаю все возможное, чтобы говорить за Pattern Lab в целом, но мое самое тщательное знакомство с версией узла.

Pattern Lab использует языки шаблонов да, для построения иерархических шаблонов, которые используют элементарные принципы проектирования, которые он должен был поддерживать. Pattern Lab, однако, не является полноценным движком шаблонов с динамической инъекцией тела, о которой вы упомянули, например, Jekyll или ASP.NET.

Ваша оценка peudo-паттернов не совсем, или, по крайней мере, не обязательно настолько сложна, как вы это делаете. Если вы внимательно посмотрите в этом документе, вы увидите, что человек .json Варианты файлов - это то, что создает отдельные экземпляры одного и того же шаблона или страницы.

Так что вместо

   {{# first }}
        {{> organisms-first-page }}
    {{/ first }}
    {{# second }}
        {{> organisms-second-page }}
    {{/ second }}
    {{# third }}
        {{> organisms-third-page }}
    {{/ third }}

ты мог бы сделать

        {{> organisms-page }}

а затем динамически поменять дату для отдельных страниц. Но опять-таки, это действительно для проектирования и разработки, а не для производственной конфигурации, если вы не спроектируете что-то, чтобы служить этим результатам так, как вам нравится. Представьте себе, что файл типа https://github.com/pattern-lab/patternlab-node/blob/master/source/_patterns/04-pages/01-blog.json был реальным сообщением в блоге, причем любые сообщения в одном из родственных блогов аналогично названный 123-blog-post-name.json с данными, замененными на шаблон блога. Надеюсь, что это немного объяснить...

Последнее замечание, которое я обрисовал в общих чертах, как я использовал Pattern Lab для проектирования, создания и поддержки рабочего сайта Jekyll здесь: http://www.brianmuenzenmeyer.com/using-patternlab-to-design-build-and-maintain-a-website/. Он успешно сочетает преимущества дизайна / модульности Pattern Lab с исполнением Jekyll/Github Pages.

Секретный соус использует экспорт шаблонов (подробно описано в статье) для работы с jeykll. Вот выдержка из моего файла макета:

<body>

{% include organisms-header.html %}

<main role="main">
  {{ content }}
</main>

<footer>
  {% include organisms-footer.html %}
</footer>
...
</body>

Итак, не идеально, но я полагаю, что могу говорить за Брэда и Дейва, говоря, что Pattern Lab не предназначена для использования в качестве платформы рабочего макета для производственных сайтов, и ее динамическая доставка контента работает в контексте замены файлов.json на иерархические шаблоны. + частичные множества.

Источник

Это больше проблема с усами, чем с Pattern Lab. Редакции PHP и Node просто используют библиотеки Усов для каждого языка соответственно. К сожалению, в официальной спецификации нет концепции раскладок. Параметры шаблона реализованы вне самого Усача.

Поскольку редакции PHP и Node становятся более модульными, я думаю, мы увидим, что макеты приходят в Pattern Lab из языков шаблонов, которые поддерживают это изначально. Например, сейчас есть версия Twig PHP-версии Pattern Lab. Он использует "расширяет" как способ работы с макетами. Извините, мне не хватает представителя, чтобы опубликовать ссылку на пример.

Таким образом, в некотором смысле это функция, которая появится, но это не то, что реализуется непосредственно командой Pattern Lab. FWIW, я думаю, что макеты, реализованные таким образом, работают против принципов, лежащих в основе Pattern Lab, но разработчики должны выяснить, как они лучше всего хотят использовать инструмент.

Источник
Другие вопросы по тегам