天天看點
傳回

2018-12-22-jekyll-theme-H2O

layout: post

title: jekyll主題theme-H2O

categories: jekyll GitHub

tags: jekyll GitHub theme H2O

jekyll-theme-H2O

基于Jekyll的部落客題模闆，簡潔輕量。

另外，還有此主題的Ghost版本 by eastpiger

Preview

線上預覽 Live Demo →

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-rmCsYikp-1585657560264)(/screenshot/jekyll-theme-h2o-realhome.jpg)]

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-aDoM6nrV-1585657560266)(/screenshot/jekyll-theme-h2o-realm.png)]

如果你喜歡這個部落格模闆，請在右上角star一下，非常感謝～

If you like this theme or using it, please give a ⭐️ for motivation 😉

如果想體驗手機浏覽效果，可以掃一下二維碼：

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-bDXDH2SY-1585657560267)(/screenshot/1494404591.png)]

Using your smartphone to scan the QR Code

Features 特性

CN

  • 代碼高亮
  • 夜間模式
  • Disqus評論系統
  • 粉藍兩種主題色
  • 頭圖個性化底紋
  • 響應式設計
  • 社交圖示
  • SEO标題優化
  • 文章标簽索引
  • 部落格文章搜尋
  • 複制文章内容自動添加版權

EN

  • Code highlight
  • Night mode
  • Disqus Comment System
  • Theme color: Blue & Pink
  • Hero Patterns
  • Responsive design
  • SNS Icon
  • Title SEO
  • Tags system
  • Search
  • Copyright text on copy event

Usage 快速開始

首先你需要安裝Jekyll，請檢視文檔: 快速指南

如果你已經安裝了Jekyll，請檢查版本是否為3.0.x，你可以使用

gem update jekyll

指令進行更新。

使用

gem install jekyll-paginate

或

sudo gem install jekyll-paginate

安裝Jekyll的分頁插件。

H2O主題基于Jekyll 3.2.1版本，不同版本之間可能存在部分差異，具體請參考官方更新文檔

點選右上角Fork按鈕在你的Github上建立分支，或者

clone

到本地。

git clone https://github.com/kaeyleo/jekyll-theme-H2O.git

最後，在指令行輸入

jekyll server

開啟服務，就能在本地預覽主題了。

如果需要部署到線上環境，請參照配置文檔的 開始 章節進行操作。

Document 配置文檔

CN

  • 開始
    • 站點資訊
    • 寫一篇文章
  • 元件
    • 導航
    • 側邊欄
    • 社交圖示
    • 個人簡介
    • 标簽
    • 文章搜尋
    • 代碼高亮
    • 夜間模式
  • 個性化
    • 部落格封面、主題皮膚
    • 頭圖底紋
  • 進階部分
    • 自定義
  • 內建服務
    • Disqus
    • Share.js

EN

  • Get Started
    • Site Settings
    • Write Posts
  • Components
    • Navigation Menu
    • Sidebar
    • SNS Icons
    • Personal Information
    • Tags
    • Search
    • Syntax Highlight
    • Night Mode
  • Style
    • Theme Color
    • Hero Background Patterns
  • Advanced
    • Customization
  • Plugins
    • Disqus
    • Share.js

You can easily get started by modifying _config.yml

站點資訊

你可以通用修改

_config.yml

檔案來輕松的開始搭建自己的部落格

# Site settings
title: '廖柯宇的獨立部落格' # 你的部落格網站标題
description: '很高興能在這裡與你分享我對技術和生活的思考。' # 站點描述
keyword: '廖柯宇, 廖柯宇的獨立部落格, 前端, 設計' # 網站關鍵詞
url: 'http://liaokeyu.com' # 站點url
baseurl: ''

# Build settings
paginate: 6 # 一頁放幾篇文章
paginate_path: 'page:num'

其實大部分參數已經預設配置好了，你隻需要通過文檔了解它們，然後根據自己的需求去

_config.yml

檔案裡修改即可。

寫一篇文章

文章一般都放在

_posts

檔案夾裡，每篇文章的開頭都需要設定一些頭資訊：

---
layout: post
title: 'H2O theme for Jekyll'
subtitle: '或許是最漂亮的Jekyll主題'
date: 2017-04-18
categories: 技術
cover: '/screenshot/jekyll-theme-h2o-postcover.jpg'
tags: jekyll 前端開發 設計
---

導航

部落格頂部的導航欄資訊需要以下面的格式進行配置：

# Navigation links
nav:
  home: '/'
  tags: '/tags.html'

導航連結需要寫上完整的html檔案名，它們都是放于根目錄下的，如果自建檔案夾，請務必在

