knaka Tech-Blog

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

カスタムテーマで色調を変更する。 Hexoで高速サイトを構築する(5)

概要

前回の、Hexo 静的サイトジェネレーターの関連となりますが、
カスタムテーマの色調を、変更しやすくできるように修正しました。

前回と同様、bootstrap3 + CSS3 でレスポンシブ構成ですが。
lessを使用、色のRGB値を変数に設定し。
一括して色の値を、変更できるように検討しました。
色は、マテリアルデザインの色を参考にしています。

lessc main.less main.css
lessc main-sp.less main-sp.css

lessc (コンパイラ)で、CSS生成します

設定方法など

less ファイルに、色の各設定を記載しておきます。
マテリアルデザイン
メインカラー、サブカラー、アクセントカラーの、3色に対応してます。

@mycolor-main  : #757575;
@mycolor-sub   : #9E9E9E;
@mycolor-accent: #FF7043;

node.js テンプレートから、設定する色の CSSを読み込みます。

  <%- css('css/main.css?A3') %>
  <link href="<%- config.root %>css/main-sp.css?A3" rel="stylesheet" media="screen and (max-width: 480px)">

generate して、サイトにコピーします。

Github

修正版のテーマ公開しました。
https://github.com/kuc-arc-f/theme_ex5github.com

カスタムテーマを追加しました。サイドバー付 Hexoで高速サイトを構築する(4)

f:id:knaka0209:20180708135701p:plain

概要

前回の、Hexo 静的サイトジェネレーターの関連となりますが、
カスタムテーマを追加しました。

前回と同様、bootstrap3 + CSS3 でレスポンシブ構成
1) top画面サイドバー付、2カラムのレイアウト
2) 色調は、グレー系としました。

デモURL

https://kuc-arc-f.github.io/hexo_4/

Github pages で公開しています。

カスタムテーマ

github で公開しました。
github.com

カスタムテーマを更新しました。 Hexoで高速サイトを構築する(3)

f:id:knaka0209:20180707165113p:plain

概要

前回の、Hexo 静的サイトジェネレーターの関連となりますが、
カスタムテーマ更新版を公開しました。

前回と同様、bootstrap3 + CSS3 でレスポンシブ構成
1) 投稿(post)詳細の、サイドバー追加。レイアウト調整
2) カテゴリ一覧の、レイアウト調整

デモURL

https://kuc-arc-f.github.io/hexo_3/

Github pages で公開しています。

カスタムテーマ

github.com

プロジェクト/themes/ 下に配置し、コンフィグでテーマ設定、
ジェネレート(hexo generate)します。

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

静的サイトジェネレーター Hexoお試し編

index:

概要

サイトジェネレーターの Hexoを使って、
ブログ等のサイト構築を試してみました。
github pageに配置を目標としています。

背景として、wordpressの編集や、読み込みが遅く、
対策で、高速表示できるサイト構築方法があれば良いなと
考えていたのですが、データベースやphp不要な点は良さそうですが。
hexoの場合は、node.js の操作が必要だったり。しますね

markdown書式に対応していて、
ページを生成してくれますので、便利そうです。

初期設定、準備とか

windowsで、作成してみました。node.js , npmが必要です。

C:\tmp\2017_tmp\node\hexo\blog4>node -v
v8.11.2

C:\tmp\2017_tmp\node\hexo\blog4>npm -v
5.6.0

node.js はパスを通しておくと、Hexo 実行できました。

install, 本家サイトに記載されているコマンド
実行しました。

npm install hexo-cli -g
hexo init blog
cd blog
npm install

hexo server を使うと、テストできますが、
ローカルのapacheとかに置いてもテスト可能でした。

ルートのパスの変更

server直下に、サイト配置する場合は変更不要。
apache等で、htdocs以下の下位フォルダにおく場合は、変更が必要
下記は。 /blog4 に構築しています。

/_config.yml を修正、 root の部分を / から
/blog4/ に変更しています。

 URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /blog4/
permalink: :year/:month/:day/:title/
permalink_defaults:

1回目の、投稿を追加して
generate(生成)しています。

/public に生成されます。

hexo new "My New Post"

hexo generate

ローカルの apache サーバですが
ブラウザで、開きます。
例として、URLは下記です。
localhost/blog4/
 テーマは標準版ですが、表示できました。

f:id:knaka0209:20180616172057p:plain

テーマの変更

標準でも良いのですが、apollo
のテーマ設定してみました。

https://github.com/joyceim/hexo-theme-apollo

/_config.yml を修正

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: apollo

generateして、ブラウザで確認。
ずいぶんシンプルになりました。

f:id:knaka0209:20180616173258p:plain

more タグ

上記の hexo new と同様に
ページを追加し
mdファイルを、書きます。
source\_posts\ の下に、タイトル名.md
みたいなファイルが生成されますので、編集

下記の more の部分を追加
( 全角文字を記入していますが、半角に変更下さい  )

---
title: 'new 2nd post, more test'
date: 2018-06-16 17:49:28
tags:
---

more のてすと
more のてすと

<!ーー more ーー>

more のてすと
more のてすと
more のてすと
more のてすと
more のてすと

見え方は、Read More
のリンクが表示されました。

f:id:knaka0209:20180616180017p:plain

リンク押すと、詳細ページが開き。
全文が表示されます

カテゴリの追加

カテゴリ追加し、投稿種類を増やてみます。
カテゴリを追加する、ページも追加しときます。

hexo new page categories

hexo new "news-1"
hexo new "news-2"

追加された、mdファイルに
category を追加、newsの名称にしています。

