jekyll theme basically basic
1.4.5 - 2021-07-05
โดยพื้นฐานแล้ว Basic เป็นธีม Jekyll ซึ่งใช้แทน Minima เริ่มต้น โดยมีการปรับปรุงบางอย่างเพื่อการวัดผลที่ดี:
หากคุณใช้ Jekyll v3.5+ และโฮสต์เอง คุณสามารถติดตั้งธีมเป็น Ruby gem ได้อย่างรวดเร็ว หากคุณโฮสต์ด้วย GitHub Pages คุณสามารถติดตั้งเป็นธีมระยะไกลหรือคัดลอกไฟล์ธีมทั้งหมดได้โดยตรง (ดูโครงสร้างด้านล่าง) ลงในโปรเจ็กต์ของคุณ
เพิ่มบรรทัดนี้ลงใน Gemfile ของไซต์ Jekyll ของคุณ :
gem "jekyll-theme-basically-basic" เพิ่มบรรทัดนี้ลงในไฟล์ _config.yml ของไซต์ Jekyll ของคุณ:
theme : jekyll-theme-basically-basicจากนั้นรัน Bundler เพื่อติดตั้งธีมเจมและการขึ้นต่อกัน:
bundle install
GitHub Pages ได้เพิ่มการสนับสนุนเต็มรูปแบบสำหรับธีมที่โฮสต์โดย GitHub
แทนที่ gem "jekyll" ด้วย:
gem "github-pages" , group : :jekyll_plugins เรียกใช้ bundle update และตรวจสอบว่าติดตั้งอัญมณีทั้งหมดอย่างถูกต้อง
เพิ่ม remote_theme: "mmistakes/[email protected]" ลงในไฟล์ _config.yml ของคุณ ลบรายการ theme: หรือ remote_theme:
หมายเหตุ: ไซต์ Jekyll ของคุณควรสามารถดูได้ทันทีที่ http://USERNAME.github.io หากไม่เป็นเช่นนั้น คุณสามารถบังคับให้สร้างใหม่ได้โดย ปรับแต่งไซต์ของคุณ (ดูรายละเอียดเพิ่มเติมด้านล่าง)
หากคุณโฮสต์ไซต์ที่ใช้ Jekyll หลายแห่งภายใต้ชื่อผู้ใช้ GitHub เดียวกัน คุณจะต้องใช้หน้าโครงการแทนหน้าผู้ใช้ โดยพื้นฐานแล้ว คุณเปลี่ยนชื่อ repo เป็นอย่างอื่นที่ไม่ใช่ USERNAME.github.io และสร้างสาขา gh-pages จาก master สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับวิธีตั้งค่า โปรดดูเอกสารประกอบของ GitHub
หากคุณแยกหรือดาวน์โหลด repo jekyll-theme-basically-basic คุณสามารถลบไฟล์และโฟลเดอร์ต่อไปนี้ได้อย่างปลอดภัย:
.editorconfig.gitattributes.github.scss-lint.ymlCHANGELOG.mdjekyll-theme-basically-basic.gemspecLICENSERakefileREADME.mdscreenshot.png/docs/exampleหากคุณใช้ Ruby Gem หรือเวอร์ชันธีมระยะไกลของ Basically 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
เพียงเรียกใช้ bundle update หากคุณใช้ Bundler (มี Gemfile ) หรือ gem update jekyll-theme-basically-basic หากคุณไม่มี
ตรวจสอบว่าคุณได้กำหนดเวอร์ชันล่าสุดใน _config.yml
remote_theme: "mmistakes/[email protected]"
หมายเหตุ: หากละเว้น @xxx จะใช้สาขา master ของธีมปัจจุบัน ขอแนะนำให้ "ล็อก" remote_theme ในเวอร์ชันเฉพาะเพื่อหลีกเลี่ยงไม่ให้มีการเปลี่ยนแปลงไซต์ของคุณ
ขั้นตอนต่อไปจำเป็นต้องสร้างไซต์ GitHub Pages ของคุณใหม่เพื่อให้สามารถดึงการอัปเดตธีมล่าสุดได้ ซึ่งสามารถทำได้โดยการผลักดันคอมมิตไปยัง repo GitHub ของคุณ
การคอมมิตที่ว่างเปล่าก็จะทำให้งานสำเร็จได้เช่นกัน หากคุณไม่มีอะไรต้องผลักดันในขณะนี้:
git commit --allow-empty -m "Force rebuild of site"
หากคุณต้องการได้รับประโยชน์สูงสุดจากเวิร์กโฟลว์ Jekyll + GitHub Pages คุณจะต้องใช้ Git หากต้องการดึงการอัปเดตธีม คุณต้องตรวจสอบให้แน่ใจก่อนว่ามีรีโมตอัปสตรีม หากคุณแยก repo ของธีมคุณก็มีแนวโน้มที่จะไปได้ดี
หากต้องการตรวจสอบอีกครั้ง ให้รัน 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 จัดเตรียมการเปลี่ยนแปลงที่คุณต้องการเก็บไว้ จากนั้นจึงคอมมิตการเปลี่ยนแปลงเหล่านั้น
อีกวิธีในการจัดการกับการอัปเดตคือการดาวน์โหลดธีม --- แทนที่เค้าโครง การรวม และเนื้อหาด้วยธีมที่ใหม่กว่าด้วยตนเอง เพื่อให้แน่ใจว่าคุณจะไม่พลาดการเปลี่ยนแปลงใดๆ อาจเป็นความคิดที่ดีที่จะตรวจสอบประวัติการคอมมิตของธีมเพื่อดูว่ามีอะไรเปลี่ยนแปลงไปบ้างตั้งแต่นั้นมา
ต่อไปนี้เป็นรายการตรวจสอบโดยย่อของโฟลเดอร์/ไฟล์สำคัญที่คุณต้องคำนึงถึง:
| ชื่อ | |
|---|---|
_layouts | เปลี่ยนทั้งหมด. ใช้การแก้ไขหากคุณปรับแต่งเค้าโครงใดๆ |
_includes | เปลี่ยนทั้งหมด. ใช้การแก้ไขหากคุณปรับแต่งการรวมใดๆ |
assets | เปลี่ยนทั้งหมด. ใช้การแก้ไขหากคุณปรับแต่งสไตล์ชีตหรือสคริปต์ |
_sass | เปลี่ยนทั้งหมด. ใช้การแก้ไขหากคุณปรับแต่ง Sass บางส่วน |
_data/theme.yml | ปลอดภัยที่จะเก็บไว้ ตรวจสอบว่าไม่มีการเปลี่ยนแปลงหรือเพิ่มเติมโครงสร้างที่สำคัญ |
_config.yml | ปลอดภัยที่จะเก็บไว้ ตรวจสอบว่าไม่มีการเปลี่ยนแปลงหรือเพิ่มเติมโครงสร้างที่สำคัญ |
หมายเหตุ: หากคุณไม่เห็นเวอร์ชันล่าสุด อย่าลืมล้างแคชของเบราว์เซอร์และ CDN ขึ้นอยู่กับสภาพแวดล้อมการโฮสต์ของคุณ เวอร์ชันเก่าของ /assets/css/main.css , /assets/js/main.js หรือ *.html อาจถูกแคชไว้
เลย์เอาต์ รวมถึง ไฟล์ Sass บางส่วน และไฟล์ข้อมูลทั้งหมดจะถูกวางไว้ในตำแหน่งเริ่มต้น สไตล์ชีทและสคริปต์ใน assets และไฟล์ที่เกี่ยวข้องกับการพัฒนาบางส่วนในไดเร็กทอรีรากของโปรเจ็กต์
โปรดทราบ: หากคุณติดตั้ง Basically Basic ผ่านวิธี Ruby Gem ไฟล์ธีมที่พบใน /_layouts , /_includes , /_sass และ /assets จะหายไป นี่เป็นเรื่องปกติเนื่องจากจะรวมเข้ากับเจม jekyll-theme-basically-basic
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 ของโครงการของคุณ ดูการกำหนดค่าตัวอย่างใน repo นี้สำหรับการอ้างอิงเพิ่มเติม
| คำอธิบาย | |
|---|---|
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
ธีมนี้มาในหกสกินที่แตกต่างกัน (รูปแบบสี) หากต้องการเปลี่ยนสกิน ให้เพิ่มรายการใดรายการหนึ่งต่อไปนี้ในไฟล์ /_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 ตามลำดับ
แบ่งรายการหลักของโพสต์ออกเป็นรายการเล็กๆ และแสดงไว้หลายหน้าโดยเปิดใช้งานการแบ่งหน้า
รวมปลั๊กอิน jekyll-paginate ไว้ใน Gemfile ของคุณ
group :jekyll_plugins do
gem "jekyll-paginate"
end เพิ่ม jekyll-paginate ให้กับอาร์เรย์ gems ในไฟล์ _config.yml ของคุณและการตั้งค่าการแบ่งหน้าต่อไปนี้:
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 การตั้ง search_full_content เป็น true ใน _config.yml ของคุณจะแทนที่การตั้งค่านี้และอาจส่งผลต่อประสิทธิภาพการโหลดหน้าเว็บ
เพื่อการค้นหาที่รวดเร็วและเกี่ยวข้องมากขึ้น (ดูการสาธิต):
เพิ่ม 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
เปลี่ยนผู้ให้บริการค้นหาจาก lunr เป็น algolia ในไฟล์ _config.yml ของคุณ:
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 ผู้ดูแลระบบของคุณ
หากต้องการใช้การค้นหา Algolia กับไซต์ที่โฮสต์ GitHub Pages ให้ปฏิบัติตามคำแนะนำในการใช้งานนี้ หรือคู่มือนี้สำหรับการปรับใช้บน Netlify
หมายเหตุ: ปลั๊กอิน Jekyll Algolia สามารถกำหนดค่าได้หลายวิธี อย่าลืมตรวจสอบเอกสารฉบับเต็มเกี่ยวกับวิธียกเว้นไฟล์และการตั้งค่าอันมีค่าอื่นๆ
ข้อมูลผู้เขียนจะถูกใช้เป็นข้อมูลเมตาสำหรับโพสต์ "ตามบรรทัด" และเผยแพร่ฟิลด์ creator ของการ์ดสรุป Twitter โดยมีเนื้อหาส่วนหน้าต่อไปนี้ใน _config.yml :
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 พิกเซล
หากต้องการเปิดใช้งานการนับเวลาในการอ่าน ให้เพิ่ม read_time: true ลงใน YAML Front Matter ของโพสต์หรือเพจ
หากคุณมีบัญชี 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.
หากคุณต้องการเปลี่ยนเพิ่ม copyright ให้กับไฟล์ _config.yml ของคุณด้วยข้อความที่เหมาะสม:
copyright : " My custom copyright. " ธีมนี้มีเค้าโครงต่อไปนี้ ซึ่งคุณสามารถใช้โดยการตั้ง layout เค้าโครงส่วนหน้าในแต่ละหน้า เช่น:
---
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หมายเหตุ: ภาพหลักสามารถซ้อนทับด้วยสี "เน้น" แบบโปร่งใสได้ เพื่อรวมภาพเหล่านั้นเข้ากับชุดสีของธีม หากต้องการเปิดใช้งาน ให้ปรับแต่ง CSS ด้วยการแทนที่ตัวแปร Sass ต่อไปนี้:
$intro-image-color-overlay : true;layout: page รูปลักษณ์นี้มีลักษณะและทำหน้าที่เหมือนกับ layout: post โดยมีความแตกต่างเล็กน้อยสองประการ
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 ไว้ที่ส่วนหน้าของหน้า
หากต้องการสร้างเพจที่แสดงโพสต์ทั้งหมดที่กำหนดให้กับ tag 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 ไม่ได้ตั้งค่าไว้อย่างชัดเจนในส่วนหน้าของหน้าเกี่ยวกับ ธีมจะใช้ค่าดีฟอลต์ที่ตั้งไว้ใน _config.yml
หากเว้นว่างไว้จะไม่มีภาพปรากฏขึ้น
layout: cv เค้าโครงนี้รองรับส่วนหน้าเดียวกันกับ layout: page โดยใช้ประโยชน์จากมาตรฐานไฟล์ที่ใช้ JSON สำหรับข้อมูลเรซูเม่ เพื่อแสดงประวัติย่อหรือประวัติย่อได้อย่างสะดวกง่ายดาย
เพียงใช้เครื่องมือสร้างเรซูเม่ในเบราว์เซอร์ของ JSON Resume เพื่อส่งออกไฟล์ JSON และบันทึกลงในโปรเจ็กต์ของคุณเป็น _data/cv.json
ขนาดภาพที่แนะนำเป็นพิกเซลมีดังนี้:
| ภาพ | คำอธิบาย | ขนาด |
|---|---|---|
page.image.path | รูปภาพเอกสารขนาดใหญ่เต็มความกว้าง | รูปภาพสูงจะดันเนื้อหาลงมาที่หน้า 1600 x 600 เป็นขนาดพื้นกลางที่ดีที่ต้องการ |
page.image | ตัวย่อของ page.image.path เมื่อใช้เพียงอย่างเดียว (ไม่มี thumbnail caption หรือตัวแปรอื่นๆ) | เหมือนกับ page.image.path |
page.image.thumbnail | ภาพเอกสารขนาดเล็กที่ใช้ในมุมมองตาราง | 400 x 200 |
author.picture | รูปภาพหน้าผู้เขียน | 300 x 300 |
โครงสร้างเริ่มต้น สไตล์ และสคริปต์ของธีมนี้สามารถแทนที่และปรับแต่งได้สองวิธีต่อไปนี้
คุณสามารถแทนที่ค่าเริ่มต้นของธีมได้โดยการวางไฟล์ที่มีชื่อเดียวกันลงในไดเร็กทอรี _includes หรือ _layouts ของโปรเจ็กต์ของคุณ ตัวอย่างเช่น:
_includes/head.html ให้สร้างไดเรกทอรี _includes ในโปรเจ็กต์ของคุณ คัดลอก _includes/head.html จากโฟลเดอร์ gem ของ Basically Basic ไปยัง <your_project>/_includes และเริ่มแก้ไขไฟล์นั้น เคล็ดลับมืออาชีพ: หากต้องการค้นหาไฟล์ของธีมบนคอมพิวเตอร์ของคุณ ให้รัน bundle info jekyll-theme-basically-basic ซึ่งจะส่งคืนตำแหน่งของไฟล์ธีมแบบ gem
หากต้องการแทนที่ Sass เริ่มต้น (อยู่ในไดเร็กทอรี _sass ของธีม) ให้ทำอย่างใดอย่างหนึ่งต่อไปนี้:
คัดลอกโดยตรงจากอัญมณี Basically Basic
bundle info jekyll-theme-basically-basic เพื่อรับเส้นทางไป)/assets/stylesheets/main.scss จากตรงนั้นไปที่ <your_project><your_project>/assets/stylesheets/main.scssคัดลอกจาก repo นี้
<your_project><your_project/assets/stylesheets/main.scss หมายเหตุ: เพื่อทำการเปลี่ยนแปลงเพิ่มเติมและปรับแต่ง Sass บางส่วนที่รวมอยู่ในเจม คุณจะต้องคัดลอกเนื้อหาทั้งหมดของไดเร็กทอรี _sass ไปยัง <your_project> เนื่องจากวิธีที่ Jekyll อ่านไฟล์เหล่านั้นในปัจจุบัน
หากต้องการปรับแต่งขั้นพื้นฐานให้กับสไตล์ของธีม คุณสามารถแทนที่ตัวแปร Sass ได้โดยการเพิ่ม <your_project>/assets/stylesheets/main.scss ตัวอย่างเช่น หากต้องการเปลี่ยนสีเน้นเสียงที่ใช้ทั่วทั้งธีม ให้เพิ่มสิ่งต่อไปนี้:
$accent-color : red ;หากต้องการแทนที่ JavaScript ดีฟอลต์ที่รวมอยู่ในธีม ให้ทำอย่างใดอย่างหนึ่งต่อไปนี้:
คัดลอกโดยตรงจากอัญมณี Basically Basic
bundle info jekyll-theme-basically-basic เพื่อรับเส้นทางไป)/assets/javascripts/main.js จากตรงนั้นไปที่ <your_project><your_project>/assets/javascripts/main.jsคัดลอกจาก repo นี้
<your_project><your_project>/assets/javascripts/main.js ธีมนี้ใช้โลโก้เครือข่ายโซเชียลและการยึดถืออื่น ๆ ที่บันทึกเป็น SVG เพื่อประสิทธิภาพและความยืดหยุ่น SVG ดังกล่าวอยู่ในไดเร็กทอรี _includes และนำหน้าด้วย icon- แต่ละไอคอนได้รับการปรับขนาดและออกแบบให้พอดีกับช่องมองภาพ 16 x 16 และปรับให้เหมาะสมกับ SVGO
| ไอคอน | ชื่อไฟล์ |
|---|---|
| ไอคอนลูกศร-left.svg | |
| ไอคอนลูกศร-right.svg | |
| ไอคอน-bitbucket.svg | |
| ไอคอนปฏิทิน.svg | |
| ไอคอน-codepen.svg | |
| ไอคอน-download.svg | |
| ไอคอน-dribbble.svg | |
| ไอคอน-email.svg | |
| ไอคอน-facebook.svg | |
| ไอคอน-flickr.svg | |
| ไอคอน-github.svg | |
| ไอคอน-gitlab.svg | |
| icon-googleplus.svg | |
| ไอคอน-instagram.svg | |
| ไอคอน-lastfm.svg | |
| ไอคอน-linkedin.svg | |
| ไอคอน-pdf.svg | |
| ไอคอน-pinterest.svg | |
| ไอคอน-rss.svg | |
| ไอคอน-soundcloud.svg | |
| ไอคอน-stackoverflow.svg | |
| icon-stopwatch.svg | |
| ไอคอน-tumblr.svg | |
| ไอคอน-twitter.svg | |
| icon-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 .หากต้องการทดสอบธีมในเครื่องเมื่อคุณทำการเปลี่ยนแปลง:
cd ลงในโฟลเดอร์รูทของ repo (เช่น jekyll-theme-basically-basic )bundle exec rake preview และเปิดเบราว์เซอร์ของคุณไปที่ http://localhost:4000/example/ สิ่งนี้จะสตาร์ทเซิร์ฟเวอร์ Jekyll โดยใช้ไฟล์ของธีมและเนื้อหาของไดเร็กทอรี example/ เมื่อมีการแก้ไข ให้รีเฟรชเบราว์เซอร์ของคุณเพื่อดูการเปลี่ยนแปลง
พบการพิมพ์ผิดในเอกสารหรือไม่? สนใจที่จะเพิ่มฟีเจอร์หรือแก้ไขข้อบกพร่องหรือไม่? ถ้าอย่างนั้นก็ส่งประเด็นหรือลองส่งคำขอดึง หากนี่คือคำขอดึงครั้งแรกของคุณ การอ่าน GitHub Flow อาจเป็นประโยชน์
เมื่อส่งคำขอดึง:
master และตั้งชื่อที่มีความหมาย (เช่น my-awesome-new-feature ) และอธิบายคุณลักษณะหรือการแก้ไข หน้าตัวอย่างสามารถพบได้ในโฟลเดอร์ /docs และ /example หากคุณต้องการแก้ไขปัญหา "เรื่องไร้สาระ" เช่น การแก้ไขการพิมพ์ผิด ไวยากรณ์ที่ไม่ถูกต้อง ฯลฯ
ไมเคิล โรส
ใบอนุญาต MIT (MIT)
ลิขสิทธิ์ (c) 2017-2021 Michael Rose และผู้มีส่วนร่วม
อนุญาตให้บุคคลใดก็ตามที่ได้รับสำเนาของซอฟต์แวร์นี้และไฟล์เอกสารที่เกี่ยวข้อง ("ซอฟต์แวร์") อนุญาตโดยไม่เสียค่าใช้จ่าย เพื่อจัดการกับซอฟต์แวร์โดยไม่มีข้อจำกัด รวมถึงแต่ไม่จำกัดเพียงสิทธิ์ในการใช้ คัดลอก ปรับเปลี่ยน ผสาน เผยแพร่ แจกจ่าย ให้อนุญาตช่วง และ/หรือขายสำเนาของซอฟต์แวร์ และอนุญาตให้บุคคลที่ได้รับซอฟต์แวร์นี้สามารถทำได้ ภายใต้เงื่อนไขต่อไปนี้:
ประกาศเกี่ยวกับลิขสิทธิ์ข้างต้นและประกาศการอนุญาตนี้จะรวมอยู่ในสำเนาทั้งหมดหรือส่วนสำคัญของซอฟต์แวร์
ซอฟต์แวร์นี้มีให้ "ตามที่เป็น" โดยไม่มีการรับประกันใดๆ ทั้งโดยชัดแจ้งหรือโดยนัย ซึ่งรวมถึงแต่ไม่จำกัดเพียงการรับประกันความสามารถในการค้าขาย ความเหมาะสมสำหรับวัตถุประสงค์เฉพาะ และการไม่ละเมิด ไม่ว่าในกรณีใดผู้เขียนหรือผู้ถือลิขสิทธิ์จะต้องรับผิดต่อการเรียกร้องค่าเสียหายหรือความรับผิดอื่นใดไม่ว่าในการกระทำของสัญญาการละเมิดหรืออย่างอื่นที่เกิดขึ้นจากหรือเกี่ยวข้องกับซอฟต์แวร์หรือการใช้งานหรือข้อตกลงอื่น ๆ ใน ซอฟต์แวร์.
โดยพื้นฐานแล้ว Basic จะรวมไอคอนจาก The Noun Project ไอคอนเผยแพร่ภายใต้ Creative Commons Attribution 3.0 United States (CC BY 3.0 US)
โดยพื้นฐานแล้ว Basic จะรวมภาพถ่ายจาก Unsplash
โดยพื้นฐานแล้ว Basic จะรวมเอา Susy, ลิขสิทธิ์ (c) 2017, Miriam Eric Suzanne Susy ได้รับการเผยแพร่ภายใต้เงื่อนไขของสิทธิ์การใช้งาน "ใหม่" หรือ "แก้ไข" ของ BSD 3 ข้อ
โดยพื้นฐานแล้ว Basic จะรวมเบรกพอยต์ไว้ด้วย เบรกพอยต์ได้รับการเผยแพร่ภายใต้เงื่อนไขของใบอนุญาต MIT/GPL
