# 完成品

# 使い方

# 呼び出し側

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

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

# 呼び出され側

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

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

# コード

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

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

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

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

Last Updated: 11/23/2019, 1:38:46 AM
x 消す
銀河英雄伝説が無料!