VuePressをカスタマイズしてブログを自作｜画像系・サイトマップ編
前回はvuepress特有のMarkdown記入方法・設定について書きました。
今回は画像系とサイトマップ設定方法について紹介します。
対象フォルダ
今回紹介するファイル・フォルダは以下になります。
より大きいスコープはVuePress/blogをカスタマイズしてブログを自作｜構成編で紹介しています。
src
└─ .vuepress
├─ public
│ ├─ resources
│ │ └─ category
│ │ └─ page
│ │ └─ img.jpg
│ ├─ top.jpg
│ ├─ favicon.ico
│ ├─ favicon.png
│ └─ robots.txt
└─ config.js
画像設定
デフォルト設定では画像系の配置ディレクトリはpublic以下になります。
記事
src
└─ .vuepress
└─ public
└─ resources
└─ category
└─ page
└─ img.jpg
記事の画像は、管理をしやすくするため
resources以下で、Markdown記事のフォルダ構成と同じにしています。
画像は１記事に複数枚入ってくるので、記事名でフォルダを作成し
その中に画像を配置しています。
共通設定
記事系のページはMarkdown記事のフォルダ構成と同じにしていますが
トップ画像やプロフィール画像はまたがって使っているので、別の場所に配置しています。
現在は共通画像は2～3枚なのでpublic直下に配置しています。
今後共通画像が増えたら以下のようにresources以下にcommon作成してそこに配置しようかなと思います。
src
└─ .vuepress
└─ public
└─ resources
├─ category
└─ common
└─ img.jpg
favicon設定
faviconも勿論、画像系に含まれるのでpublicに配置します。
public以下であればどこでも大丈夫ですが、私は直下に置いてます。
faviconはheadに記述する必要がありますが、VuePressはindex.htmlが無いので
以下のようにconfig.jsにheadを記述します。
module.exports = {
head: [
["link", { rel: "icon", href: "/resources/favicon.ico" }],
],
}
また、ホームページをPWA化をする際はfaviconを設置します。
PWAのfaviconはPNG拡張子なので、ico拡張子とは別ファイルを用意します。
配置先は以下のようにfavicon.icoと同階層にしています。
src
└─ .vuepress
└─ public
├─ favicon.ico
└─ favicon.png
まだ自サイトのPWAは完全に整っていないので、詳しくは整った際に紹介しようと思います。
sitemap設定
当サイトのサイトマップはvuepress-plugin-sitemap (opens new window)プラグインを使用しています。
記事を書いている時のバージョンは"vuepress-plugin-sitemap": "^2.3.1"です。
sitemap設定はconfig.jsで完結しますが、robots.txtもついでに紹介します。
配置は以下の通りです。
robots.txtはpublic直下に配置する必要があるので注意です。
src
└─ .vuepress
├─ public
│ └─ robots.txt
└─ config.js
sitemapの設定は他のVuePress pluginと同様、plugins配列内に記述します。
最低hostnameだけ設定すればOKですが、私は404ページを除外してます。
module.exports = {
plugins: [
[
"sitemap",
{
hostname: "https://xxxx",
exclude: "https://xxxx/404.html"
},
]
],
}
robots.txt内は他のフレームワークと同様の記述でOKです！
User-agent : *
Disallow :
Sitemap : https://xxxx/sitemap.xml
まとめ
今回は画像系のディレクトリ構成とsitemapの設定方法について説明しました。
PWA化など他の機能はもう少しブラッシュアップしたら投稿します。
今後はサーバーに上げる手順や、当サイトのUIについて書く予定です。
