Enthalten SVG-xml im Jade-Vorlage

Ist es möglich, erstellen Sie eine Jade-mixin, die eine Datei liest aus der Datei-system, und hallt es in der gerenderten HTML?

Habe ich versucht, dieses...

mixin svg(file)
    - var fs = require("fs");
    - var xml = fs.readFileSync(file)
    div= xml

... aber es schlägt fehl, da require existiert nicht.

InformationsquelleAutor Billy Moon | 2014-05-28
  1. 22

    Ich denke, es gibt zwei Möglichkeiten, dies zu erreichen. Letztere zeigt nur den geraden Weg in den Fall, nicht mit Mixins in Verbindung akzeptabel ist für Sie. Die erste Lösung hüllt Ihr Ansatz:

    A: Pass variable require oder fs zu Ihrem jade-Vorlage

    Stellen Sie sicher, dass die benötigten Funktionen zur Verfügung stehen (scoped) während die jade-template-parsing. Angenommen, Sie sind mit express-dies könnte etwa so Aussehen:

    app.get('/', function(req,res) {
  res.render('portfolio.jade', {
    title: 'svg with jade test',
    fs: require('fs')
  })
});

    Nun Ihre mixin sollte die Arbeit mit zwei geringfügigen änderungen:

    mixin svg(file)
  - var xml = fs.readFileSync(file)
  div!= xml

    Können Sie auch einfach { require: 'require' } als ein lokal auf dem jade-Vorlage und verwenden Sie Ihre original-mixin-code. Beachten Sie, dass in jedem Fall haben Sie zu unterdrücken Flucht vor der Ausgabe mit != zur übertragung von SVG-markup, so dass es interpretiert und gerendert werden, statt angezeigt als (HTML -) text. Auch bewusst sein, dass fs Leben in Ihre app/- controller-code und Pfade müssen relativ ausgedrückt, z.B.:

    mixin('public/images/my-logo.svg')

    B: Oder nutzen Sie einfach sind (ohne Mixins in Verbindung)

    Jade ist in der Lage, einschließlich andere Art von Inhalten, so dass eine einfache 

    div
  include images/my-logo.svg

    übernimmt diese Aufgabe als gut. Leider funktioniert das nicht dynamisch, so dass Sie nicht zählen Dateien mit übergebenen Variablen innerhalb von Mixins in Verbindung. Aber: solange man nicht planen bereichern Sie Ihre mixin mit zusätzlicher Logik, diese Lösung nicht selbst produzieren (viel) mehr code.

    • Sie brauchen nicht != im div im Fall B, da Sie die include-Datei innerhalb des div als eine partielle.
    • Vielen Dank für diese Korrektur, ich habe endlich behoben!
    InformationsquelleAutor matthias
  2. 1

    Oben Antworten funktionieren, aber wenn Sie wollen, um eine SVG-inline. Sie können es so machen.

    //- Cover.
.ywp_title
    h1
        | Some text
        span
            | More Span Text
            svg.bg_svg(version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 430 100" style="enable-background:new 0 0 430 100;" xml:space="preserve")
                g(style="fill: #BADA55;")
                    path(style="fill: pink;" class="public-spaces-bg-fill" d="M356.2,60.1C356.2,60.1,356.2,60.1,356.2,60.1c0.1,0,0.1,0,0.2,0C356.3,60.1,356.3,60.1,356.2,60.1 M424.4,73.2c0-2.8-2-6.1-3.2-9.8c-2-5.8-4-11.7-6.3-17.5c-0.1-0.2-0.1-0.3-0.2-0.5c0,0,0,0,0,0v0c-0.7-1.4-1.8-2.4-3.4-3.1 c-12-5.5-26.3-7.4-40.3-8.6c18,0.1,36,0.4,54,0.6c-0.6,0-4.5-13.4-4.9-14.3c-0.4-1-4.1-14.2-5.2-14.2C380.4,5.4,345.8,5,311.3,5.1 c-66.5,0.2-133.3,1.8-199.3,9.8c-20.8,2.5-41.7,5.4-62.2,9.6c-2.1,0.4-4.2,0.9-6.4,1.3l-17.7,4.4c-1.1,0.3-2.3,0.7-3.4,1.1 c-5.1,1.7-12.1,3.6-15.7,7.8c-1.2,1.4-1.7,2.8-1.2,4.6c0.3,1,0.7,2,1,3.1C13,71.7,18.1,75.5,20.1,76.6c7.7,4.1,16.4,6,25,7.5 c43.4,7.7,88,9.4,132.1,10.3c44.7,0.9,89.5,0.2,134.1-1.8c21.6-1,43.2-2.3,64.6-5c14.1-1.8,31.6-2.6,44.6-9.1 C423.3,76.9,424.4,75.2,424.4,73.2c0,0.1,0.1,0.2,0.1,0.2C424.5,73.4,424.4,73.3,424.4,73.2")
        | and more text.
    • Nicht der Beantwortung der ursprünglichen Frage, aber es ist das, was ich brauchte. Das funktioniert gut mit den Ergebnissen erhalten Sie von fontawesome.com/how-to-use/server-side-rendering, das Ihnen erlaubt, die integrierten Symbole ohne Installation von fontawesome Zeug. Natürlich, sollte zeigen, wo die Symbole herkommen und Ehre der Lizenz, denke ich.
    InformationsquelleAutor Ahmad Awais
  3. 0

    Habe ich mehr Glück mit object wie

    a.svg(href='/')
    object(type="image/svg+xml" data="/img/#{data.menu.img}.svg")
    | #{data.menu.title}

    • Als Allgemeine Lösung für die Anzeige von svg ist mit skriptfähigen Inhalt, das ist, was ich Tue, aber op ist zu Fragen, speziell etwa in den xml-Inhalt in der jade-Ausgang, sodass das nicht wirklich gelten.
    InformationsquelleAutor tomByrer
Schreibe einen Kommentar