Wordpressからmarkdown記事を抜き出して、Nuxt.jsのブログに移植する方法
はじめに
最近、肩こりがひどくて痛みを伴うため接骨院に通院しています。 典型的な猫背となで肩らしくそこの矯正を始め、2週間がたちました。
通院している患者の中でも1番か2番を争うぐらい肩が凝ってると言われなんとも言えない気持ちになりました。 肩甲骨を左右に広げるような施術があるのですが、メシメシって音が聞こえてきます。 あと、凝りというのは筋繊維が絡み合って普通であれば広がるところが広がらない状態のことらしいです。 動かして圧力かけて広げるのが良いようです。毎朝ラジオ体操しようかしら。
前職、15時ぐらいにラジオ体操の時間があったのですが、あの文化だけは良かったんじゃないかと。 ※常に炎上してたから、誰一人立ち上がってやらず音が流れるだけの虚しい時間でしたが……。
Nuxt.jsでブログ作ろう
今日は、Wordpressから出力したMarkdownファイルを使って記事を移植していきます。 記事ごとに個々のヘッダ画像を出力して並べるところまでをやろうと思います。
最終的にはこのような画面になります。 大分ブログっぽくなってきましたね。
ちなみに、各記事の画面を開くとこのような表示になります。
次回以降、この記事のフォーマットを整えて行く必要がありそうですが、形になってきたんじゃないでしょうか。
WordpressからMarkdownを出力する
DeMomentSomTres Export
Wordpressにプラグインを追加します。 添付ファイルなどをExportしたい場合もあるでしょうからこちらを使用しました。 標準のExportでも事足りる気はしますが、こちらの使用を前提に進めます。
プラグインが導入出来れば、Wordpressの管理画面から選択します。 左端のメニューから、ツール⇒DeMomentSomTresExportを選択します。
エクスポートする内容は、「すべてのコンテンツ」 Choose if content is paged「without pagination」にチェックボックスを入れて、エクスポートファイルをダウンロードします。
うまく取り出せれば、XMLファイルが入手できます。
次はこのXMLファイルを変換して、Markdownと画像ファイルとして取り出していきます。
wordpress-export-to-markdown
スクリプト言語で書いてもいいのですが、 Wordpressから出力するXMLを、Markdownファイルに変換するようなツールは存在します。
lonekorean/wordpress-export-to-markdown
実行するにはこれで事足ります。
git clone https://github.com/lonekorean/wordpress-export-to-markdown.git
取得したフォルダに、DLしたXMLファイルを置きます。(正直、どこでもいいのですが・・・)
mkdir output
npx wordpress-export-to-markdown
いくつか選択が聞かれますが、一例としてこんなふうに回答しました。
Starting wizard...
? Path to WordPress export file? wordpress.2022-01-15.xml
? Path to output folder? output
? Create year folders? Yes
? Create month folders? Yes
? Create a folder for each post? Yes
? Prefix post folders/files with date? Yes
? Save images attached to posts? Yes
? Save images scraped from post body content? Yes
? Include custom post types and pages? Yes
Markdownファイルへの変換と、使用している画像のDLが行われます。 しばらく待ちましょう。
Nuxt/Contentsで作るブログ
前回までの記事で作成を進めてきたものがありますのでそちらをベースに進めていきましょう。
作業フォルダはこちらにおいておきます。 kenpos/kokodev
git clone https://github.com/kenpos/kokodev.git
wordpress XMLから作成したMarkdownファイルと
contentフォルダに先程作成したmarkdownファイルをコピーします。
直下にとりあえず並べてみます。こんな感じになります。
画像はstaticフォルダ作成しその中にimagesというフォルダを作成します。 画像ファイルはその中に入れていきます。
Nuxt.jsで画像データを取り扱うには、assetsフォルダかstaticフォルダに入れることになります。 Markdownファイルからも画像にアクセスしたいため、今回はstaticに画像を入れています。
こんな風に入れておきました。
index.vue
templateタグで、markdownの冒頭に記載されているタグ情報を取得していきます。
<template>
<v-container mt-50 pt-50>
<input id="search" v-model="q" placeholder="Search..." />
<v-row class="white" style="height: auto;">
<v-col v-for="b in articles" :key="b.slug" cols="auto">
<v-card
max-height="400"
max-width="400"
min-height="400"
min-width="400"
elevation="3"
class="mx-auto"
outlined
:to=b.path
>
<v-img
class="white--text align-end"
height="200px"
v-bind:src="require('/static/images/'+b.coverImage)"
>
</v-img>
<v-card-title>{{ b.title }}</v-card-title>
<v-card-subtitle class="pb-0">
{{ b.date }}
</v-card-subtitle>
<v-card-text class="text--primary">
<div>{{ b.categories }}</div>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
各ブログ記事が書かれたMarkdownの冒頭に、タグ情報を埋め込んでいます。
各Markdownファイルの冒頭にあるタグ情報。
coverImageという形で書かれている画像パスを下のように取得します。 staticフォルダのimagesに入っているサムネ画像を取っている形になります。
<v-img
class="white--text align-end"
height="200px"
v-bind:src="require('/static/images/'+b.coverImage)"
>
</v-img>
カテゴリ情報も埋め込まれているのでこちらを取得する場合はこのように記載しました。
<v-card-text class="text--primary">
<div>{{ b.categories }}</div>
</v-card-text>
実行すると
ブログ記事に埋め込まれたサムネが反映されます。
まとめ
Nuxt/contentsを使うとかなり手軽にブログが作れることがわかってきました。 今回、今まで書いてきた記事を移植できたのでかなりブログっぽい体裁になってきたなという印象です。
カテゴリ、タグでのソート、1ページに表示される記事の数制限や、Adsenceの貼り付け まだまだ作らないと行けない部分はありますが、いいんじゃないでしょうか。