概要

前回、Hexoを使用して試しに記事を投稿してみました。

今回はHexoのテーマを変更しデザインを変更していきたいと思います。

それではさっそく「Lets'go」

構築（4.記事を書く）

4.1.テーマを選ぶ

今回は「cards」というテーマを使用します。

4.2.テーマをインストール

コマンド

git clone https://github.com/ChrAlpha/hexo-theme-cards.git themes/cards

4.2._config.ymlを変更

_config.yml

theme: cards

4.3.確認

コマンド

hexo server

赤線のURLにアクセスすると反映できていることが確認できる

4.4.自分のサイトに反映

コマンド

hexo clean
hexo deploy

～中略

サイトにアクセスし、反映できていることを確認

4.5.テーマの内容を変更する

※日本語訳しました。

コマンド


# ---------------------------------------------------------------
# ナビゲーションバー/カバー構成
# ---------------------------------------------------------------

# トップナビゲーションバーの設定
navbar: 

  # 左側の名前が表示されます
  sitename: テストサイト
  
  # 右のサイトナビゲーションリンク
  menu: 
    - name: 表紙
      url: /
    - name: タグ
      url: /tags/
    - name: アーカイブ
      url: /archives/
    - name: フレンドリーリンク
      url: /friends/
    - name: ページ
      url: /page/

  # ナビゲーションバーは常に画面の上部に表示されます
  # 画面幅が1080 px以上の場合にのみ有効
  sticky: false

# カバーカバー設定
cover: 

  # 上部カバーに表示されるサイト名
  sitename: テスト！！

  # アバターの構成が空でない場合、アバターを使用してサイトネームが推奨されます
  avatar: 
  
  # SiteName/Avatarの下の文の紹介
  description: 僕のサイトです。

4.6.自分のサイトに反映

コマンド

hexo clean
hexo deploy

自分のサイトを確認

締め

_config.ymlを見ると文字の色やフッターなど色々変更できそうです。
次回はいよいよホスト名を設定していこうと思います。
引き続きよろしくお願いします。

以上お疲れさまでした。

シリーズ

＞Part1（サービスの選定～GithubPagesの設定まで）
https://qiita.com/shinpinoshi/items/96e6b0948c3478c961ce

＞Part2（Hexoの設定～Hexoで生成したサイトの公開）
https://qiita.com/shinpinoshi/items/c20cf54925bd32f664ab

＞Part4
作成中