Sign in Subscribe

Nuxt.js

sitemap.xml の作成(動的パスへの対処)
Blog Nuxt化 Nuxt.js Markdown sitemap

sitemap.xml の作成(動的パスへの対処)

「md ファイルのパスに合わせて Nuxt のパスも設定する」で URL から md ファイルをロードする事ができました。 ただ、動的パスの場合は generate 対象にならないので、全ての md ファイルパスを generate 対象としてnuxt.config.jsに登録する必要があります。 対象パスはついでにsitemap.xmlの対象にして、Google Search Consoleのエサにします。
md ファイルのパスに合わせて Nuxt のパスも設定する
Blog Nuxt化 Nuxt.js Markdown

md ファイルのパスに合わせて Nuxt のパスも設定する

「Nuxt.js に MarkDown を読み込む」で、Markdownファイルを Vue に流し込むことができました。 今回は、ディレクトリに散らばるmdファイルのパスに合わせたURLにアクセスすると該当ページが表示されるようにします。 例えば、https://bitto.jp/blog/test でアクセスされたら ~/md-contents/blog/test.md を表示したいですね。 動的パスに対応する vue
Nuxt.js に MarkDown を読み込む
Blog Nuxt化 Nuxt.js Markdown

Nuxt.js に MarkDown を読み込む

ブログをHexoからNuxt.jsに移行するに当たり、過去記事のMarkdownファイルは捨てたくありません。 .vueへのコンバートも面倒です。 なので、引き続き記事はMarkdownで書きつつ、Nuxt.jsで Vue テンプレートにロードする方式にします。 Nuxt のジェネレート時にMarkdownファイルを取り込む方式です。 frontmatter 対応で記事に属性をもたせたい frontmatterとは、md ファイルの先頭に yaml 形式で記事に属性を持たせる方法です。 --- title: Nuxt.js に MarkDown
Buefy(Bulma) と github-markdown の共存
Blog Nuxt化 Nuxt.js Buefy Bulma Markdown

Buefy(Bulma) と github-markdown の共存

Markdownで記述したファイルをVueに取り込むことに成功しました。 ですが、Buefyを基本としたサイトになっているので、Reset CSSが有効なためMarkdownで出力されたh1など、CSS クラスではなくタグでレイアウトを表現したいものが無効になっています。 h1タグで大きくタイトルとして扱ってほしいのに通常の文章と変わりない仕上がりになってしまいます。 github の Markdown スタイルを使う まずは使いたい CSS 定義を持ってきます。 今回はsindresorhus/github-markdown-cssを利用させていただきます。 npmパッケージとして公開されているのでインストールします。 yarn add github-markdown-css インストールできたらnuxt.config.jsのcss項目に追加します。 Buefyのスタイルよりも優先させたいので、
mdのアンカでもVueルータを利用する
Blog Nuxt化 Nuxt.js Markdown

mdのアンカでもVueルータを利用する

Markdownで書いた記事をNuxtで表示させるところまではできました。 問題になるのがリンクを表すアンカが、vue routerの仕組みに乗らないためにSPA動作にならないことです。 [記事へのリンク]() [外部リンク](https://www.google.com/) は 記事へのリンク 外部リンク になって欲しいところ。 実際には下記のようなアンカが生成されます。 記事へのリンク 外部リンク 内部リンクはnuxt-linkじゃないし、外部リンクも同一ウィンドウに開く仕様。 んー、、、 ちょっと無理やりですがmountedサイクルでタグの動作を変更するミックスインを作成します。 export default { data: () =>

Episode

00:00:00 00:00:00