Kate Macate,

完成品

immutable ってなに？

変更できないオブジェクトです。「銀の滴降る降るまわりに，金の滴降る降るまわりに．」という歌を私は歌いながら流に沿って下り，人間の村の上を通りながら下を眺めると昔の貧乏人が今お金持になっていて，昔のお金持が今の貧乏人になっている様です．

使い方

呼び出し側

記事への相対パスを指定します。img タグは外したかったのですが、外せませんでしたorz これは SFC に相対パスを props で渡してもパスを解決してくれないからです。

<vuepress-card path="../relative/path/to/directory/">
  <img src="../relative/path/to/directory/img.jpg">
</vuepress-card>

呼び出され側

Frontmatter の descriptionTitle と cardDescription に、ブログカードのタイトルと記事の説明を書きます。 HTML, og, ブログカードで３回タイトルと説明を書かないといけないのが、面倒なのですが...

---
title: Python の mutable と immutable ってなに？
description: mutable ... 値が参照しているオブジェクトを切り替えられる。immutable ... 値が参照しているオブジェクトを切り替えられない。
cardTitle: immutable ってなに？
cardDescription: 変更できないオブジェクトです。
meta:
 -
  og:image: ./img.jpg
 -
  og:title: Python の mutable と immutable ってなに？
 -
  og:description: mutable ... 値が参照しているオブジェクトを切り替えられる。immutable ... 値が参照しているオブジェクトを切り替えられない。
---

コード

コードは以下の通りです。

• vuepress-webcard.vue - GistGitHub (opens new window)

this.$site.pages に各ページの配列が this.$page.regularPath に現在表示しているページのパスが、this.$page.frontmatter に Frontmatter に記述した内容が保存されています。あとはこれらを利用するだけです。

ブログカード自体は色々な方が実装されているので、それを参考にさせていただければいいのですが、問題は、VuePress の内容をどこからとって来れるかわからないということでした。

参考にさせていただいたブログカードのサイトの URL を貼り付けようと思ったのですが。Google のアルゴリズムがアップデートされたらしく、検索しても見当たらず現在捜索中...