BIZ

Shopify - ページ編集にMarkdownを使う

#Shopify#Liquid#Javascript

ページ編集にMarkdownを使えるようにするアプリがあるだろうと思ったら、どうもないようでした。

方法概要

  • Stripeダッシュボードのページ編集画面のウィジウィグモードで、Markdown形式でコンテンツを書いて保存する。
  • Markdownを使いたいページで、markedを読み込むようにする。
  • Markdownを使いたいページで使うテンプレートで、page.content の内容を最初非表示にして、ローディングを表示させる。
  • page.content の内容を調整した上で、page.content の内容に対して、marked を実行させて、markdown形式をHTMLに変更する。
  • HTMLへの変更が完了したら page.content を表示させて、ローディングを非表示にする。

コード

layout/theme.liquid

  {% if page.handle contains 'hoge' %}
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  {% endif %}

templates/page.hoge.liquid

<div id="loading" class="loader">LOADING...</div>
<div id="page_content" style="display:none;">
  {{ page.content }}
</div>
<script>
  window.onload = function () {
    var el = document.getElementById('page_content');
    var html = el.innerHTML.trim();
    html = html.replace(/\<\/p\>/g, '</p>\n');
    html = html.replace(/\<br\>/g, '\n');
    el.innerHTML = html;
    el.innerHTML = marked(el.textContent);
    document.getElementById('loading').style.display = "none";
    el.style.display = "block";
  }
</script>

ローディングのCSS