Topic

Blog Nuxt化

A collection of 9 issues

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

「md ファイルのパスに合わせて Nuxt のパスも設定する」で URL から md ファイルをロードする事ができました。 ただ、動的パスの場合は generate 対象にならないので、全ての md ファイルパスを generate 対象としてnuxt.config.jsに登録する必要があります。 対象パスはついでにsitemap.xmlの対象にして、Google Search Consoleのエサにします。 md ファイルを全部検索する まずは全 md ファイルを検索して、パス情報を得ます。 nuxt generate コマンド実行時なので、直接ファイルシステムから md ファイルたちを読み込みます。 今回はwalk-syncというライブラリを利用しました。 非同期 walker だと面倒なので同期 walker です。 yarn add -D walk-sync walk-syncを使ってディレクトリから md ファイルを総ざらいします。
1 min read

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

「Nuxt.js に MarkDown を読み込む」で、Markdownファイルを Vue に流し込むことができました。 今回は、ディレクトリに散らばるmdファイルのパスに合わせたURLにアクセスすると該当ページが表示されるようにします。 例えば、https://bitto.jp/blog/test でアクセスされたら ~/md-contents/blog/test.md を表示したいですね。 動的パスに対応する vue ファイルを作成する URL が md ファイルまでのパスとして渡されるので、これを元にファイルを取得します。 Nuxt.jsのasyncDataメソッドで受け取ったparams.pathMatchから取得できます。
1 min read

Nuxt.js に MarkDown を読み込む

ブログをHexoからNuxt.jsに移行するに当たり、過去記事のMarkdownファイルは捨てたくありません。 .vueへのコンバートも面倒です。 なので、引き続き記事はMarkdownで書きつつ、Nuxt.jsで Vue テンプレートにロードする方式にします。 Nuxt のジェネレート時にMarkdownファイルを取り込む方式です。 frontmatter 対応で記事に属性をもたせたい frontmatterとは、md ファイルの先頭に yaml 形式で記事に属性を持たせる方法です。 --- title: Nuxt.js に MarkDown を読み込む tags: [Blog Nuxt化, Nuxt.js, Markdown] date: 2019-11-28 parent: nuxt-blog-index --- ブログを`Hexo`から`Nuxt.js`に移行するに当たり、過去記事の`Markdown`ファイルは捨てたくありません。 `.vue`へのコンバートも面倒です。... ↑ md ファイルの頭に
2 min read

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のスタイルよりも優先させたいので、後に記述します。 // githubのスタイルはbuefyよりも後に指定する export default { css: ['~/asse
1 min read

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

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

functions に json がアップできない罠

firebase functionsを利用するに当たり、サービスアカウント情報を環境変数ではなくjsonファイルで保持していました。 環境変数でやれ、というのは重々承知の上でございます。 { "type": "service_account", "project_id": "nekoha-blog" } それを firebase の初期化関数の中で読み出すコード。 serviceAccount = require('./serviceAccountKey.json') ローカルではもちろん問題なく動くのですが、デプロイすると読めない事象が。 拡張子が json だとだめ? 拡張子が.jsonだとデプロイ対象にならないらしい。 .jsファイルは持っていってくれるので JSON ファイルを書き換え。 exports.default = { type: 'service_account', project_id: 'nekoha-blog' } requireも default を読むように書き
1 min read

nuxtでgoogle ads

Nuxt で Google Ads の設定方法。 単純にlayout/default.vueに記載したり、nuxt.config.jsのhead/scriptに記載してもうまく動きません。 @nuxtjs/google-adsenseを使います。 インストール yarn add @nuxtjs/google-adsense nuxt.config.js の設定 ライブラリを modules に追加します。 Google Ads に使う id を設定するだけです。 export default { modules: [['@nuxtjs/google-adsense', { id: 'ca-pub-xxxxxxxxxxxxxxxx' }]] } 以上で Google Ads が利用できるようになりました。 ただ、この状態では複数の Layout ファイルによるページ切り替えをするとエラーが出てしまいます。 blog とトップページではレイアウトを変えたかったのですが、とりあえず共通化することで回避しました。
1 min read

ブログをNuxt.jsで実装したのでメモを残す

ブログを Hexo で運用していましたが、勉強も兼ねて Nuxt.js で書き起こしました。 Hexo時代の資産も活かすためにMarkdownのままかけるようにしています。 いろいろハマったポイントもあったので、実装メモ。 目次 * 記事は MarkDown で書きたい * Nuxt.js に MarkDown を読み込む * md ファイルのパスに合わせて Nuxt のパスも設定する * 環境変数を使いこなす?読み込んだファイル情報を vue に持っていく * md のアンカでも Vue ルータを利用する * sitemap.xml の作成(動的パスへの対処) * Google Ads (@nuxtjs/google-adsense) * Google Analytics (@nuxtjs/google-analytics) * ブログにコメント機能を追加する * functions に json がアップできない罠 * onRequest と
1 min read

Subscribe to 猫好きが猫以外のことも書く

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe