目次
こんにちは。karintomania(twitter)です。
Hexoで作ったブログにウィジェットを追加する方法を紹介します。
サイドバーにこんな感じの著者プロフィールウィジェットを追加してみます。
landscapeをテーマに使用している前提で記載していますので、別のテーマを使用している場合は適宜読み替えてください。
![[著者プロフィール]](/2019/10/2019-1030-hexo-add-about-widget/about_style.png)
ウィジェット用テンプレートの追加
ウィジェットのテンプレートを追加します。
まずはabout.ejsをtheme>landscape>layout>_widget内に追加します。
他のejsファイルを参考にしつつ、こんな感じにしました。
1 | <div class="widget-wrap"> |
そして、widgetを追加するには、_config.ymlをいじる必要があります。
この_config.ymlは使用しているテーマ内のものなので、プロジェクト全体のものと間違わないようにしてください。
1 | # Sidebar |
そしてHexo serverコマンドでサイトをプレビューするとAboutウィジェットが追加されているはずです。
これだけでは技術的にも絵的にも少し物足りないので、
もう少し工夫します。
設定ファイルから値を取得
まずは著者名は設定ファイルに持っているので、そこから持ってくるようにしましょう。
プロジェクトのconfig.ymlの値はconfig変数に持っているようです。
また、テーマのconfig.ymlの内容はtheme変数に持っています。
説明文用のプロパティをテーマのconfig.ymlに追加して取得させてみます。
1 | # Site |
config.yml末尾に新規プロパティを追加します。
1 | # about |
about.ejsは以下のようになります。
<%= 変数 %>で変数を参照することができます。
また、今回は説明文にマークダウンを使えるようマークダウンヘルパー markdown()を使用しています。
ヘルパーを使用する際は<%- 関数 %>と%の後にハイフンを続けます。
単なる変数参照の時と若干記法が違うので気をつけてください。
1 | <div class="widget-wrap"> |
きちんと反映されていますね。
画像の追加
さて、著者の画像も追加してみます。
画像の置き場はtheme/landscape/source/css/images/author.pngとします。
これもconfig.ymlにプロパティとして持たせておきましょう。
1 | # about |
これをejsファイルから参照する際には、相対パスは使用できません。
代わりにurl_for関数を使用します。この関数はURLを自動的に生成してくれます。
1 | <div class="widget-wrap"> |
できました。が、著しくはみ出てますね。
スタイルも指定できるようにしましょう。
hexoでは、cssの代わりに.styl形式を使用しているようです。
theme/landscape/source/css/_partial/about.stylを追加します。
1 | .author-img |
また、そのままではこのファイルが読み込まれないので、
theme/landscape/source/css/style.stylにて、importの設定をします。
1 | @import "_extend" |
これで画像が表示されるようになりました。