Question

我尝试使用Markdown-Files中的元数据进行导航。所以我的问题是我只使用jekyll用于网站并且用于降价，问题是我不知道如何获取元数据并将其放入jekyll导航中。

我的导航默认页面如下所示：

<nav id="subNav">
    {% assign pages = site.pages | sort:"weight"  %}
    <ul class="secondLevel">
        {% for p in pages %}
        <li>
            <a {% if p.url == page.url %}class="active"{% endif %} href="{{ p.path }}">
                {{ p.title }}
            </a>
        </li>
        {% endfor %}
    </ul>
</nav>

和Markdown的Gulpfile看起来像这样：

gulp.task('markdown', function() {
return gulp.src('src/fileadmin/layout/compass/scss/media_all/*.md')
.pipe(markdown({
    gfm: true, 
    tables: true,
    breaks: true, 
    pedantic: true, 
    sanitize: false, 
    smartLists: true,
    smartypants: true 
}))

.pipe(insert.transform(function(content,file){
        var ext = path.extname(file.path),
            base = path.basename(file.path, ext); // https://nodejs.org/api/util.html | http://stackoverflow.com/questions/31612192/get-file-basename-in-gulp-replacer-task
        var comment = '---\nlayout: default\ntitle: ' + base.charAt(0).toUpperCase() + base.substr(1) + '\n---\n\n';// http://phpjs.org/functions/ucfirst/ | http://www.w3schools.com/jsref/jsref_touppercase.asp
        return comment + content;
}))
.pipe(gulp.dest(destDir));

}）;

因此gulpfile的一部分用于非动态导航。如何从Markdown元数据中获取动态导航？我希望有人能理解我的问题是什么，可以帮助...

Answer 1

由于您的md文件包含元数据（假设位于文件顶部），因此您需要使用gulp-meta-markdown代替gulp-markdown来呈现它们。

我已经将gulp-markdown分叉到另一个支持元数据降价的版本gulp-meta-markdown。它支持以下格式的降价：

---
title: Lorem ipsum dolor sit amet
---
# Heading

通过以下方式将markdown替换为此模块：

var metaMarkdown = require('gulp-meta-markdown');
var data = require('gulp-data');
...
return gulp.src('src/fileadmin/layout/compass/scss/media_all/*.md')
    .pipe(metaMarkdown({
        gfm: true, 
        tables: true,
        breaks: true, 
        pedantic: true, 
        sanitize: false, 
        smartLists: true,
        smartypants: true 
    }))

这样，您将通过file.contents属性接收字符串化的对象字符串。

{
    meta: {
        title: "Lorem ipsum dolor..."
    },
    html: <rendered html code>
}

为了获得此对象，您需要进行解析（您仍然可以使用gulp-insert）

.pipe(data(function(file) {
    var fileObj = JSON.parse(content);

    // do whatever you want with 
    // fileObj.meta
    // fileObj.html

    file.contents = new Buffer(fileContents.html.toString());
}))

从这一点开始，您可以将导航放置到元数据部分并将其用于渲染。

使用Jekyll，Gulp和Markdown进行动态排序导航

1 个答案: