node.js - Jadeの改行はどうですか？

Question

これは簡単なことだと確信していますが、サンプルコードのスニペットは見つかりませんでした。改行を挿入する最良の方法は何ですか (別名、古き良き br/)?

空の行の先頭に「br」を配置すると、次のようにレンダリングされます<br/>が、複数行のテキストを表示する必要がある場合、結果のコードは非常に冗長になります。

.poem 
    p 
        | Si chiamava Tatiana, la sorella… 
        br 
        | Noi siamo i primi, almeno lo crediamo
        br 
        | Che un tale nome arditamente nella
        br 
        | Cornice d’un romanzo introduciamo.
        br 
        | E che dunque? E’ piacevole, sonoro.
        br 
        | Lo so che a molti privo di decoro 
        br 
        | Apparirà, già fuori moda, e degno
        br 
        | Piuttosto d’un ancella, certo segno, 
        br 
        | confessiamolo pur senza paura,
        br 
        | di quanto s’è noialtri al gusto avversi
        br 
        | nei nostri nomi (a non parlar di versi). |br
        br 
        | Credemmo conquistare la cultura,
        br 
        | e non ne abbiamo preso, in conclusione,
        br 
        | che la ricerca dell’affettazione.

これを解決するより良い方法はありますか？(ちなみに画像タグで同じものをお願いしてます…)

score 59 · Accepted Answer

最もクリーンで簡単な解決策は、style 属性を使用することですwhite-space: pre;。

.poem 
    p(style='white-space:pre;')
        | Si chiamava Tatiana, la sorella… 
        | Noi siamo i primi, almeno lo crediamo
        | Che un tale nome arditamente nella
        | Cornice d’un romanzo introduciamo.
        | E che dunque? E’ piacevole, sonoro.
        | Lo so che a molti privo di decoro 
        | Apparirà, già fuori moda, e degno
        | Piuttosto d’un ancella, certo segno, 
        | confessiamolo pur senza paura,
        | di quanto s’è noialtri al gusto avversi
        | nei nostri nomi (a non parlar di versi). |br
        | Credemmo conquistare la cultura,
        | e non ne abbiamo preso, in conclusione,
        | che la ricerca dell’affettazione.

score 52 · Accepted Answer

私はそれを考え出した。先に進んで、そこに古き良き時代の<br />タグを投げてください. あなたは金色になるでしょう:)

p
 |hey this is my <br />
 |broken paragraph!

更新br: Jade は、改行のみの使用をサポートするようになりました。

score 8 · Accepted Answer

これは答えではないようです。

brJade/Pug のインラインタグ形式を使用してインラインタグを追加することによっても実行できます。

p.
    Some text on the first line.#[br]
    Some text on the second line.

プロデュース:

  <p>Some text on the first line.<br>
    Some text on the second line.
  </p>

score 7 · Accepted Answer

お気づきのように.. この情報を取得している場合.. たとえば、手動で改行を入力した SQL データベース (フォームのテキストエリアなど) からサーバー上で次の操作を行うことができます。あなたの出力

var contentParse = function(content){
    content = content.replace(/\n?\r\n/g, '<br />' );
    return content;
};

そして翡翠の使用で

!{content}

！レンダリングしようとしている変数に生の html を挿入していることを jade に知らせます。

ソース: https://github.com/visionmedia/jade#tag-text

score 5 · Accepted Answer

行ごとに div を使用して堅牢に:

p.poem 
  .line Si chiamava Tatiana, la sorella… 
  .line Noi siamo i primi, almeno lo crediamo
  .line Che un tale nome arditamente nella
  .line Cornice d’un romanzo introduciamo.
  .line E che dunque? E’ piacevole, sonoro.
  .line Lo so che a molti privo di decoro 
  .line Apparirà, già fuori moda, e degno
  .line Piuttosto d’un ancella, certo segno, 
  .line confessiamolo pur senza paura,
  .line di quanto s’è noialtri al gusto avversi
  .line nei nostri nomi (a non parlar di versi).
  .line Credemmo conquistare la cultura,
  .line e non ne abbiamo preso, in conclusione,
  .line che la ricerca dell’affettazione.

または単純に pre:

style pre.poem { font-family:ariel }

pre.poem 
  Si chiamava Tatiana, la sorella… 
  Noi siamo i primi, almeno lo crediamo
  Che un tale nome arditamente nella
  Cornice d’un romanzo introduciamo.
  E che dunque? E’ piacevole, sonoro.
  Lo so che a molti privo di decoro 
  Apparirà, già fuori moda, e degno
  Piuttosto d’un ancella, certo segno, 
  confessiamolo pur senza paura,
  di quanto s’è noialtri al gusto avversi
  nei nostri nomi (a non parlar di versi). 
  Credemmo conquistare la cultura,
  e non ne abbiamo preso, in conclusione,
  che la ricerca dell’affettazione.

score 0 · Accepted Answer

改行を保持し、p 行をドットで終了するスタイルを段落に与えます。

.poem 
  p(style="white-space: pre-line;").
    Si chiamava Tatiana, la sorella… 
    Noi siamo i primi, almeno lo crediamo
    Che un tale nome arditamente nella
    Cornice d’un romanzo introduciamo.
    E che dunque? E’ piacevole, sonoro.
    Lo so che a molti privo di decoro 
    Apparirà, già fuori moda, e degno
    Piuttosto d’un ancella, certo segno, 
    confessiamolo pur senza paura,
    di quanto s’è noialtri al gusto avversi
    nei nostri nomi (a non parlar di versi).
    Credemmo conquistare la cultura,
    e non ne abbiamo preso, in conclusione,
    che la ricerca dell’affettazione.

score 0 · Accepted Answer

PUG テンプレートから SASS ファイルを生成していeachましたが、新しい行にアイテムが必要でした。
これは私のために働いたものです：

//- custom-variables.pug
//- GENERATE COLORS
each color, idx in colors
    | #{idx}: #{color};
    |

const pug = require("pug");

const colors = {
  $primary: "#0074d9",
  $secondary: "#ff4136",
  $green: "green",
};

// Compile the source code
const compiledFunction = pug.compileFile("./scripts/custom-variables.pug");

console.log(compiledFunction({ colors }));
// outputs:
/*
$primary: #0074d9;
$secondary: #ff4136;
$green: green;
*/

score -1 · Accepted Answer

最初の検索で年フィルターを使用していない場合に備えて: Jade HTML で br タグを追加する方法

前に | を付けて新しい行にテキストを配置します。

p first line
br
| second line

node.js - Jadeの改行はどうですか？

12 に答える 12

Related

Reference