Sign in Subscribe
Topic

Markdown

A collection of 10 issues

Gatsbyでカスタムfrontmatter属性を使う

Gatsby は、ページジェネレート時に使う graphql で Markdown の frontmatter を使うことができます。 frontmatter ってこんなやつ。 --- title: Gatsbyでカスタムfrontmatter属性を使う tags: [Gatsby, frontmatter, markdown] date: 2020-11-13 12:04:22 update: draft: false --- ページの先頭にメタ属性を書くことで、ページタイトルに使ったり処理の分岐に使うことができるんです！ カスタム属性は一手間かかる デフォルトで使えるのはtitle、date 、 description です。 nuxt.js で作っていた md を再利用したいのでカスタム属性も使えるようにしたい。 実はかんたん、カスタム属性の追加方法 graphql の定義に追加してあげればよいだけです。 gatsby-node.js の createType にカスタム属性を追加します。 type Frontmatter
1 min read

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

Markdownで改ページのコントロールがしたい！

Markdown を PDF 化して納品しようとしたら改ページがぐっちゃぐちゃなので怒られた話。 あるあ・・・すみませんでした。 Markdown でPDFの改ページ制御なんてできるの？ きっとできるさ。 変換は VSCode のプラグインである Markdown All in One というものを使っています。 このツールはMarkdown → HTML → PDF の順に変換します。 HTML の印刷スタイル設定が PDF に効くので、CSSでスタイルを設定すればいいと思われます。 改ページ用の CSS 属性 改ページには page-break-after という属性があって、これを使います。 MDN: page-break-after おや？ MDN をよく見ると、この属性は break-after に置き換えられたとのことです。 MDN: break-after Markdown のどの要素に使う？ 本来この属性はdivやsectionなどのブロックに対して使うのですが、Markdownで書いているとブロックを意識することがあり
1 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

ブログを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

HEXOでコードの書き方いろいろ実験

Hexoはジェネレート時にhighlight.jsを適用してくれます。 クライアントサイドでのレンダーではないので、軽いのが嬉しいです。 今回はいろいろMarkdownの書き方を実験してみました。 HTMLコードの掲載 ``` html オレのブログ

コンテンツをここに

ローレンイプサム的ななにか ``` ↓ オレのブログ

コンテンツをここに

ローレンイプサム的ななにか JSコードの掲載 ``` JavaScript // 普通に問題ない。 !function() { console.log('OK'); }() ```

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