exclude

參數中增加自建檔案夾的檔案名:

# Build settings
exclude: ['node_modules', 'dev', 'package.json', '自定義的檔案夾名字']

這樣做是為了在Jekyll運作時排除某些檔案被複制到運作檔案

_site

裡去。

側邊欄

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-y492pzOu-1585657560268)(/screenshot/jekyll-theme-h2o-sideBar.png)]

側邊欄分為兩個部分：【個人簡介】和【推薦标簽】。當螢幕寬度小于960px時，側邊欄會被隐藏。

社交圖示

使用阿裡的圖示管理平台Iconfont整理了一套常用的社交圖示用于部落格的個人簡介上，包括微網誌、知乎、掘金、簡書、Github等十三個網站，并且對滑鼠懸停時的樣式顔色進行了優化。

配置格式如下：

# SNS settings 配置社交網站url
sns:
  email: '//[email protected]'
  github: '//github.com/5616760'

sns屬性可選參數：

社交網站 參數
微網誌

weibo
推特

twitter
Github

github
知乎

zhihu
掘金

juejin
豆瓣

douban
簡書

jianshu
UI中國

uicn
領英

linkedin
Facebook

facebook
Youtube

youtube
Instagram

instagram
Dribbble

dribbble
Behance

behance
Medium

medium
VK

vk

個人簡介

首頁側邊欄和文章頁面底部都會顯示你的個人簡介

# Author 配置部落客資訊
author: 'Jack'
nickname: 'xx'
bio: '程式員'
avatar: 'assets/img/avatar.jpg'

标簽

對側邊欄的标簽子產品進行相應配置：

# Tags
recommend-tags: true
recommend-condition-size: 12

Tags配置說明：

屬性 參數 描述

recommend-tags

true

 ,

false

 		是否顯示推薦标簽

recommend-condition-size

12

 或其他數字 		推薦标簽個數限制

文章搜尋

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-2kermFTO-1585657560269)(/screenshot/jekyll-theme-h2o-search.png)]

基于Jekyll伺服器生成文章索引檔案

search.json

為部落格提供搜尋服務。輸入文章标題或與文章标簽相關的關鍵字即可。

搜尋功能預設是開啟的，以卡片的樣式顯示在側邊欄底部。如需關閉請将配置檔案

_config.yml

中

search

屬性的值改為

false

。

# Search
search: true
說明 參數
開啟搜尋功能

true
關閉搜尋功能

false

代碼高亮

模闆引入了Prism.js，一款輕量、可擴充的代碼文法高亮庫。

很多知名網站如MDN、css-tricks也在用它，就連 JavaScript 之父 Brendan Eich 也在個人部落格上使用。

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-gxFzvx3u-1585657560270)(/screenshot/jekyll-theme-h2o-highlight.png)]

