マニュアル: Interactive Markdown(仮)

投稿日: 更新日:

概要

  • baseof.html(各ページのテンプレート)に、以下の定義を加える。
    • vue_computed
    • vue_variables
    • vue_delimiters
      • 入力: YAML Front Matterのdelimiters
      • 出力: 2要素の配列
    • init_vue
      • jQueryを使って1、ロード時に呼び出す。
  • site.js
    • init_vue()の定義
      • 単にVueインスタンスを作成しているだけ。
      • id="content"はHugoテーマで定義
      • vueをグローバル変数にしているのは、デバッグのため。

baseof.html

  var vue_computed =
  {
    {{- with .Params.computed }}
    {{- range $name, $hash := . }}
    {{- $value := index $hash "value" }}
    "{{ $name }}": function() { {{ $value | safeJS }} },
    {{- end }}
    {{- end }}
  };

  var vue_variables =
  {
    {{- range $name, $hash := .Params.variables }}
      {{- $value := index $hash "value" }}
      {{- $func := index $hash "function" }}
      {{- if (eq (index $hash "type") "number") }}
        {{- if $func }}
          "{{ $name }}": {{ $func | safeJS }},
        {{- else }}
          "{{ $name }}": {{ $value }},
        {{- end }}
      {{- else }}
        {{- if $func }}
          "{{ $name }}": {{ $func | safeJS }},
        {{- else }}
          "{{ $name }}": "{{ $value }}",
        {{- end }}
      {{- end }}
    {{- end }}
  };

  var vue_delimiters = {{ default (slice "{{" "}}") .Params.delimiters }};
  $(
    function() {
      init_vue(vue_variables, vue_computed, vue_delimiters);
    }
  );

YAML Front Matter

今のところこんな感じです。

  • delimiters: Vue.jsが使用するデリミタの配列(デフォルト: ['{{', '}}'])
  • variables(Hash)
    • キー: 変数名
      • -<は使用不可2
      • 英大文字は使用不可3
    • 値: Hash
      • 共通項目
        • type: データ型("text", "number", "select")
      • 以下のいずれかが必須(type=select除く)
        • value: デフォルト値
        • datetime: 日付フォーマット
        • function: 値を返す式。ただし以下の注意点がある。
          • returnは付けない。
          • 最後に;は付けない。
          • 例: moment().format("YYYYMMDD")
      • type=selectのときのみ
        • options(Array of Hash): 選択肢を記載する。
          • value: 選択肢の値
          • label: 選択肢のラベル
  • computed(Hash)
    • キー: 変数名(-<は使用不可)
    • value: 変数の値。ただし以下のようにすること(Vue.jsのcomputedより)。
      • 他の変数にアクセスするときは this.value のように this を付ける。
      • 戻り値には return を付ける。
delimiters: ["${", "}"]
variables:
    filepath:
        value: "css/style.css"

制限事項

コードブロックに言語名をつけると、うまく展開されないことがあります。 理由は、ハイライトに使用しているPrism.jsが先に実行されるからです。

ハイライトを使わない、 もしくは、delimitersを設定して、ハイライトされないようにしてください。


  1. Bootstrapを使用しているため流用 [return]
  2. 他にもあったかもしれませんが、気づいたのはこの2つ。 [return]
  3. ページ変数は小文字のみと規定されているため。 [return]