jekyll theme basically basic
1.4.5 - 2021-07-05
基本的に Basic は、デフォルトの Minima の代替として意図された Jekyll テーマですが、いくつかの拡張機能が追加されています。
Jekyll v3.5 以降を実行していてセルフホスティングしている場合は、テーマを Ruby gem としてすぐにインストールできます。 GitHub Pages でホストしている場合は、リモート テーマとしてインストールすることも、すべてのテーマ ファイル (以下の構造を参照) をプロジェクトに直接コピーすることもできます。
次の行を Jekyll サイトのGemfileに追加します。
gem "jekyll-theme-basically-basic"次の行を Jekyll サイトの_config.ymlファイルに追加します。
theme : jekyll-theme-basically-basic次に、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 ユーザー名で複数の Jekyll ベースのサイトをホストしている場合は、ユーザー ページの代わりにプロジェクト ページを使用する必要があります。基本的に、リポジトリの名前をUSERNAME.github.io以外の名前に変更し、 masterからgh-pagesブランチを作成します。設定方法の詳細については、GitHub のドキュメントを確認してください。
jekyll-theme-basically-basicリポジトリをフォークまたはダウンロードした場合は、次のファイルとフォルダーを安全に削除できます。
.editorconfig.gitattributes.github.scss-lint.ymlCHANGELOG.mdjekyll-theme-basically-basic.gemspecLICENSERakefileREADME.mdscreenshot.png/docs/exampleRuby Gem または Basic Basic のリモート テーマ バージョンを使用している場合、アップグレードは非常に簡単です。
現在使用しているバージョンを確認するには、構築したサイトのソースを表示すると、次のような内容になるはずです。
<!--
Basically Basic Jekyll Theme 1.4.5
Copyright 2017-2018 Michael Rose - mademistakes.com | @mmistakes
Free for personal and commercial use under the MIT license
https://github.com/mmistakes/jekyll-basically-theme/blob/master/LICENSE
-->
すべての.htmlファイルの先頭に、 /assets/css/main.cssおよび/assets/js/main.jsあります。
Bundler ( Gemfileがある) を使用している場合は、 bundle updateを実行するか、そうでない場合はgem update jekyll-theme-basically-basic実行するだけです。
_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/jekyll-theme-basically-basic.gitからフェッチできることを確認します。
追加するには、次の手順を実行できます。
git remote add upstream https://github.com/mmistakes/jekyll-theme-basically-basic.git
これで、テーマのmasterブランチに対して行われたコミットを次のようにプルできるようになります。
git pull upstream master
フォーク後に行ったカスタマイズの量によっては、マージ競合が発生する可能性があります。競合するファイルの Git フラグを処理し、保持したい変更をステージングしてコミットします。
更新に対処するもう 1 つの方法は、テーマをダウンロードすることです。レイアウト、インクルード、アセットを新しいものに手動で置き換えます。変更を見逃さないようにするには、テーマのコミット履歴を確認して、それ以降に何が変更されたかを確認することをお勧めします。
以下は、注意すべき重要なフォルダー/ファイルの簡単なチェックリストです。
| 名前 | |
|---|---|
_layouts | 全部交換してください。レイアウトをカスタマイズした場合は、編集を適用します。 |
_includes | 全部交換してください。インクルードをカスタマイズした場合は、編集を適用します。 |
assets | 全部交換してください。スタイルシートまたはスクリプトをカスタマイズした場合は、編集を適用します。 |
_sass | 全部交換してください。 Sass パーシャルをカスタマイズした場合は、編集を適用します。 |
_data/theme.yml | 安全に保管してください。大きな構造上の変更や追加がないことを確認します。 |
_config.yml | 安全に保管してください。大きな構造上の変更や追加がないことを確認します。 |
注:最新バージョンが表示されない場合は、ブラウザーと CDN キャッシュを必ずフラッシュしてください。ホスティング環境によっては、 /assets/css/main.css 、 /assets/js/main.js 、または*.htmlの古いバージョンがキャッシュされる場合があります。
レイアウト、インクルード、Sass パーシャル、データ ファイルはすべてデフォルトの場所に配置されます。 assets内のスタイルシートとスクリプト、およびプロジェクトのルート ディレクトリ内のいくつかの開発関連ファイル。
注: Ruby Gem メソッドを使用して Basic Basic をインストールした場合、 /_layouts 、 /_includes 、 /_sass 、および/assetsにあるテーマ ファイルが失われます。これらはjekyll-theme-basically-basic gem にバンドルされているため、これは正常です。
jekyll-theme-basically-basic
├── _data # data files
| └── theme.yml # theme settings and custom text
├── _includes # theme includes and SVG icons
├── _layouts # theme layouts (see below for details)
├── _sass # Sass partials
├── assets
| ├── javascripts
| | └── main.js
| └── stylesheets
| └── main.scss
├── _config.yml # sample configuration
└── index.md # sample home page (all posts/not paginated)
Gemfileを作成してテーマをインストールした後、次のファイルを追加して編集する必要があります。
_config.yml/_data/theme.ymlindex.md注:ホーム ページでページネーションを有効にする方法については、以下のページネーションのドキュメントを参照してください。
jekyll newから始めるjekyll newコマンドを使用すると、最も早く起動して実行できます。
上記の指示に従って_config.yml編集し、 _data/theme.ymlを作成すれば準備完了です。
サイト全体の要素 ( lang 、 title 、 description 、 logo 、 authorなど) の構成は、プロジェクトの_config.ymlで行われます。追加の参照については、このリポジトリの構成例を参照してください。
| 説明 | |
|---|---|
lang | テキストの言語を示すために使用されます (例: en-US、en-GB、fr) |
title | サイトのタイトル (例: Dungan's Awesome Site) |
description | サイトの短い説明 (例: バッタマッシュに関するブログ) |
url | サイトの完全な URL (例: https://groverloaf.org) |
author | グローバルな著者情報 (下記を参照) |
logo | サイト全体のロゴへのパス ~100x100px (例: /assets/your-company-logo.png) |
twitter_username | サイト全体の Twitter ユーザー名。サイドバーのリンクとして使用されます。 |
github_username | サイト全体の GitHub ユーザー名。サイドバーのリンクとして使用されます。 |
その他の構成オプションについては、 jekyll-seo-tag 、 jekyll-feed 、 jekyll-paginate 、およびjekyll-sitemapのドキュメントを必ず参照してください。
このテーマには6種類のスキン（カラーバリエーション）があります。スキンを変更するには、次のいずれかを/_data/theme.ymlファイルに追加します。
skin: default | skin: night | skin: plum |
|---|---|---|
skin: sea | skin: soft | skin: steel |
|---|---|---|
このテーマを使用すると、テーマ全体で Google Fonts を簡単に使用できます。以下を/_data/theme.ymlに追加し、それに応じてフォントnameとweights置き換えます。
google_fonts :
- name : " Fira Sans "
weights : " 400,400i,600,600i "
- name : " Fira Sans Condensed "テーマ全体にあるテキストを変更するには、以下を/_data/theme.ymlファイルに追加し、必要に応じてカスタマイズします。
t :
skip_links : " Skip links "
skip_primary_nav : " Skip to primary navigation "
skip_content : " Skip to content "
skip_footer : " Skip to footer "
menu : " Menu "
search : " Search "
site_search : " Site Search "
results_found : " Result(s) found "
search_placeholder_text : " Enter your search term... "
home : " Home "
newer : " Newer "
older : " Older "
email : " Email "
subscribe : " Subscribe "
read_more : " Read More "
posts : " Posts "
page : " Page "
of : " of "
min_read : " min read "
present : " Present "
cv_awards : " Awards "
cv_summary_contact : " Contact "
cv_summary_contact_email : " Email "
cv_summary_contact_phone : " Phone "
cv_summary_contact_website : " Website "
cv_location : " Location "
cv_education : " Education "
cv_education_courses : " Courses "
cv_interests : " Interests "
cv_languages : " Languages "
cv_publications : " Publications "
cv_references : " References "
cv_skills : " Skills "
cv_volunteer : " Volunteer "
cv_work : " Work "デフォルトでは、 titleのあるすべての内部ページが「オフキャンバス」メニューに追加されます。これらのメニュー リンクをより詳細に制御および並べ替えるには、次のようにします。
navigation_pages配列を/_data/theme.ymlファイルに追加して、デフォルト設定をオーバーライドするカスタム リストを作成します。
希望する順序で生のページ パスを追加します。
navigation_pages :
- about.md
- cv.md各メニュー リンクのタイトルと URL は、それぞれtitleとpermalinkに基づいて設定されます。
投稿のメインリストを小さなリストに分割し、ページネーションを有効にすることで複数のページにそれらを表示します。
Gemfileにjekyll-paginateプラグインを含めます。
group :jekyll_plugins do
gem "jekyll-paginate"
end _config.ymlファイルのgems配列にjekyll-paginate追加し、次のページネーション設定を追加します。
paginate : 5 # amount of posts to show per page
paginate_path : /page:num/プロジェクトのルートにindex.html (または名前を変更してindex.md )を作成し、次の前付けを追加します。
layout : home
paginate : trueサイト全体の検索を有効にするには、 search: true _config.ymlに追加します。
デフォルトの検索では、 Lunr を使用してすべてのドキュメントの検索インデックスを構築します。この方法は、GitHub Pages でホストされているサイトと 100% 互換性があります。
注:投稿またはページの本文コンテンツの最初の 50 単語のみが Lunr 検索インデックスに追加されます。 _config.ymlでsearch_full_content trueに設定すると、これがオーバーライドされ、ページ読み込みのパフォーマンスに影響を与える可能性があります。
より速く、より関連性の高い検索を行うには (デモを参照):
jekyll-algolia gem をGemfileの:jekyll_pluginsセクションに追加します。
group :jekyll_plugins do
gem "jekyll-feed"
gem "jekyll-seo-tag"
gem "jekyll-sitemap"
gem "jekyll-paginate"
gem "jekyll-algolia"
endこれが完了したら、 bundle install実行してすべての依存関係をダウンロードします。
_config.ymlファイルで検索プロバイダーをlunrからalgoliaに切り替えます。
search_provider : algolia次の Algolia 資格情報を_config.ymlファイルに追加します。 Algolia アカウントをお持ちでない場合は、無料のコミュニティ プランを開くことができます。サインインすると、ダッシュボードから資格情報を取得できます。
algolia :
application_id : # YOUR_APPLICATION_ID
index_name : # YOUR_INDEX_NAME
search_only_api_key : # YOUR_SEARCH_ONLY_API_KEY
powered_by : # true (default), false資格情報を設定したら、次のコマンドを使用してインデックス作成を実行できます。
ALGOLIA_API_KEY=your_admin_api_key bundle exec jekyll algolia
Windows ユーザーの場合は、 set使用してALGOLIA_API_KEY環境変数を割り当てる必要があります。
set ALGOLIA_API_KEY=your_admin_api_key
bundle exec jekyll algolia
ALGOLIA_API_KEY管理 API キーに設定する必要があることに注意してください。
GitHub Pages でホストされているサイトで Algolia 検索を使用するには、この導入ガイドに従ってください。または、Netlify にデプロイするためのこのガイド。
注: Jekyll Algolia プラグインは、いくつかの方法で構成できます。ファイルやその他の重要な設定を除外する方法については、完全なドキュメントを必ず確認してください。
著者情報は「行単位」で投稿のメタデータとして使用され、 _config.ymlの次の前付けで Twitter サマリ カードのcreatorフィールドに伝達されます。
author :
name : John Doe
twitter : johndoetwitter
picture : /assets/images/johndoe.pngサイト全体の作成者情報は、ドキュメントの前付で同じ方法で上書きできます。
author :
name : Jane Doe
twitter : janedoetwitter
picture : /assets/images/janedoe.pngまたは、ドキュメントの前付で、 site.data.authorsに存在する対応するキーを指定します。たとえば、文書の前付に次のような記述があるとします。
author : megaman _data/authors.ymlには次のものがあります。
megaman :
name : Mega Man
twitter : megamantwitter
picture : /assets/images/megaman.png
drlight :
name : Dr. Light
twitter : drlighttwitter
picture : /assets/images/drlight.png現在、 author.picture 、 layout: aboutでのみ使用されます。推奨サイズは300 x 300ピクセルです。
読み取り時間カウントを有効にするには、投稿またはページの YAML フロント マターにread_time: trueを追加します。
オプションで、Disqus アカウントをお持ちの場合は、各投稿の下にコメント セクションを表示できます。
Disqus コメントを有効にするには、Disqus のショートネームをプロジェクトの_config.ymlファイルに追加します。
disqus :
shortname : my_disqus_shortnameコメントはデフォルトで有効になっており、環境値JEKYLL_ENV=productionでビルドされた場合にのみ実稼働環境に表示されます。
特定の投稿のコメントを表示したくない場合は、その投稿の前付にcomments: false追加することでコメントを無効にすることができます。
Google Analytics を有効にするには、次のようにトラッキング ID を_config.ymlに追加します。
google_analytics : UA-NNNNNNNN-Nコメントと同様に、Google Analytics 追跡スクリプトは、環境値JEKYLL_ENV=production使用する場合にのみ実稼働環境に表示されます。
デフォルトでは、フッターの著作権行には、サイトのタイトルに続いて現在の年 (ビルド時) が表示されます。例: © 2018 Basically Basic.
これを変更したい場合は、適切なテキストを使用して_config.ymlファイルにcopyright追加します。
copyright : " My custom copyright. " このテーマでは次のレイアウトが提供されており、各ページでlayout Front Matter を次のように設定することで使用できます。
---
layout : name
---layout: defaultこのレイアウトは、マストヘッド要素とフッター要素の間にページ コンテンツを配置する基本的なページ スキャフォールディングをすべて処理します。他のすべてのレイアウトはこれを継承し、 {{ content }}ブロック内に追加のスタイルと機能を提供します。
layout: postこのレイアウトには、次の前付け事項が含まれます。
# optional alternate title to replace page.title at the top of the page
alt_title : " Basically Basic "
# optional sub-title below the page title
sub_title : " The name says it all "
# optional intro text below titles, Markdown allowed
introduction : |
Basically Basic is a Jekyll theme meant to be a substitute for the default --- [Minima](https://github.com/jekyll/minima). Conventions and features found in Minima are fully supported by **Basically Basic**.
# optional call to action links
actions :
- label : " Learn More "
icon : github # references name of svg icon, see full list below
url : " http://url-goes-here.com "
- label : " Download "
icon : download # references name of svg icon, see full list below
url : " http://url-goes-here.com "
image : # URL to a hero image associated with the post (e.g., /assets/page-pic.jpg)
# post specific author data if different from what is set in _config.yml
author :
name : John Doe
twitter : johndoetwitter
comments : false # disable comments on this post注:ヒーロー画像を透明な「アクセント」カラーでオーバーレイして、テーマのパレットと統一することができます。有効にするには、次の Sass 変数オーバーライドを使用して CSS をカスタマイズします。
$intro-image-color-overlay : true;layout: page視覚的には、このレイアウトは、 layout: postと同じように見え、動作しますが、2 つの小さな違いがあります。
layout: homeこのレイアウトには、 layout: pageと同じ前付に以下の追加が含まれています。
paginate : true # enables pagination loop, see section above for additional setup
entries_layout : # list (default), gridデフォルトでは、投稿はリストビューで表示されます。グリッド ビューに変更するには、 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を追加します。
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: aboutこのレイアウトには、 layout: pageと同じ前付が含まれており、著者の写真を表示するために次のものが追加されています。
author :
name : John Doe
picture : /assets/images/johndoe.png推奨pictureサイズは約300 x 300ピクセルです。 authorオブジェクトが about ページの前付で明示的に設定されていない場合、テーマはデフォルトで_config.ymlに設定された値になります。
空白の場合、画像は表示されません。
layout: cvこのレイアウトにはlayout: pageと同じ前付けが含まれます。履歴書データの JSON ベースのファイル標準を利用して、履歴書や履歴書を簡単にレンダリングできます。
JSON Resume のブラウザ内履歴書ビルダーを使用して JSON ファイルをエクスポートし、プロジェクトに_data/cv.jsonとして保存するだけです。
推奨される画像サイズ (ピクセル単位) は次のとおりです。
| 画像 | 説明 | サイズ |
|---|---|---|
page.image.path | 大きな全幅のドキュメント画像。 | 縦長の画像はコンテンツをページの下に押し込みます。 1600 x 600目指すのに適した中間サイズです。 |
page.image | ( thumbnail 、 caption 、その他の変数なしで) 単独で使用される場合のpage.image.pathの短縮形。 | page.image.pathと同じ |
page.image.thumbnail | グリッドビューで使用される小さなドキュメント画像。 | 400 x 200 |
author.picture | 著者ページの画像。 | 300 x 300 |
このテーマのデフォルトの構造、スタイル、およびスクリプトは、次の 2 つの方法でオーバーライドおよびカスタマイズできます。
テーマのデフォルトは、同じ名前のファイルをプロジェクトの_includesまたは_layoutsディレクトリに配置することで上書きできます。例えば：
_includes/head.htmlファイルに指定するには、プロジェクト内に_includesディレクトリを作成し、Basic Basic の gem フォルダーから_includes/head.html <your_project>/_includesにコピーして、そのファイルの編集を開始します。プロのヒント:コンピューター上でテーマのファイルを見つけるには、 bundle info jekyll-theme-basically-basic実行します。これにより、Gem ベースのテーマ ファイルの場所が返されます。
デフォルトの Sass (テーマの_sassディレクトリにあります) をオーバーライドするには、次のいずれかを実行します。
Basic Basic gem から直接コピーします
bundle info jekyll-theme-basically-basicを実行して、そのパスを取得します)。/assets/stylesheets/main.scssの内容をそこから<your_project>にコピーします。<your_project>/assets/stylesheets/main.scss内で必要なものをカスタマイズします。このリポジトリからコピーします。
<your_project>にコピーします。<your_project/assets/stylesheets/main.scss内で必要なものをカスタマイズします。注:より広範な変更を加え、Gem にバンドルされている Sass パーシャルをカスタマイズするため。 Jekyll が現在これらのファイルを読み取る方法により、 _sassディレクトリの完全な内容を<your_project>にコピーする必要があります。
テーマのスタイルに基本的な調整を行うには、 <your_project>/assets/stylesheets/main.scssに Sass 変数を追加してオーバーライドできます。たとえば、テーマ全体で使用されるアクセントカラーを変更するには、以下を追加します。
$accent-color : red ;テーマにバンドルされているデフォルトの JavaScript をオーバーライドするには、次のいずれかを実行します。
Basic Basic gem から直接コピーします
bundle info jekyll-theme-basically-basicを実行して、そのパスを取得します)。/assets/javascripts/main.jsの内容をそこから<your_project>にコピーします。<your_project>/assets/javascripts/main.js内で必要なものをカスタマイズします。このリポジトリからコピーします。
<your_project>にコピーします。<your_project>/assets/javascripts/main.js内で必要なものをカスタマイズします。このテーマでは、パフォーマンスと柔軟性を高めるために、SVG として保存されたソーシャル ネットワークのロゴやその他のアイコンを使用します。これらの SVG は_includesディレクトリにあり、接頭辞としてicon-が付けられます。各アイコンは16 x 16ビューボックスに適合するようにサイズおよびデザインされ、SVGO で最適化されています。
| アイコン | ファイル名 |
|---|---|
| アイコン-矢印-左.svg | |
| アイコン-矢印-右.svg | |
| アイコン-bitbucket.svg | |
| アイコンカレンダー.svg | |
| アイコン-コードペン.svg | |
| アイコンダウンロード.svg | |
| アイコン-ドリブル.svg | |
| アイコンメール.svg | |
| アイコン-facebook.svg | |
| アイコン-flickr.svg | |
| アイコン-github.svg | |
| アイコン-gitlab.svg | |
| アイコン-googleplus.svg | |
| アイコン-instagram.svg | |
| アイコン-lastfm.svg | |
| icon-linkedin.svg | |
| アイコン-pdf.svg | |
| アイコン-ピンタレスト.svg | |
| アイコン-rss.svg | |
| アイコン-soundcloud.svg | |
| アイコン-スタックオーバーフロー.svg | |
| アイコン-ストップウォッチ.svg | |
| アイコン-tumblr.svg | |
| アイコン-twitter.svg | |
| アイコン-xing.svg | |
| アイコン-youtube.svg |
塗りつぶしの色は_sass/basically-basic/_icons.scss部分で定義され、クラス名が対応するアイコンと一致する.icon-nameで設定されます。
たとえば、Twitter アイコンには次のように#1da1f2の塗りつぶし色が与えられます。
< span class =" icon icon--twitter " > {% include icon-twitter.svg %} </ span >SVG アセットに加えて、ソーシャル ネットワーク リンクの生成を支援するアイコン ヘルパーが含まれています。
| インクルードパラメータ | 説明 | 必須 |
|---|---|---|
username | 指定されたソーシャル ネットワークのユーザー名 | 必須 |
label | ハイパーリンクに使用されるテキスト | オプション、デフォルトはusername |
たとえば、次のicon-github.htmlには次のものが含まれます。
{% include icon-github . html username = jekyll label = 'GitHub' %}次の HTML が出力されます。
< a href =" https://github.com/jekyll " >
< span class =" icon icon--github " > < svg viewBox =" 0 0 16 16 " xmlns =" http://www.w3.org/2000/svg " fill-rule =" evenodd " clip-rule =" evenodd " stroke-linejoin =" round " stroke-miterlimit =" 1.414 " > < path d =" M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.09-.202-.36-1.015.07-2.117 0 0 .67-.215 2.2.82.64-.178 1.32-.266 2-.27.68.004 1.36.092 2 .27 1.52-1.035 2.19-.82 2.19-.82.43 1.102.16 1.915.08 2.117.51.56.82 1.274.82 2.147 0 3.073-1.87 3.75-3.65 3.947.28.24.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.14.46.55.38C13.71 14.53 16 11.53 16 8c0-4.418-3.582-8-8-8 " > </ path > </ svg > </ span >
< span class =" label " > GitHub </ span >
</ a >このテーマを開発するための環境をセットアップするには:
cdで/exampleに移動し、 bundle install実行します。テーマに変更を加えたときにテーマをローカルでテストするには:
jekyll-theme-basically-basic ) にcd 。bundle exec rake previewを実行し、ブラウザを開いてhttp://localhost:4000/example/にアクセスします。これにより、テーマのファイルとexample/ディレクトリの内容を使用して Jekyll サーバーが起動します。変更を行った場合は、ブラウザを更新して変更を確認してください。
ドキュメントにタイプミスを見つけましたか?機能の追加やバグの修正に興味がありますか?その後、ぜひ問題を送信するか、プル リクエストを送信してみてください。初めてのプル リクエストの場合は、GitHub Flow を読むと役立つかもしれません。
プルリクエストを送信するとき:
masterからブランチを作成し、意味のある名前 (例: my-awesome-new-feature ) を付け、機能または修正について説明します。タイプミスや間違った文法などの修正など、「容易に解決できる成果」に取り組みたい場合は、サンプル ページが/docsと/exampleフォルダーにあります。
マイケル・ローズ
MIT ライセンス (MIT)
著作権 (c) 2017-2021 Michael Rose および寄稿者
本ソフトウェアおよび関連ドキュメント ファイル (以下「ソフトウェア」) のコピーを入手した人には、使用、コピー、変更、マージする権利を含むがこれらに限定されない、制限なくソフトウェアを取り扱う許可が、ここに無償で与えられます。 、以下の条件を条件として、本ソフトウェアのコピーを出版、配布、サブライセンス、および/または販売すること、および本ソフトウェアが提供される人物にそれを許可すること。
上記の著作権表示およびこの許可通知は、ソフトウェアのすべてのコピーまたは主要部分に含まれるものとします。
ソフトウェアは「現状のまま」提供され、明示的か黙示的かを問わず、商品性、特定目的への適合性、および非侵害の保証を含むがこれらに限定されない、いかなる種類の保証も行われません。いかなる場合においても、作者または著作権所有者は、契約行為、不法行為、またはその他の行為であるかどうかにかかわらず、ソフトウェアまたはソフトウェアの使用またはその他の取引に起因または関連して生じる、いかなる請求、損害、またはその他の責任に対しても責任を負わないものとします。ソフトウェア。
基本的に Basic には The Noun Project のアイコンが組み込まれています。アイコンは、クリエイティブ コモンズ表示 3.0 米国 (CC BY 3.0 US) に基づいて配布されています。
基本的にBasicにはUnsplashの写真が組み込まれています。
基本的に Basic には Susy、Copyright (c) 2017、Miriam Eric Suzanne が組み込まれています。 Susy は、BSD 3 条項の「新規」または「改訂」ライセンスの条件に基づいて配布されます。
基本的に Basic にはブレークポイントが組み込まれています。ブレークポイントは、MIT/GPL ライセンスの条件に基づいて配布されます。
