knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

HexoのカスタムテーマをNode.jsで作成する/第1回 ,Hexoで高速サイトを構築する(2)


f:id:knaka0209:20180617171045p:plain

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種類程
・トップメニュー、カテゴリへのリンクを一部追加

コンフィグ設定等は、
前回と同様。

作成したテーマ

theme_ex3 、ベータ版ですが。
細かい部分は、見直しかけたいと思います

github.com