---
title: news-1
category : news
date: 2018-06-16 18:07:40
tags:
---


news カテゴリを開きます。
blog4/categories/news/

newsのリストが自動生成されました。

f:id:knaka0209:20180616182545p:plain

topメニューの、newsカテゴリの追加。
設定ファイルで可能かもしれませんが、
テーマを修正してみました。。
<li > のnews の行で、URLは絶対パスでベタ書きですが。
メニューから、カテゴリの各リストへ移動できます。

f:id:knaka0209:20180616182701p:plain

ファイル:
themes\apollo\layout\_partial\header.ejs

GitHub Pages で公開する。

rootを、hexo_2にしてますが。

gitHub で、リポジトリを作成し、
git push しました、setting はGitHub Pages
の設定をしておきます。

URL:
https://kuc-arc-f.github.io/hexo_2/

hexo が生成したコード
github.com

xcopy で、一括コピー。apache/htdocs

windows版ですが。
generate で、 publicフォルダが生成されますが、
apacheなどの rootに一括コピーするコマンド
generate 後に、コピーすると便利でした。

xcopy /Y /E public C:\xampp\htdocs\blog2\

f:id:knaka0209:20180714130218p:plain

wordpress で詳細ページ(single.php) の画像サイズをレスポンシブ対応に変更する。

概要:

標準テーマを使用せず、カスタム自作テーマ等を組み込む場合で
詳細画面(single.php) の、画像サイズのレスポンシブ化が
難航したのでメモです。
=> 内容的には、カンタンなCSS追加のみ。

環境とか

wordpress 4.9.6
テーマ:twentysixteen のカスタマイズ版(自作)
元の style.cssの内容は、ほぼ全て消してます。
 *) Theme Name とか、記載ルール等は残す
カスタムテーマの、HTML/CSS は事前に準備してます。

対策前:

singe.php で、the_content()
が出力するHTML は、下記でした。
サイズ=フルサイズで、 1024×768 の画像を添付した場合。

the_content() 内の処理は、
カスタマイズは、難しそうでしたので
CSS で 、対応検討しました。

<p>&nbsp;</p>
<p><img class="alignnone size-full wp-image-12" src="http://localhost/wp3/wp-content/uploads/2018/05/41_153422350_sara.jpg" alt=""
 width="1024" height="768"
 srcset="http://localhost/wp3/wp-content/uploads/2018/05/41_153422350_sara.jpg 1024w, http://localhost/wp3/wp-content/uploads/2018/05/41_153422350_sara-300x225.jpg 300w, http://localhost/wp3/wp-content/uploads/2018/05/41_153422350_sara-768x576.jpg 768w, http://localhost/wp3/wp-content/uploads/2018/05/41_153422350_sara-320x240.jpg 320w"
 sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px" />
</p>
<p>post-0605A11- body</p>
<p>&nbsp;</p>
</p>

srcset、sizes 属性とかありますね。
width, height が指定されているので、
CSSを追加しないと、レスポンシプは無理そうです。

修正前の画面:
このページは、bootstrap のグリッドシステムを適用してますが、
PC画面の右のサイドバー部品に、画像が重なっています。
ダメですね
スマホだとさらに、はみ出します。

f:id:knaka0209:20180607102921p:plain

修正後:

f:id:knaka0209:20180607103205p:plain


css を追加して、カンタンな対応しました。

img.alignnone{
 max-width: 100%;
 height : auto;
}

alignnone クラスが、出力されたので、
max-width とか、適用すると。いい感じでした

matplotlib plot()

index:

概要

データの可視化で、matplotlibの機能の説明になります

参考のページ / tutorial:

https://matplotlib.org/tutorials/introductory/sample_plots.html#sphx-glr-tutorials-introductory-sample-plots-py

必要なimport

#
import numpy as np
import numpy.random as random
import scipy as sp

import matplotlib.pyplot as plt
import matplotlib as mpl
import seaborn as sns

plot()

Line plot

#  plot
import numpy.random as random

# シード値の固定
random.seed(0)
x = np.random.randn(30)
y =  np.random.randn(30)
# plot
plt.plot(x, y, "o")

# title
plt.title("Title Name")
# Xの座標名
plt.xlabel("X")
# Yの座標名
plt.ylabel("Y")
# gridの表示
plt.grid(True)

f:id:knaka0209:20180518140920p:plain

plot + sin 波形

#
x = np.linspace(-10, 10,100)
plt.plot(x, np.sin(x)) 


f:id:knaka0209:20180518141259p:plain

散布図

scatter()

#
import numpy.random as random

# シード値の固定
random.seed(0)
# x軸のデータ
x = np.random.randn(30)
# y軸のデータ
y =  np.random.randn(30)
plt.scatter(x, y)

# title
plt.title("Title Name")
# Xの座標名
plt.xlabel("X")
# Yの座標名
plt.ylabel("Y")
# gridの表示
plt.grid(True)

f:id:knaka0209:20180518141637p:plain

hist()

ヒストグラム

# histogram
random.seed(0)
plt.hist(np.random.randn(10**5)*10 + 50, bins=60,range=(20,80))
plt.grid(True)

f:id:knaka0209:20180518143343p:plain

pie()

円グラフ

#
labels = 'Frogs', 'Hogs', 'Dogs', 'Logs'
fracs = [15, 30, 45, 10]
size=(9,5) 
plt.figure(figsize=size,dpi=100)
plt.pie(fracs, labels=labels, autopct='%1.1f%%', shadow=True)
plt.subplots_adjust(left=0,right=0.7)
plt.axis('equal') 


f:id:knaka0209:20180518143605p:plain