背景

ひとまずホームページができてきたので、ホームページに簡単な社員ブログを作成しようと思ったのが始まりです。マークダウン形式で書くため色々探し、デプロイをcode deployでやっていたこともあってpythonの markdown というモジュールを使うことにしました。

（現在はwordpress上で動かしています）

やったこと

メインページのjsを書き換え、目次が出るように変更
マークダウンをhtmlに変換し、uikit用にclass名を挿入
htmlファイルを作成

メインページのjsを書き換え、目次が出るように変更

...
def __make_blog_vue(_contents_dict):
    with open(dir_name + "/___blog_vue___.js", "r") as f_blog:
        blog_vue = f_blog.read()
    blog_vue = blog_vue.replace("___TOC___", json.dumps(_contents_dict).replace('"', "'"))
    with open(dir_name.replace("/blog", "/js") + "/blog_vue.js", "w") as f_blog_vue:
        f_blog_vue.write(blog_vue)
...

new Vue({
    el: "#event",
    data: {
        toc: ___TOC___
    },
    created() {
    }
    ,
    methods: {}
})
;

マークダウンをhtmlに変換し、uikit用にclass名を挿入

...
md = markdown.Markdown(extensions=['tables', 'toc'])
...
convert_dict = {
    "<ul>": "<ul class='uk-list uk-list-bullet'>",
    "<table>": "<table class='uk-table uk-table-striped'",
    "<code>": "<pre><code>",
    "</code>": "</code></pre>",
    "src=\"../../": "src=\"./"
}
...
def __make_content_html(_md_file_name):
    author = md_file.split("/")[-2]
    html_file = md_file.replace(".md", ".html").replace(author, "contents")
    # mdファイルを読み込む
    with open(md_file, "r") as f_md:
        md_content = f_md.read()
    # 出力先フォルダの作成
    if not os.path.exists(dir_name + "/contents"):
        os.makedirs(dir_name + "/contents")
    # マークダウンをhtmlに変換し、uikit用のタグを挿入
    with open(html_file, "w") as f_html:
        html_content = md.convert(md_content)
        html_content = __add_uikit_class(html_content)
        f_html.write(html_content)

def __add_uikit_class(_html_content):
    for before, after in convert_dict.items():
        _html_content = _html_content.replace(before, after)
    return _html_content
...

htmlファイルを作成

def __make_blog_html(_title):
    with open(dir_name + "/___blog___.html", "r") as f_blog:
        blog_html = f_blog.read()

    blog_html = blog_html.replace("___TITLE___", _title)
    with open(dir_name.replace("/blog", "") + "/blog_" + _title + ".html", "w") as f_blog_html:
        f_blog_html.write(blog_html)

...
<div id="headerContent"></div>
<!-- Main Content -->
<div uk-grid>
    <div class="uk-width-1-1 uk-align-center">
        <div class="uk-width-2-3@m uk-align-center uk-padding uk-padding-remove-horizontal">
            <div id="blogContent"></div>
        </div>
        <div class="uk-width-1-4@m uk-align-center uk-padding uk-padding-remove-horizontal" id="event">
            <h2>他の記事</h2>
            <ul class="uk-list">
                <li v-for="(val, key) in toc"><a :href="val.path">{{key}}</a></li>
            </ul>
        </div>
    </div>
</div>
<div id="footerContent"></div>
<script async src="js/blog_vue.js" async></script>
</body>
</html>

感想

想像よりも簡単にできた
大きくなってくるとCDN版vuejsをやめたほうが良さげ

変換python全文

import markdown
import glob
import os
import json

dir_name = "./frontend/blog"
 
md = markdown.Markdown(extensions=['tables', 'toc'])
md_file_list = glob.glob(dir_name + "/markdown/*.md", recursive=True)

_contents_dict = {}
for md_file in md_file_list:
    title = md_file.split("/")[-1].replace(".md", "")
    _contents_dict[title] = {
        'name': title,
        'path': 'blog_' + title + '.html'
    }

convert_dict = {
    "<ul>": "<ul class='uk-list uk-list-bullet'>",
    "<table>": "<table class='uk-table uk-table-striped'",
    "<code>": "<pre><code>",
    "</code>": "</code></pre>",
    "src=\"../../": "src=\"./"
}


def __make_blog_vue(_contents_dict):
    with open(dir_name + "/___blog_vue___.js", "r") as f_blog:
        blog_vue = f_blog.read()
    blog_vue = blog_vue.replace("___TOC___", json.dumps(_contents_dict).replace('"', "'"))
    with open(dir_name.replace("/blog", "/js") + "/blog_vue.js", "w") as f_blog_vue:
        f_blog_vue.write(blog_vue)


def __make_blog_html(_title):
    with open(dir_name + "/___blog___.html", "r") as f_blog:
        blog_html = f_blog.read()
    blog_html = blog_html.replace("___TITLE___", _title)
    with open(dir_name.replace("/blog", "") + "/blog_" + _title + ".html", "w") as f_blog_html:
        f_blog_html.write(blog_html)


def __make_content_html(_md_file_name):
    author = md_file.split("/")[-2]
    html_file = md_file.replace(".md", ".html").replace(author, "contents")
    # mdファイルを読み込む
    with open(md_file, "r") as f_md:
        md_content = f_md.read()
    # 出力先フォルダの作成
    if not os.path.exists(dir_name + "/contents"):
        os.makedirs(dir_name + "/contents")
    # マークダウンをhtmlに変換し、uikit用のタグを挿入
    with open(html_file, "w") as f_html:
        html_content = md.convert(md_content)
        html_content = __add_uikit_class(html_content)
        f_html.write(html_content)


def __add_uikit_class(_html_content):
    for before, after in convert_dict.items():
        _html_content = _html_content.replace(before, after)
    return _html_content


if __name__ == '__main__':
    __make_blog_vue(_contents_dict)
    for md_file in md_file_list:
        title = md_file.split("/")[-1].replace(".md", "")
        __make_content_html(md_file)
        __make_blog_html(title)

$  tree
  .
  ├── ci
  │   └── markdown_to_html.py
  └── frontend
      ├── blog
      │   ├── ___blog___.html
      │   ├── ___blog_vue___.js
      │   ├── contents
      │   └── markdown
      │       ├── �\200\220�\220\210格�\223�\223�\230�\200\221GCP_Cloud_Archtect�\201��\217\227�\201\213�\202\212�\201��\201\227�\201\237.md
      │       └── �\203\236�\203��\202��\203\200�\202��\203��\201��\230�\213�\202\222�\233��\201\221�\202\213�\202\210�\201\206�\201��\201\227�\201��\201��\201\237.md
      ├── blog.html
      └── js
          └── blog_vue.js

SinkCapitalではデータに関する支援を行っています

弊社はスペシャリスト人材が多く在籍するデータ組織です。データ分析や分析基盤の設計などでお困りの方がいらっしゃれば、まずは無料で、こちらから各分野のスペシャリストに直接相談出来ます。

BLOG

マークダウンで記事を書けるようにしてみた

背景