HexoのカスタムテーマをNode.jsで作成する/第1回 ,Hexoで高速サイトを構築する(2)
index:
概要
前回の、Hexo サイトジェネレーターの関連となりますが、
公開テーマを、適用するのでなく。
カスタムテーマの作成を試してみたいと思います。
bootstrap3 + CSS3 でレスポンシブ構成
試しで、Github pages で公開を目標にしていたいと
思います。
node.jsのテンプレートの作成/編集し、
HTML/CSSデザインは事前に準備しておきます。
今回は、apolloテーマを参考にしました。
前回の記事、参考です。
knaka0209.hatenablog.com
テンプレート構成
標準のlandscapeテーマを見てみてみます。
カスタマイズ部分を把握しておきたい所です。
C:\tmp\2017_tmp\node\hexo\blog3\themes\landscape\layout>tree . /F フォルダー パスの一覧: ボリューム Acer ボリューム シリアル番号は 7221-E6BF です C:\TMP\2017_TMP\NODE\HEXO\BLOG3\THEMES\LANDSCAPE\LAYOUT │ archive.ejs │ category.ejs │ index.ejs │ layout.ejs │ page.ejs │ post.ejs │ tag.ejs │ ├─_partial │ │ after-footer.ejs │ │ archive-post.ejs │ │ archive.ejs │ │ article.ejs │ │ footer.ejs │ │ gauges-analytics.ejs │ │ google-analytics.ejs │ │ head.ejs │ │ header.ejs │ │ mobile-nav.ejs │ │ sidebar.ejs │ │ │ └─post │ category.ejs │ date.ejs │ gallery.ejs │ nav.ejs │ tag.ejs │ title.ejs │ └─_widget archive.ejs category.ejs recent_posts.ejs tag.ejs tagcloud.ejs
使いそうな、テンプレート
Layout.ejs : レイアウトの親
index.ejs : root
post.ejs : post( 投稿 ) / 各詳細
archive.ejs : アーカイブ
category.ejs : カテゴリの リスト
・公開されているテーマは、下層のテンプレを
テンプレ内から、partial で読み込んだり
階層が深い物あり、テンプレ数が多い場合は
修正箇所を特定するのが、難航しそうでした
作成したサイト、 github pages
https://kuc-arc-f.github.io/hexo_3/
・1カラムレイアウト
・サイドバー無し。
・下層ページは少なめ。
カテゴリ、リスト
カテゴリ、詳細ページ
・カテゴリは2種類程
・トップメニュー、カテゴリへのリンクを一部追加
コンフィグ設定等は、
前回と同様。