so simple theme
3.2.0
So Simple は、言葉と写真のためのシンプルな Jekyll テーマです。以下を提供するために構築されています:
CHANGELOG で新機能を確認してください。 v2 ドキュメント。
| 説明 | ||
|---|---|---|
| 大きなヒーロー画像を含む投稿。 | プレビュー | ソース |
| さまざまな一般的な HTML 要素を含む投稿で、テーマがそれらのスタイルをどのように設定するかを示します。 | プレビュー | ソース |
| 強調表示されたコードを表示する投稿。 | プレビュー | ソース |
| さまざまな配置の画像を表示する投稿。 | プレビュー | ソース |
| すべての投稿は年ごとにグループ化されています。 | プレビュー | ソース |
| すべての投稿がカテゴリ別にグループ化されています。 | プレビュー | ソース |
| すべての投稿がタグごとにグループ化されています。 | プレビュー | ソース |
| カテゴリーページ。 | プレビュー | ソース |
| グリッドビューでのドキュメントのリスト。 | プレビュー | ソース |
追加のサンプル投稿はデモ サイトでご覧いただけます。これらのソース ファイル (およびデモ サイト全体) は/docsフォルダーにあります。
Jekyll v3.5 以降を実行していてセルフホスティングしている場合は、テーマを Ruby gem としてすぐにインストールできます。 GitHub Pagesでホストしている場合は、リモート テーマとしてインストールすることも、すべてのテーマ ファイル (以下の構造を参照) をプロジェクトに直接コピーすることもできます。
Jekyll サイトのGemfileに次の行を追加します (または作成します)。
gem "jekyll-theme-so-simple"次の行を Jekyll サイトの_config.ymlファイルに追加します。
theme : jekyll-theme-so-simple次に、Bundler を実行してテーマ gem と依存関係をインストールします。
bundle install
GitHub Pages では、GitHub でホストされているテーマの完全なサポートが追加されました。
gem "jekyll"を次のように置き換えます。
gem "github-pages" , group : :jekyll_plugins bundle update実行し、すべての gem が適切にインストールされていることを確認します。
_config.ymlファイルに、 remote_theme: "mmistakes/[email protected]"を追加します。他のtheme:またはremote_theme:エントリを削除します。
注: Jekyll サイトは http://USERNAME.github.io ですぐに表示できるようになります。そうでない場合は、空のコミットを GitHub にプッシュすることで強制的に再構築できます (詳細については以下を参照)。
同じ GitHub ユーザー名で複数の Jekyll ベースのサイトをホストしている場合は、ユーザー ページの代わりにプロジェクト ページを使用する必要があります。基本的に、リポジトリの名前をUSERNAME.github.io以外の名前に変更し、 masterからgh-pagesブランチを作成します。この仕組みの詳細については、GitHub のドキュメントを確認してください。
so-simple-themeリポジトリをフォークまたはダウンロードした場合は、次のファイルとフォルダーを安全に削除できます。
.githubdocsexample.editorconfig.gitattributesbanner.jsCHANGELOG.mdGemfilejekyll-theme-so-simple.gemspecpackage.jsonRakefileREADME.mdREADME-OLD.mdscreenshot.pngRuby Gem または So Simple のリモート テーマ バージョンを使用している場合、アップグレードは非常に簡単です。
現在使用しているバージョンを確認するには、構築したサイトのソースを表示すると、次のような内容になるはずです。
<!--
So Simple Jekyll Theme 3.0.0
Copyright 2013-2018 Michael Rose - mademistakes.com | @mmistakes
Free for personal and commercial use under the MIT license
https://github.com/mmistakes/so-simple-theme/blob/master/LICENSE
-->
これは、すべての.htmlファイル、 /assets/css/main.css 、および/assets/js/main.jsの先頭にあります。
Bundler ( Gemfileがある) を使用している場合は、単にbundle update実行するか、そうでない場合はgem update jekyll-theme-so-simple実行します。
_config.ymlに最新バージョンが割り当てられていることを確認します。
remote_theme: "mmistakes/[email protected]"
注: @xxxが省略された場合は、テーマの現在のmasterブランチが使用されます。サイトに重大な変更が加えられるのを避けるために、 remote_theme特定のバージョンで「ロック」することをお勧めします。
次のステップでは、最新のテーマの更新を取得できるように、GitHub Pages サイトを再構築する必要があります。これは、GitHub リポジトリにコミットをプッシュアップすることで実現できます。
現時点でプッシュするものが何もない場合は、空のコミットでもジョブを完了できます。
git commit --allow-empty -m "Force rebuild of site"
Jekyll + GitHub Pages ワークフローを最大限に活用したい場合は、Git を利用する必要があります。テーマの更新を手動でプルダウンするには、まず上流のリモートがあることを確認する必要があります。テーマのリポジトリをフォークした場合は、おそらく問題ありません。
再確認するには、 git remote -vを実行し、 origin https://github.com/mmistakes/so-simple-theme.gitからフェッチできることを確認します。
追加するには、次の手順を実行できます。
git remote add upstream https://github.com/mmistakes/so-simple-theme.git
これで、テーマのmasterブランチに対して行われたコミットを次のようにプルできるようになります。
git pull upstream master
フォーク後に行ったカスタマイズの量によっては、マージ競合が発生する可能性があります。競合するファイルの Git フラグを処理し、保持したい変更をステージングしてコミットします。
更新に対処するもう 1 つの方法は、テーマをダウンロードすることです。レイアウト、インクルード、アセットを新しいものに手動で置き換えます。変更を見逃さないようにするには、テーマのコミット履歴を確認して、何が変更されたかを確認してください。
以下は、注意すべき重要なフォルダー/ファイルの簡単なチェックリストです。
| 名前 | |
|---|---|
_layouts | 全部交換してください。レイアウトをカスタマイズした場合は、編集を適用します。 |
_includes | 全部交換してください。インクルードをカスタマイズした場合は、編集を適用します。 |
assets | 全部交換してください。スタイルシートまたはスクリプトをカスタマイズした場合は、編集を適用します。 |
_sass | 全部交換してください。 Sass パーシャルをカスタマイズした場合は、編集を適用します。 |
_data/navigation.yml | 安全に保管できます。大きな構造上の変更や追加がないことを確認します。 |
_data/text.yml | 安全に保管してください。大きな構造上の変更や追加がないことを確認します。 |
_config.yml | 安全に保管してください。大きな構造上の変更や追加がないことを確認します。 |
注:最新バージョンが表示されない場合は、ブラウザーと CDN キャッシュを必ずフラッシュしてください。ホスティング環境によっては、古いバージョンの/assets/css/main.css 、 /assets/js/main.min.js 、または*.htmlファイルがキャッシュされる場合があります。
レイアウト、インクルード、Sass パーシャル、データ ファイルはすべてデフォルトの場所に配置されます。スタイルシートとスクリプトは、 assetsにあり、プロジェクトのルート ディレクトリにはいくつかの開発関連ファイルがあります。
注意: Ruby Gem またはリモート テーマ メソッドを使用して So Simple をインストールした場合、 /_layouts 、 /_includes 、 /_sass 、および/assetsにあるテーマ ファイルがプロジェクトから失われます。これらはjekyll-theme-so-simple gem にバンドルされているため、これは正常です。
├── _data # data files
| ├── navigation.yml # navigation bar links
| └── text.yml # theme text
├── _includes # theme includes
├── _layouts # theme layouts (see below for usage)
├── _sass # Sass partials
├── assets
| ├── css
| | └── main.scss
| └── js
| └── main.min.js
├── _config.yml # sample configuration
└── index.md # sample home page (recent posts/not paginated)
Gemfileを作成してテーマをインストールした後、次のファイルを追加して編集する必要があります。
_config.yml/_data/navigation.yml/_data/text.ymlindex.md注:ホーム ページでページネーションを有効にする方法については、以下のページネーションのドキュメントを参照してください。
jekyll newから始めるjekyll newコマンドを使用すると、最も早く起動して実行できます。
上記のインストール ガイドと以下の構成ガイドに従ってGemfileと_config.ymlファイルを編集し、前に説明したように_data/text.ymlを作成します。
サイト全体の要素 ( locale 、 title 、 description 、 url 、 logo 、 authorなど) の構成は、プロジェクトの_config.ymlで行われます。追加の参照については、このリポジトリの構成例を参照してください。
| 名前 | 説明 | 例 |
|---|---|---|
locale | サイトの主言語。 | "en-us" |
title | サイトのタイトル。 | "My Awesome Site" |
description | 簡単な説明。 | "This is my site, it is awesome." |
baseurl | デプロイ先と同じベース URL で Web サイトをテストするために使用されます。 | /my-base-path |
url | サイトの完全な URL。 | "https://your-site.com" |
logo | マストヘッドで使用されるサイト全体のロゴへのパス。 | /images/your-logo.png |
テーマのカラーパレットを変更するには、3 つのスキン (デフォルト、ライト、ダーク) を使用できます。
default.css | light.css | dark.css |
|---|---|---|
skin : " /assets/css/skins/default.css "
skin : " /assets/css/skins/light.css "
skin : " /assets/css/skins/dark.css "提供されているもの以外のカスタム スキンを使用するには:
/assets/css/skins/default.scssローカル リポジトリにコピーし、名前を変更します。.cssファイルを参照するように、 _config.ymlのskinパスを更新します。site.localeは、サイト内の各 Web ページの主言語を宣言するために使用されます。
例: locale: "en-US"は、サイトの lang 属性を米国風の英語に設定し、 en-GB英国風の英語に設定します。国コードはオプションであり、より短いlocale: "en"も使用できます。言語と国コードを見つけるには、この参照表を確認してください。
ロケールを適切に設定することは、テキスト データ ファイル内のローカライズされたテキストを関連付けるために重要です。
注:テーマのデフォルトは英語 ( en 、 en-US 、 en-GB ) のテキストです。 _config.ymlのロケールを他のものに変更する場合は、必ず対応するロケール キーと翻訳されたテキストを_data/text.ymlに追加してください。
サイトの基本ホスト名とプロトコル。 GitHub Pages でホスティングしている場合は、 url: "https://github.io.mmistakes" 、またはカスタム ドメイン名がある場合はurl: "https://your-site.com"のようになります。
GitHub Pages では、新しいサイトに対してhttps://が強制されるようになったため、混合コンテンツの警告を避けるために URL を設定するときはその点に注意してください。
注: Jekyll は、開発中にローカルでjekyll serve実行するときに、 urlの値をhttp://localhost:4000でオーバーライドします。この動作を回避したい場合は、 JEKYLL_ENV=productionを設定して、環境を強制的に実稼働環境にします。
このオプションは、Jekyll コミュニティであらゆる種類の混乱を引き起こします。サイトを GitHub プロジェクト ページまたはサブフォルダー ( /blogなど) としてホストしていない場合は、いじらないでください。
So Simpleデモ サイトの場合は、GitHub (https://mmessages.github.io/so-simple-theme) でホストされています。このベース パスを正しく設定するにはurl: "https://mmistakes.github.io"およびbaseurl: "/so-simple-theme"を使用します。
Jekyll 管理者が意図したとおりにsite.urlとsite.baseurl適切に使用する方法の詳細については、この件に関する Parker Moore の投稿を確認してください。
注: baseurl使用する場合は、必ずそれをコンテンツ内のリンクおよびアセット パスの一部として含めてください。 url:およびbaseurl: "/blog"の値により、ローカル サイトは http://localhost:4000 ではなく http://localhost:4000/blog で表示されます。すべてのアセットと内部リンクのパスの先頭に{{ site.baseurl }}を追加するか、Jekyll のrelative_urlを使用することができます。
例の値を使用するには、次の画像パス{{ '/images/my-image.jpg' | relative_url }}上にあります。 {{ '/images/my-image.jpg' | relative_url }} http://localhost:4000/blog/images/my-image.jpgとして正しく出力されます。
relative_urlフィルターがないと、アセット パス/blogが欠落し、ページ上に壊れた画像が表示されることになります。
_config.ymlでdate_format指定することで、デフォルトの日付形式を変更できます。標準の Liquid 日付形式のいずれかを受け入れます。
たとえば、デフォルト値"%B %-d, %Y"は次のように変更できます。
date_format : " %Y-%m-%d "read_time: trueを使用して、推定読書時間のスニペットをサイト全体で有効にします。デフォルトの 1 分あたりの単語数の値として200設定されています。これは、 _config.ymlファイルのwords_per_minuteで変更できます。
read_time : true
words_per_minute : 200MathJax (数学用の JavaScript 表示エンジン) をサイト全体で有効にする
mathjax :
enable : true comboオプションを使用すると、MathJax コンポーネントの組み合わせを選択できます。デフォルトは「tex-svg」です。また、 tagsオプションを使用すると、方程式の番号付けを制御できます。選択肢は、「ams」 (デフォルト)、「all」、および「none」です。
サンプル構成:
mathjax :
enable : true # MathJax equations, e.g. true, false (default)
combo : " tex-svg " # "tex-svg" (default), "tex-mml-chtml", etc.
tags : " ams " # "none", "ams" (default), "all"フォントnameとweights適宜置き換えることで、サイト全体でGoogle フォントを簡単に使用できます。推奨されるフォントの組み合わせは次のとおりです。
google_fonts :
- name : " Source Sans Pro "
weights : " 400,400i,700,700i "
- name : " Lora "
weights : " 400,400i,700,700i "注:他のフォント ファミリを使用する場合は、 /assets/css/main.scss内の次の SCSS 変数を必ず追加し、Google が提供するfont-family値でオーバーライドしてください。
$serif-font-family : " Lora " , serif ;
$sans-serif-font-family : " Source Sans Pro " , sans-serif ;
$monospace-font-family : Menlo, Consolas, Monaco, " Courier New " , Courier ,
monospace ;
$base-font-family : $sans-serif-font-family ;
$headline-font-family : $sans-serif-font-family ;
$title-font-family : $serif-font-family ;
$description-font-family : $serif-font-family ;
$meta-font-family : $serif-font-family ;テーマのデフォルト変数のオーバーライドの詳細については、以下のスタイルシートのドキュメントを参照してください。
ページネーションを有効にすることで、ホームページ上の投稿のメイン リストを複数のページに分割します。
Gemfileにjekyll-paginateプラグインを含めます。
group :jekyll_plugins do
gem "jekyll-paginate"
end _config.ymlファイルのplugins配列 (以前はgems ) にjekyll-paginate追加し、次のページネーション設定を追加します。
paginate : 10 # amount of posts to show per page
paginate_path : /page:num/プロジェクトのルートにindex.html (または名前を変更してindex.md )を作成し、次の前付けを追加します。
layout : home
paginate : true検索ページで使用するためにドキュメントの完全なコンテンツにインデックスを付けるには、 _config.ymlでsearch_full_content trueに設定します。
search_full_content : true注:大量の投稿は検索インデックスのサイズを増加させ、ページ読み込みパフォーマンスに影響を与えます。 search_full_contentをfalse (デフォルト) に設定すると、インデックス作成が本文コンテンツの最初の 50 ワードに制限されます。
デフォルトでは、投稿に追加されたカテゴリとタグは分類アーカイブ ページにリンクされていません。この動作を有効にして、カテゴリまたはタグごとにグループ化された投稿を含むページにリンクするには、次の行を追加します。
category_archive_path : " /categories/# "
tag_archive_path : " /tags/# "これらのパスは、カテゴリとタグのアーカイブページに使用されるパーマリンクを模倣する必要があります。最後の#は、ページ上の正しい分類セクションをターゲットにするために必要です。
たとえば、次の前付けを含むcategories.md作成するとします。
title : Categories Archive
layout : categories
permalink : /foo/カテゴリ リンクが適切に機能するには、 category_archive_path "/foo/#に変更する必要があります。
注: layout: categoryおよびlayout: tagを使用して、専用のカテゴリ ページとタグ ページを手動で作成できます。または、 jekyll-archivesやjekyll-paginate-v2などのプラグインを使用して、それらを自動的に生成します。
Disqusアカウントをお持ちの場合は、各投稿の下にコメント セクションを表示できます。
Disqus コメントを有効にするには、Disqus のショートネームをプロジェクトの_config.ymlファイルに追加します。
disqus :
shortname : my_disqus_shortnameコメントは、Disqus アカウントがlocalhostコンテンツで汚染されるのを避けるため、環境値JEKYLL_ENV=productionを使用してビルドした場合にのみ実稼働環境に表示されます。
特定の投稿のコメントを表示したくない場合は、その投稿の前付にcomments: false追加することでコメントを無効にすることができます。
Google Analytics を有効にするには、次のようにトラッキング ID を_config.ymlに追加します。
google_analytics : UA-NNNNNNNN-N上記の Disqus コメントと同様に、Google Analytics 追跡スクリプトは、環境値JEKYLL_ENV=production使用する場合にのみ実稼働環境に表示されます。
その他の構成オプションについては、 jekyll-seo-tag 、 jekyll-feed 、 jekyll-paginate 、およびjekyll-sitemapのドキュメントを必ず参照してください。
このテーマでは次のレイアウトが提供されており、次のように各ページにlayout前付けを設定することで使用できます。
---
layout : name
---layout: defaultこのレイアウトは、マストヘッド要素とフッター要素の間にページ コンテンツを配置する基本的なページ スキャフォールディングをすべて処理します。他のすべてのレイアウトはこれを継承し、 {{ content }}ブロック内に追加のスタイルと機能を提供します。
layout: postこのレイアウトには、次の前付け事項が含まれます。
| 名前 | タイプ | 説明 |
|---|---|---|
image | 弦 | 投稿に関連付けられた大きな画像へのパス。有効になっている場合は、OpenGraph、Twitter カード、およびサイト フィードのサムネイルにも使用されます。推奨される画像サイズ。 |
image.path | 弦 | 同上。 thumbnailまたはcaptionもimageオブジェクトに割り当てる必要がある場合に使用されます。 |
image.caption | 弦 | 画像の説明またはクレジットを提供します。マークダウンは許可されます。 |
author | オブジェクトまたは文字列 | 投稿の著者name 、 picture 、 twitter 、 linksなどを指定します。 |
comments | ブール値 | comments: falseを使用してコメントを無効にします。 |
share | ブール値 | share: trueを使用して、ソーシャル共有リンクを投稿に追加します。 |
投稿画像の例:
image :
path : /images/post-image-lg.jpg
thumbnail : /images/post-image-th.jpg
caption : " Photo credit [Unsplash](https://unsplash.com/) "注: jekyll-seo-tag を完全にサポートするために、 image.feature前付は非推奨になりました。 thumbnailやcaption使用していない場合は、投稿画像をimage: /images/your-post-image.jpgとしてより簡潔に割り当てることができます。
投稿者の例:
# post specific author data if different from what is set in _config.yml
author :
name : John Doe
picture : /images/john-doe.jpg
twitter : johndoe注:ドキュメントの前付で次の手順を実行すると、著者情報を_data/authors.ymlに一元化できます。
author : johndoe _data/authors.yml内の対応する作成者キーを使用すると、次のようになります。
johndoe :
name : John Doe
picture : /images/john-doe.jpg
twitter : johndoe注: author.picture推奨サイズは150 x 150ピクセルです。
著者サイドバーにどのリンクを表示するかを定義するには、 _config.ymlまたは/_data/authors.ymlのauthors.linksキーを使用します。
| 名前 | 説明 |
|---|---|
title | リンクについて説明します。表示されません。アクセシビリティの目的で使用されます。 |
url | リンクが指す URL。 |
icon | Font Awesome アイコン (例: fab fa-twitter-squareに対応します。 |
例：
author :
links :
- title : Twitter
url : https://twitter.com/username
icon : fab fa-twitter-square
- title : Instagram
url : https://instagram.com/username
icon : fab fa-instagram
- title : GitHub
url : https://github.com/username
icon : fab fa-github-square注:著者リンクを完全に無効にするには、以下を使用します。
author :
links : falselayout: page視覚的には、このレイアウトはlayout: postと似ていますが、次のような違いがあります。
ページ レイアウトは、 home 、 posts 、 categories 、 tags 、 collection 、 category 、 tag 、 searchなどの他のいくつかのレイアウトのベースを形成します。
layout: homeこのレイアウトには、 layout: pageと同じ前付に以下の追加が含まれています。
paginate : true # enables pagination loop, see section above for additional setup
entries_layout : # list (default), gridページネーションが有効になっていない場合、ページにはデフォルトで最新の 10 件の投稿が表示されます。表示される投稿の量を変更するには、ページの前付けに次の内容を追加して制限値を割り当てます。
posts_limit : 5デフォルトでは、投稿はリストビューで表示されます。グリッド ビューに変更するには、 entries_layout: gridページの前付に追加します。
layout: postsこのレイアウトには、すべての投稿が公開年ごとにグループ化されて表示されます。これはlayout: pageと同じ前付を収容します。
デフォルトでは、投稿はリストビューで表示されます。グリッド ビューに変更するには、 entries_layout: gridページの前付に追加します。
layout: categoriesこのレイアウトには、カテゴリに分類されたすべての投稿が表示されます。これはlayout: pageと同じ前付を収容します。
デフォルトでは、投稿はリストビューで表示されます。グリッド ビューに変更するには、 entries_layout: gridページの前付に追加します。
layout: tagsこのレイアウトでは、すべての投稿がタグごとにグループ化されて表示されます。これはlayout: pageと同じ前付を収容します。
デフォルトでは、投稿はリストビューで表示されます。グリッド ビューに変更するには、 entries_layout: gridページの前付に追加します。
layout: collectionこのレイアウトには、特定のコレクションごとにグループ化されたすべてのドキュメントが表示されます。これは、 layout: pageと同じ前付に次の追加を加えて対応します。
collection : # collection name
entries_layout : # list (default), grid
show_excerpts : # true (default), false
sort_by : # date (default) title
sort_order : # forward (default), reverse recipesコレクション内のすべてのドキュメントを表示するページを作成するには、プロジェクトのルートにrecipes.mdを作成し、次の前付けを追加します。
title : Recipes
layout : collection
permalink : /recipes/
collection : recipesデフォルトでは、ドキュメントはリスト ビューで表示されます。グリッド ビューに変更するには、 entries_layout: gridページの前付に追加します。コレクションをタイトルで並べ替える場合は、 sort_by: titleを追加します。逆にソートしたい場合は、 sort_order: reverseを追加します。単にレシピのタイトルを表示するリスト (抜粋なし) を探している場合は、 show_excerpts: falseを追加します。
layout: categoryこのレイアウトには、特定のカテゴリごとにグループ化されたすべての投稿が表示されます。これは、 layout: pageと同じ前付に次の追加を加えて対応します。
taxonomy : # category name
entries_layout : # list (default), gridデフォルトでは、投稿はリストビューで表示されます。グリッド ビューに変更するには、 entries_layout: gridページの前付に追加します。
カテゴリfooに割り当てられたすべての投稿を表示するページを作成するには、プロジェクトのルートにfoo.mdを作成し、次の前付けを追加します。
title : Foo
layout : category
permalink : /categories/foo/
taxonomy : foolayout: tagこのレイアウトには、特定のタグでグループ化されたすべての投稿が表示されます。これは、 layout: pageと同じ前付に次の追加を加えて対応します。
taxonomy : # tag name
entries_layout : # list (default), gridデフォルトでは、投稿はリストビューで表示されます。グリッド ビューに変更するには、 entries_layout: gridページの前付に追加します。
タグfoo barに割り当てられたすべての投稿を表示するページを作成するには、プロジェクトのルートにfoo-bar.mdを作成し、次の前付けを追加します。
title : Foo Bar
layout : tag
permalink : /tags/foo-bar/
taxonomy : foo barlayout: searchこのレイアウトでは、検索フォームが表示され、クエリに基づいて関連ページが表示されます。
ページ コンテンツ インデックス: title 、 excerpt 、 content (有効な場合)、 categories 、 tags 、およびurl 。
検索インデックスから特定のページ/投稿を除外したい場合は、前付で検索フラグをfalseに設定します。
search : falseドキュメントの完全なコンテンツのインデックスを作成するには_config.ymlでsearch_full_content trueに設定します。
search_full_content : true注:大量の投稿は検索インデックスのサイズを増加させ、ページ読み込みパフォーマンスに影響を与えます。 search_full_contentをfalse (デフォルト) に設定すると、インデックス作成が本文コンテンツの最初の 50 ワードに制限されます。
推奨される画像サイズ (ピクセル単位) は次のとおりです。
| 画像 | 説明 | サイズ |
|---|---|---|
site.logo | マストヘッドで使用されるサイト全体のロゴ。 | 200 x 200 |
page.image.path | 大きな全幅のドキュメント画像。 | 縦長の画像はコンテンツをページの下に押し込みます。 1600 x 600目指すのに適した中間サイズです。 |
page.image | ( thumbnail 、 caption 、その他の変数なしで) 単独で使用される場合のpage.image.pathの短縮形。 | page.image.pathと同じ |
page.image.thumbnail | グリッドビューで使用される小さなドキュメント画像。 | 400 x 200 |
author.picture | 投稿サイドバーの著者の写真。 | 150 x 150 |
テーマ全体にあるテキストを変更するには、次の/_data/text.ymlファイルをコピーし、必要に応じてカスタマイズします。
新しいテキストを追加するときは、キーがsite.localeに使用される可能性のある言語/国コードと一致していることを確認してください。
トップナビゲーションでどのページがリンクされているかを定義するには:
/_data/navigation.ymlファイルを作成します。
表示したい順序でページを追加します。
- title : Posts
url : /posts/
- title : Categories
url : /categories/
- title : External Page
url : https://whatever-site.com/page.html
- title : Search
url : /search/注:長いタイトルやリンクが多いと、特に画面が小さい場合、ナビゲーション バーが複数の行に分割される場合があります。サイトの主要なナビゲーションを開発するときは、この点に留意してください。
著者情報は「行単位」で投稿のメタデータとして使用され、 _config.ymlの次の前付けで Twitter サマリ カードのcreatorフィールドに伝達されます。
author :
name : John Doe
twitter : johndoetwitter
picture : /images/johndoe.pngサイト全体の作成者情報は、ドキュメントの前付で同じ方法で上書きできます。
author :
name : Jane Doe
twitter : janedoetwitter
picture : /images/janedoe.pngまたは、ドキュメントの前付で、 site.data.authorsに存在する対応するキーを指定します。たとえば、文書の前付に次のような記述があるとします。
author : megaman _data/authors.ymlには次のものがあります。
megaman :
name : Mega Man
twitter : megamantwitter
picture : /images/megaman.png
drlight :
name : Dr. Light
twitter : drlighttwitter
picture : /images/drlight.png現在、 author.pictureは、 layout: postでのみ使用されます。推奨サイズは150 x 150ピクセルです。
フッター リンクと著作権テキストは両方ともカスタマイズできます。
フッター リンクは_config.ymlのfooter_linksキーの下に設定されます。
| 名前 | 説明 |
|---|---|
title | リンクについて説明します。表示されません。アクセシビリティの目的で使用されます。 |
url | リンクが指す URL。 |
icon | Font Awesome 5 アイコン (例: fab fa-twitter-squareに対応します。 |
例:
footer_links :
- title : Twitter
url : https://twitter.com/username
icon : fab fa-twitter-square
- title : GitHub
url : https://github.com/mmistakes
icon : fab fa-github-square
- title : Feed
url : atom.xml
icon : fas fa-rss-square注:フッター リンクを完全に無効にするには、 footer_links: falseを使用します。
デフォルトでは、著作権により現在の年、 site.title 、および"Powered by Jekyll & So Simple."これを変更するには、次のようにcopyright _config.ymlに追加します (マークダウンは許可されます)。
copyright : " This site is made with <3 by *me, myself, and I*. " これらの Jekyll ヘルパーはショートコードと考えることができます。 GitHub Pages ではほとんどのプラグインが許可されていないため、カスタム タグは使用できません。代わりに、テーマはインクルードを利用して同様のことを行います。
YouTube/Vimeo または親の幅に合わせてサイズを調整する他のiframeコンテンツからビデオを埋め込みます。
| パラメータ | 必須 | 説明 |
|---|---|---|
url | はい | ビデオまたは iframe の URL 例: https://www.youtube.com/watch?v=-PVofD2A9t8 |
ratio | オプション | ビデオまたは iframe コンテンツの比率。 21:9 16:9 4:3 1:1 。比率が割り当てられていない場合は、 16:9が使用されます。 |
例：
{% include responsive-embed url="https://www.youtube.com/watch?v=-PVofD2A9t8" ratio="16:9" %}投稿とページに自動生成された目次を含めるには、表示したい場所に次のヘルパーを追加します。
{% include toc %}つまり、Simple 3 はテーマ全体を大幅に書き直したものです。最も注目すべき変更点を以下に要約し、その後にさらに具体的な変更点を示します。
おそらく、v2 の_layouts 、 _includes 、 _sass 、 .css 、および.jsファイルをすべて捨てて、Ruby gem またはリモート テーマのインストール オプションを使用することになると言っても過言ではありません。
_layouts 、 _includes 、 _sass 、および JavaScript が再構築されました。relative_urlフィルターとabsolute_urlフィルターを活用して、 site.urlとsite.baseurl適切に使用します。/_includes/open-graph.html jekyll-seo-tagに置き換えました。tagsとposts ) に置き換えられました。404.mdページを削除しました。atom.xmlフィード ファイルをjekyll-feedに置き換えました。favicon.icoおよびfavicon.pngファイルを削除しました。floatベースのレイアウトのフォールバックが使用されているためdisplay: gridとフレックスボックス) をサポートしていないブラウザーでも問題が発生しすぎないようになっています。形式がen_US (アンダースコア付き) からハイフン付きのen-USに変更されました。
site.owner 、jekyll-seo-tag と jekyll-feed のサポートを強化するためにsite.authorなりました。
| v2 | v3 |
|---|---|
site.owner.name | site.author.name |
site.owner.avatar | site.author.picture |
site.owner.email | site.author.email |
site.owner.twitter | site.twitter |
site.owner.google.analytics | 非推奨となり、jekyll-seo-tag に置き換えられました |
site.owner.bing-verify | 非推奨となり、jekyll-seo-tag に置き換えられました |
site.owner.google.analyticsはsite.google_analyticsになりました。詳細については、ドキュメントを参照してください。
site.owner.disqus-shortnameはsite.disqus.shortnameになりました。詳細については、ドキュメントを参照してください。
特定の投稿のコメントを無効にするには、前付にcomments: falseを追加します。
search_omit searchに名前変更されました。投稿またはページを検索から除外するには、代わりに前付にsearch: false追加します。
site.logo 、 page.image.path 、 author.pictureなどに画像パスを割り当てる場合、完全な相対パスまたは絶対パスが必要になりました。
So Simple v2 では、画像はすべて/images/に配置され、ファイル名だけで前付に割り当てられました。画像を適切にロードするには、画像を保存する場合は、すべてのパスの前に/images/ ... を追加する必要があります ( /images/your-image.jpgなど)。
jekyll-seo-tag、jekyll-feed、jekyll-sitemap などの Jekyll プラグインのサポートを改善するために、ほとんどのimageキーの名前が変更されました。すべての投稿とページの前付けをそれに応じて調整します。
| v2 | v3 |
|---|---|
image.feature | image.path |
image.thumb | image.thumbnail |
image.credit | image.caption (マークダウン許可) |
image.creditlink | 非推奨です。代わりに**image.caption**を使用してください |
次の v2 前付の投稿:
image :
feature : feature-image-filename.jpg
thumb : thumb-image-filename.jpg
credit : Michael Rose
creditlink : https://mademistakes.com次の v3 前付に変換されます。
image :
path : /images/feature-image-filename.jpg
thumbnail : /images/thumb-image-filename.jpg
caption : " [Michael Rose](https://mademistakes) "ストックの So Simple v2 フォーク (変更なし) を最新のものに移行する大まかな手順。
_includes/ 、 _layouts/ 、 _sass/ 、 jshintrc 、 Gruntfile.js 、およびsearch.jsonを削除します。
Ruby gem または GitHub Pages のインストール方法に合わせてGemfile編集し、その指示に従います。
次の Google フォントを_config.ymlに追加します。
google_fonts :
- name : " Source Sans Pro "
weights : " 400,400i,700,700i "
- name : " Lora "
weights : " 400,400i,700,700i "名前が変更されたキーや新しい相対パス要件があるキーに細心の注意を払い、 _config.ymlを編集します。 locale 、 logo 、およびowner始めるのが良いでしょう。
上記の画像の変更に従って、投稿/ページ内のimage.feature 、 image.thumb 、およびimage.creditのすべてのインスタンスの名前を変更します。
index.htmlの本文コンテンツを削除し、 layout: page layout: homeに変更します。必要に応じてページネーションを設定します。
/search/index.mdの本文コンテンツを削除し、 layout: page layout: searchに変更します。
/tags/index.mdの本文コンテンツを削除し、 layout: page layout: tagsに変更します。
/articles/index.mdの本文コンテンツを削除し、 layout: page layout: categoryに変更し、 taxonomy: articlesを追加します。
/body/index.mdの本文コンテンツを削除し、 layout: page layout: categoryに変更し、 taxonomy: blogを追加します。
投稿/ページのmodified前付の名前をlast_modified_atに変更し、それをサポートするプラグインとの同等性を向上させます。
tag_archive_path: "/tags/#"を_config.ymlに追加して、投稿メタ サイドバーのタグ リンクを有効にします。
_data/authors.yml (および投稿/ページの前付) でavatarをpictureに変更し、上記の画像パスの変更に従ってパスを編集します。
Ruby gemまたはリモート テーマとしてインストールすると、コア テーマ ファイル ( _layouts 、 _includes 、 _sass 、 assetsなど) がプロジェクトに存在しなくなります。
このテーマのデフォルトの構造、スタイル、およびスクリプトは、次の 2 つの方法でオーバーライドおよびカスタマイズできます。
テーマ ファイルは、同じ名前のファイルをプロジェクトの_includesまたは_layoutsディレクトリに配置することで上書きできます。例えば：
_includes/social-share.htmlに追加するには、プロジェクトに_includesディレクトリを作成し、So Simple の gem フォルダーから_includes/social-share.html <your_project>/_includesにコピーして、そのファイルを編集します。プロのヒント:コンピューター上でテーマのファイルを見つけるには、 bundle show jekyll-theme-so-simpleを実行します。これにより、Gem ベースのテーマ ファイルの場所が返されます。
テーマには、カスタム マークアップとコンテンツを事前定義された場所に挿入するのに役立つ 2 つのファイルが付属しています。
| 説明 | |
|---|---|
_includes/head-custom.html | メタデータ、ファビコンなどを追加するために<head>要素内に挿入されます。 |
_includes/footer-custom.html | <footer>要素内で、サイト スクリプトと著作権情報の前に挿入されます。 |
デフォルトの Sass (テーマの_sassディレクトリにあります) をオーバーライドするには、次のいずれかを実行します。
So Simple gem から直接コピーする
bundle show jekyll-theme-so-simpleを実行して、そのパスを取得します)。/assets/css/main.scssの内容をそこから<your_project>にコピーします。<your_project>/assets/css/main.scss内で必要なものをカスタマイズします。このリポジトリからコピーします。
<your_project>にコピーします。<your_project/assets/css/main.scss内で必要なものをカスタマイズします。注: gem にバンドルされている実際の Sass パーシャルをカスタマイズするには、 _sassディレクトリの完全な内容を<your_project>にコピーする必要があります。 Jekyll が現在これらのファイルをインポートする方法により、それはすべてか無かです。 1 つの Sass パーシャル (または 2 つ) をオーバーライドすることは、 _includesや_layoutsのようには機能しません。
テーマのスタイルに基本的な調整を加えるには、 <your_project>/assets/css/main.scssに Sass 変数を追加してオーバーライドできます。たとえば、テーマ全体で使用されるアクセントカラーを変更するには、すべての@import行の前に次の行を追加します。
$accent-color : tomato ;テーマにバンドルされているデフォルトの JavaScript をオーバーライドするには、次のいずれかを実行します。
So Simple gem から直接コピーする
bundle show jekyll-theme-so-simpleを実行して、そのパスを取得します)。/assets/js/main.jsの内容をそこから<your_project>にコピーします。<your_project>/assets/js/main.js内で必要なものをカスタマイズします。このリポジトリからコピーします。
/assets/js/main.jsの内容を<your_project>にコピーします。<your_project>/assets/js/main.js内で必要なものをカスタマイズします。テーマの/assets/js/main.min.jsファイルは、 /assets/js/にある jQuery プラグインおよびその他のスクリプトから構築されます。
├── assets
| ├── js
| | ├── lunr # Lunr search plugin
| | | ├── lunr.xx.js # Lunr language plugins
| | | ├── ...
| | | ├── lunr.min.js
| | | └── lunr.stemmer.support.min.js
| | ├── plugins
| | | ├── jquery.smooth-scroll.min.js # make same-page links scroll smoothly
| | | ├── lity.min.js # responsive lightbox
| | | └── table-of-contents.js # table of contents toggle
| | ├── main.js # jQuery plugin settings and other scripts
| | ├── main.min.js # concatenated and minified scripts
| | ├── search-data.json # search index used by Lunr
独自のスクリプトを変更または追加するには、それらをassets/js/main.jsに含めてから、 npm run build:js使用して再構築します。詳細については、以下を参照してください。
/assets/js/plugins/に追加のスクリプトを追加し、それらを他のスクリプトと連結したい場合は、 package.json内のuglifyスクリプトを必ず更新してください。削除したスクリプトについても同様です。
_config.yml内の次の配列にパスを追加することで、 <head>要素または終了</body>要素にスクリプトを追加することもできます。
例：
head_scripts :
- https://code.jquery.com/jquery-3.2.1.min.js
- /assets/js/your-custom-head-script.js
footer_scripts :
- /assets/js/your-custom-footer-script.js注: footer_scriptsにパスを割り当てると、テーマの/assets/js/main.min.jsファイルが非アクティブ化されます。このスクリプトには、特にfooter_scripts配列に追加しない限り機能しなくなるプラグインやその他のスクリプトが含まれています。
このテーマでは、 Font Awesome SVG with JS バージョンを図像に使用しています。これらのアイコンが表示される目立つ場所は、作成者のサイドバーとフッターのリンクです。
このテーマを開発するための環境をセットアップするには:
cdで/exampleに移動し、 bundle install実行します。テーマに変更を加えたときにテーマをローカルでテストするには:
jekyll-theme-so-simple ) にcd 。bundle exec rake previewを実行し、ブラウザを開いてhttp://localhost:4000/example/にアクセスします。これにより、テーマのファイルとexample/ディレクトリの内容を使用して Jekyll サーバーが起動します。変更を行った場合は、ブラウザを更新して変更を確認してください。
依存関係を減らすため、Gulp や Grunt などのタスク ランナーではなく、一連の npm スクリプトを使用してmain.min.jsをビルドします。これらのツールのほうが自分の好みであれば、ぜひ代わりにそれらを使用してください。
始めるには:
cdプロジェクトのルートに移動します。注:テーマの以前のバージョンからアップグレードした場合は、 npm install実行する前にpackage.jsonをコピーしていることを確認してください。また、 node_modulesディレクトリも削除する必要がある場合があります。
すべてがうまくいけば、 npm run build:jsを実行すると、 main.jsとすべてのプラグイン スクリプトが/assets/js/main.min.jsに圧縮/連結されます。
ドキュメントにタイプミスを見つけましたか?機能やバグ修正をリクエストしますか?重複を避けるために、問題を送信する前に、未解決の問題と終了した問題を検索してください。
プルリクエストも歓迎です。初めての場合は、GitHub Flow を読んでおくと役立つかもしれません。
あなたの投稿によってテーマの動作が追加または変更された場合は、必ずドキュメントやサンプル コンテンツを更新してください。ドキュメントは README.md にあり、サンプルの投稿、ページ、コレクションはdocsとexampleフォルダーにあります。
プルリクエストを送信するとき:
masterからブランチを作成し、意味のある名前を付けます (例: my-awesome-new-feature )。マイケル・ローズ
MIT ライセンス (MIT)
著作権 (c) 2013-2019 Michael Rose および寄稿者
本ソフトウェアおよび関連ドキュメント ファイル (以下「ソフトウェア」) のコピーを入手した人には、使用、コピー、変更、マージする権利を含むがこれらに限定されない、制限なくソフトウェアを取り扱う許可が、ここに無償で与えられます。 、以下の条件を条件として、本ソフトウェアのコピーを出版、配布、サブライセンス、および/または販売すること、および本ソフトウェアが提供される人物にそれを許可すること。
上記の著作権表示およびこの許可通知は、ソフトウェアのすべてのコピーまたは主要部分に含まれるものとします。
ソフトウェアは「現状のまま」提供され、明示的か黙示的かを問わず、商品性、特定目的への適合性、および非侵害の保証を含むがこれらに限定されない、いかなる種類の保証も行われません。いかなる場合においても、作者または著作権所有者は、契約行為、不法行為、またはその他の行為であるかどうかにかかわらず、ソフトウェアまたはソフトウェアの使用またはその他の取引に起因または関連して生じる、いかなる請求、損害、またはその他の責任に対しても責任を負わないものとします。ソフトウェア。
So Simple には Font Awesome (著作権 (c) 2017 Dave Gandy) が組み込まれています。 Font Awesome は、SIL OFL 1.1 および MIT ライセンスの条件に基づいて配布されています。
So Simple には Unsplash の写真が組み込まれています。
Simple Simpleには、Wegraphicsの写真が組み込まれています
Simple SimpleにはBreakpointが組み込まれています。ブレークポイントは、MIT/GPLライセンスの条件の下で配布されます。
Simple SimpleがJQuery Smooth Scroll、Copyright（C）2017 Karl Swedbergを組み込んでいます。 jQueryスムーズスクロールは、MITライセンスの条件の下で配布されます。
Simple Simpleには、Lunr、Copyright（C）2017 Oliver Nightingaleが組み込まれています。 LUNRは、MITライセンスの条件に基づいて配布されます。
非常にSimpleがLiity、Copyright（C）2015-2016、Jan Sorgallaを取り入れています。 Lityは、MITライセンスの条件の下で配布されます]（http://opensource.org/licenses/mit）。
Simple Simpleが組み込まれた目次トグル、Copyright（c）2017 Timothy B. Smith。目次トグルは、MITライセンスの条件の下で配布されます]（http://opensource.org/licenses/mit）。
