eine dynamisch sortierte Navigation mit Jekyll, Gulp und Markdown

Question

Ich versuche eine Navigation zu machen, die Metadaten aus meinen Markdown-Dateien verwendet. Also mein Problem ist, dass ich nur jekyll für die Website und schlucke für Markdown und das Problem ist, dass ich nicht weiß, wie ich schlucke die Metadaten genommen und in jekyll navigation.

meine Standardseite für meine Navigation wie folgt aussehen:

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

und meine Gulpfile für Markdown suchen wie folgt aus:

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

});

So wurde der Teil der Gulpfile für eine nicht dynamische Navigation verwendet. Wie kann ich eine dynamische Navigation aus meinen Markdown-Metadaten herausholen? Ich hoffe jemand kann verstehen, was mein Problem und ... helfen kann

Answer 1

Da Ihre md Dateien enthält Metadaten (an der Spitze der Datei angenommen wird), müssen Sie gulp-meta-markdown statt gulp-markdown zu mit ihnen zu machen.

Ich bereits gespalten gulp-markdown zu einer anderen Version, die Metadaten Markdown hier unterstützt gulp-meta-markdown. Es unterstützt das folgende Format von Abschlag:

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

ersetzen markdown mit diesem Modul durch folgende:

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

Dadurch werden Sie Zeichenfolgestring des Objekts durch file.contents Eigenschaft erhalten.

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

Um diese Aufgabe zu bekommen, benötigen Sie einen Parsen tun

.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()); 
})) 

Von diesem Punkt (noch Sie gulp-insert verwenden können), können Sie die Navigation zu Metadaten Abschnitt platzieren und es verwenden, für das Rendern .