3

我一直在寻找一种使用 grunt 预编译内联降价的方法。我选择 Markdown 是因为，我正在处理大量具有简单格式的纯文本，但我不会完全反对 JSON（或类似的）。

这是一个例子：我在寻找什么：

<body>

    <div id="content">
        <div class="text">
            ## Markdown Headline
            markdown Paragraph 1
        </div>
        <div class="text">
            ## Markdown Headline
            Markdown Paragraph 2
        </div>
    </div>

</body>

更好的是：

<body>

    <div id="content">
        <div class="text">
            {include: /path/to/markdown_file_1.md:block_1}
        </div>
        <div class="text">
            {include: /path/to/markdown_file_1.md:block_2}
        </div>
    </div>

</body>

我不希望从 Markdown 创建模板，只是一种包含文本的方式，然后使用“grunt build”（或者在 yeoman 的情况下，也用于“grunt server”）将其渲染/编译为 html。

这意味着上面的示例将编译为诸如...

<body>

    <div id="content">
        <div class="text">
            <h1>Markdown Headline</h1></p>
            Lorem ipsum <b>dolar</b> set <a href="http://amet.com/">amet</a>.
        </div>
        <div class="text">
            <h1>Markdown Headline</h1></p>
            Integer <i>posuere erat a ante</i> venenatis dapibus posuere velit aliquet.
        </div>
    </div>

</body>

每个 html 页面都会有所不同，因此无法使用模板，并且由于我正在接收副本（作为降价文件），我认为如果我可以在 html 中“包含”降价并让 grunt 为我编译它会很棒。

我查看了 stackoverflow 的解决方案，但一无所获（也许，我搜索错了）

我还研究了以下内容：

4

2 回答 2

2

Assemble非常适合这个。

使用 HTML 内联编写 markdown，或者在 Grunt 配置中指定您想要的任何 markdown，Assemble 将使用它。使用以下帮助器将内联或外部降价转换为 HTML：

{{md}} 助手

此帮助程序将处理 markdown 文件，如包含，并将 markdown 转换为 HTML：

{{md "path/to/file.md"}}

{{markdown}} 块助手

这是一个块帮助器，可让您使用 HTML 内联编写 markdown：

{{#markdown}}
# Foo
> This is markdown
{{/markdown}}

这种方法的美妙之处在于您可以同时编写 HTML 和 markdown，或者只需编写 markdown，它就可以工作。

以下是我构建新博客的方式：

blog: {
  options: {
    layout: 'templates/layouts/default.hbs'
  },
  files: {
    '<%= site.dest %>/': ['content/*.md']
  }
}

我的布局，default.hbs看起来像这样：

<html lang="en">
  <head>
    {{> head }}
  </head>
  <body>
    {{> nav-main }}
    <div class="container">
    {{#markdown}}
      {{> body }}
    {{/markdown}}
    </div>
    {{> footer }}
  </body>
</html>
于 2013-11-17T09:36:06.133 回答
1

使用grunt-markdown的组合（根据 Simon 的评论）来呈现 Markdown 和grunt-import以将其注入到您的构建中。一个示例配置（未经测试，因此您可能需要稍微尝试一下）：

module.exports = function(grunt) {
    grunt.initConfig({
        markdown: {
            build: {
                files: [{
                    expand: true,
                    src: 'path/to/markdown/**/*.md',
                    dest: 'path/to/build/',
                    ext: '.html'
                }]
            }
        },
        import: {
            build: {
                src: 'path/to/build/**/*.html',
                dest: 'path/to/build/'
            }
        }
    });
    grunt.registerTask('build', ['markdown', 'import']);
}

导入任务采用@import "path/to/another/file";源文件中的字符串，并将该文件的内容注入目标文件。

于 2013-11-09T14:26:58.933 回答