本文介绍了模式实验室模板的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我对Pattern Lab来说还很陌生,但是我觉得如果这不是功能,那就应该了.

I'm pretty new to Pattern Lab, but I feel like if this isn't a feature, it should be.

本质上,我想在真实站点之后为Pattern Labs建模.在大多数(或许多)真实站点中,通常使用模板引擎.对于我用来管理视图层的任何主流技术(rails,django,ASP.Net或带有把手的节点),都是如此.在本示例中,我将使用把手,因为它最紧密地反映了Pattern Lab胡子语法.

Essentially, I want to model Pattern Labs after a real site. In most (or many) real sites it's common to use a templating engine. This is true of any mainstream technology I've used (rails, django, ASP.Net, or node with handlebars) to manage the view layer. I'll use handlebars in this example because it most closely mirrors the Pattern Lab mustache syntax.

模板引擎的强大功能之一是建立基本布局,其中可能包括<html><head><meta><body>{{> header }}{{> footer }}.然后,您将获得诸如{{{ body }}}{{ title }}之类的动态内容块.

One of the big powers of templating engines is building a base layout, which may include <html>, <head>, <meta>, <body>, {{> header }}, and {{> footer }}. Then, you have blocks of dynamic content like {{{ body }}} or {{ title }}.

模式实验室在使用_data.json,页面特定的json或参数来处理动态{{ title }}变量方面做得非常好.但是,为了使主体的整个内容动态化,您必须将所有内容写入json文件,或通过模式参数.但这会限制您的内容,因为您不能将其他部分作为参数传递或存储在json中.

Pattern Lab does a really good job at taking care of the dynamic {{ title }} variable using _data.json, page specific json, or parameters. However, in order to make the whole content of the body dynamic you'd have to write everything in the json file, or pass it via pattern parameters. But this would limit your content because you can't pass other partials as parameters or store them in json.

另一种选择是创建一堆伪模式,例如:

Another option could be to create a bunch of pseudo patterns for example:

<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>

但是随后您必须嵌套要使用的每个页面.

But then you'd have to nest every page that you wanted to use.

希望这会有所帮助并且有意义.希望我只是错过了一些超级公然的东西:)

Hopefully this helps and is relevant. Hopefully I'm just missing something super blatant :)

推荐答案

Brian-模式实验室节点的维护者.我将尽最大努力为Pattern Lab进行演讲,但是我最全面的了解是在 node版本.

Brian - maintainer of Pattern Lab Node here. I'll try my best to speak for Pattern Lab in general, but my most thorough familiarity is in the node version.

Pattern Lab是利用模板语言来构建分层模型的,这些模型利用了原本打算支持的原子设计原理.但是,Pattern Lab不是具有您提到的动态车身注射功能的成熟的模板引擎,例如Jekyll或ASP.NET.

Pattern Lab utilizes templating languages yes, to build up the hierarchical patterns which harness the atomic design principals it was intended to support.Pattern Lab, however, is not a full-fledged templating engine that has the dynamic body injection you mention, ala Jekyll or ASP.NET.

您对伪模式的评估不完全或非常至少,不一定像您做的那样复杂.如果您仔细查看该文档,将会发现单独的.json文件变体可以创建同一模板或页面的单独实例.

Your assessment of peudo-patterns is not exactly, or at the very least, not necessarily as complex as you make it. If you look closely in that doc, you'll see that individual .json file variants are what create separate instances of the same template or page.

所以不是

   {{# 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,其中数据针对博客模板.希望能对此有所解释...

and then dynamically swap in the date for individual pages. But again, this is really for design and development, not a production configuration, unless you engineer something to serve these results up the way you like it. Imagine if a file like https://github.com/pattern-lab/patternlab-node/blob/master/source/_patterns/04-pages/01-blog.json was an actual blog post, with any sibling blog posts similarly named 123-blog-post-name.json with data swapped out against the blog template. Hope that explain it a bit...

最后的提示我已经概述了如何使用Pattern Lab在以下位置设计,构建和维护生产的Jekyll网站: http://www.brianmuenzenmeyer.com/using-patternlab-to-design-build-and-maintain-a-website/.它成功地将Pattern Lab的设计/模块化优势与Jekyll/Github Pages的执行相结合.

A final noteI have outlined how I used Pattern Lab to design, build and maintain a production Jekyll site here: http://www.brianmuenzenmeyer.com/using-patternlab-to-design-build-and-maintain-a-website/. It successfully marries the design/modularity benefits of Pattern Lab with the execution of Jekyll/Github Pages.

秘诀在于利用模式输出(在文章中详细介绍)与jeykll include一起使用.这是我的布局文件的摘录:

The secret sauce is utilizing pattern exports (detailed in the article) to work with jeykll includes. Here's an excerpt of my layout file:

<body>

{% include organisms-header.html %}

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

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

所以,这并不是完美的,但是我相信我可以代表Brad和Dave所说,Pattern Lab并不是要成为生产站点的运营布局平台,它的动态内容交付可以在替换.json文件的情况下工作反对分层模板+部分集.

So, not perfect, but I believe I can speak for Brad and Dave in saying that Pattern Lab is not meant to be an operational layout platform for production sites, and it's dynamic content delivery works withing the context of substituting .json files against hierarchical templates + partial sets.

这篇关于模式实验室模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-06 00:05