遵循 HTML5 标準，Prism 使用語義化的 `````元素和

<code>

元素來标記代碼區塊：

```<code class="language-css">p { color: red }</code>```

在Markdown中你可以這樣寫：

```css
	p { color: red }
 ```

支援語言：

  • HTML
  • CSS
  • Sass
  • JavaScript
  • CoffeeScript
  • Java
  • C-like
  • Swift
  • PHP
  • Go
  • Python

夜間模式

晚11點至次日淩晨6點自動開啟夜間模式。如果不需要，則将配置檔案

_config.yml

中

nightMode

屬性的值改為

false

即可。

# Night mode
nightMode: true
說明 參數
開啟夜間模式

true
關閉夜間模式

false

主題皮膚

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-zHjbu2NP-1585657560271)(/screenshot/jekyll-theme-h2o-themecolor.jpg)]

支援兩種主題顔色藍色（預設）和粉色

主要效果展現在首頁部落格封面、頂部導航欄的logo以及滑鼠懸停時文字顯示的顔色效果。

# theme color
theme-color: 'default' # pink or default
顔色 參數
藍色

default
粉色

pink

如果你希望在部落格封面顯示圖檔，需要去index.html檔案中的頭資訊中添加

header-img

配置：

---
layout: default
home-title: Steven的部落格
description: 開發者，創造者
header-img: assets/img/banner.jpg
---

頭圖底紋

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-K4XmFEJ9-1585657560272)(/screenshot/jekyll-theme-h2o-heroPatterns.png)]

在沒有圖檔的情況下單純顯示顔色會不會太無趣了點？于是想到了加入底紋元素，底紋素材是SVG格式的（儲存在css樣式裡），加載比圖檔快很多。六種底紋（電路、食物、雲海、鑽石等等）供你選擇，配置如下：

# Hero background patterns
postPatterns: 'circuitBoard'

postPatterns

屬性參數配置：

底紋描述 參數
電路

circuitBoard
圓環

overlappingCircles
吃貨日常：啃打雞

food
土豪必備：鑽石

glamorous
圈圈叉叉

ticTacToe
中國風：雲海

seaOfClouds

自定義

主題開發使用的技術棧也比較簡單：引入jQuery類庫、使用Sass代替CSS編寫樣式，使用Gulp完成Sass的編譯、CSS和JavaScript的代碼合并壓縮等任務。

如果你喜歡折騰，想對模闆的代碼進行修改，需要使用指令

npm install

安裝

package.json

中的依賴，然後

gulp

一下即可開始你的自定義之旅。

在了解H2O主題的目錄結構之前，確定你對Jekyll目錄結構有所了解。

.
	├── _config.yml # 配置檔案
	├── _includes # 頁面元件友善重用
	|   ├── footer.html # 頁腳
	|   └── head.html # html文檔的頭部内容
	|   └── header.html # 頂部菜單欄
	|   └── pageNav.html # 文章清單分頁元件
	├── _layouts # 布局模闆
	|   ├── default.html # 預設模闆
	|   └── post.html # 文章頁面模闆
	├── _posts # 這裡放文章
	|   ├── 2017-05-03-elements-of-javascript-style.md # 命名格式：年-月-日-文章标題.md
	|   └── 2007-02-21-life-on-mars.md
	├── _site # Jekyll将源碼處理後生成的站點檔案，裡面的内容可直接釋出
	├── assets # 存放用于線上環境的靜态資源，如需修改css和js檔案請到dev檔案夾
	|   ├── css # dev檔案夾中sass編譯後的樣式檔案
	|   └── fonts # 字型檔案
	|   └── icons # 圖示檔案
	|   └── img #  圖檔檔案
	|   └── js # dev檔案夾中處理後的腳本檔案
	├── dev # 開發檔案
	|   ├── js # 存放腳本源碼
	|   └── sass # 樣式源碼
	|       └── app.scss # 整合下面的所有樣式檔案
	|       └── base.scss # 引入字型、Reset部分樣式
	|       └── common.scss # 模闆的主要樣式
	|       └── helper.scss # 工具樣式
	|       └── layouts.scss # 響應式布局
	└── gulpfile.js # 自動化任務腳本
	└── index.html # 模闆首頁
	└── tags.html # 标簽頁面
	└── 404.html # 404頁面
	└── package.json # 管理項目的依賴項

值得注意的是，css及js的源碼都在

dev

檔案夾中，每一次儲存 gulp 都會對它們進行處理并儲存到

assets

檔案夾以供

_site

上線環境使用。

Disqus

Disqus是一個第三方社交評論插件，體驗相當不錯。

在配置檔案

_config.yml

中找到comments的相關配置，設定

disqus

參數為

true

打開評論功能（

false

為關閉），并且設定

disqus_url

。

# Comments
comments:
	disqus: true
	disqus_url: 'https://your-disqus-username.disqus.com/embed.js'

注：

disqus

預設值為

false

Share.js

為了讓文章更友善地分享，使用了第三方分享插件Share.js，支援一鍵分享到微網誌、QQ空間、QQ好友、微信、騰訊微網誌、豆瓣、Facebook、Twitter、Linkedin、Google+、點點等社交網站。

# Share
social-share: true # 開啟或者關閉分享功能
social-share-items: ['wechat', 'weibo', 'douban','twitter']

Contribution 貢獻

Any types of contribution are welcome. Thanks.

接受各種形式的貢獻，包括不限于送出問題與需求，修複代碼。等待您的

Pull Request

感謝參與代碼貢獻的夥伴

  • Ray-Eldath
  • sctop
  • bananaappletw
  • moycat

License 許可證

Jekyll-Theme-H2O is licensed under MIT.

### Contribution 貢獻

Any types of contribution are welcome. Thanks.

接受各種形式的貢獻，包括不限于送出問題與需求，修複代碼。等待您的 ```Pull Request```

#### 感謝參與代碼貢獻的夥伴

- [Ray-Eldath](https://github.com/Ray-Eldath)
- [sctop](https://github.com/sctop)
- [bananaappletw](https://github.com/bananaappletw)
- [moycat](https://github.com/moycat)

### License 許可證

Jekyll-Theme-H2O is licensed under [MIT](https://github.com/kaeyleo/jekyll-theme-H2O/blob/master/LICENSE).
html javascript web
上一篇: Webview圖檔上傳方法圖檔上傳
下一篇: 爬教務系統擷取班級考試成績彙總表

繼續閱讀