画像のローカル管理とCDN、ファビコン
2020-06-03
Hexoの画像管理
原稿に貼り付ける画像の管理方法、投稿ページに使用した画像を投稿ごとにフォルダ分けする方法について調べてみました。
投稿ページで説明用に画像を貼り付けたい場合があります。
画像フォルダはデフォルト状態では１つになっていますが、投稿ページごとに画像を管理するフォルダを作り管理することも出来ます。
Hexoで、画像管理用のフォルダはpost_asset_folderと呼ばれ、コンフィグで有効化することで使用できます。post_asset_folder管理機能について調べてみました。
デフォルト状態
post_asset_folder: falseになっている。
投稿ページと画像の管理フォルダのツリー図は以下の通り。
1 | source/ |
したがって画像を読み込む場合は、と記述します。
個別管理を有効化する
configファイル中で、post_asset_folder: trueと指定します。
1 | source/ |
したがって画像を読み込む場合には、{% asset_img image.png alt %}と記述します。
カバー写真が欲しい場合
coverImage: 4x3a.jpg
画像
投稿記事と画像ファイル
相対関係をリンクに記述する
というように記述する。
画像のスライド切替
twentytwenty image slider うまく行かなかったわけ
_config.ymlに宣言していない
hexo cleanしていない
public/jsにファイルをおいていない
リンク先
リンク先をプレビュー表示
リンク先をカードスタイル表示
hexo-valkyr-url
シンプルカードのテストをします。
favicon
faviconは、ブラウザのタブや過去履歴画面に表示されアイコンのことで、PNG形式で作成します。
過去にはWindowsのico形式であったが、現在は現在は透過PNGで複数作成し、ターゲット端末別に配信する方法が主流である。
１）GIMPでico形式で保存する（16x16, 32x32, 152,152, iPad形式含む）
静的サイトジェネレーターでは、ジェネレート時に生成出力されるよう適切な位置に配置します。
背景透過PNG作成
faviconの置き場所
Hexoの場合、faviconをどのように置くか？については、Bertus Kruger, answered May 17 ‘15 at 21:27によれば、head要素を出力するEJSを参考にして、Faviconを配置せよ、とある。
Hugoでも、head要素の記述に従い、Faviconを入れ替えよとある。
ページをリロードして、ブラウザのタブにfaviconが表示されていることを確認する
ブラウザがFaviconを読み込んでくれない
ブラウザ上で強制リロードしても、更新したFaviconが読み込まれない場合、ブラウザのキャッシュをクリアにする必要がある。ChromeとFirefoxで方法が違うので、それぞれ調べてみました。