ดาวน์โหลด so simple theme - ดาวน์โหลดซอร์สโค้ด so simple theme

ธีม Jekyll ที่เรียบง่ายมาก

So Simple เป็นธีม Jekyll ที่เรียบง่ายสำหรับคำและรูปภาพของคุณ สร้างขึ้นเพื่อให้:

เค้าโครงที่หลากหลายพร้อมตัวพิมพ์ที่สะอาดตาและอ่านง่าย
มาร์กอัปไมโครฟอร์แมตเพื่อทำให้เครื่องสามารถอ่านและค้นพบเนื้อหาโพสต์ได้
Disqus ความคิดเห็นและการสนับสนุน Google Analytics
แนวทางปฏิบัติที่ดีที่สุดเกี่ยวกับ SEO ผ่านแท็ก Jekyll SEO
ตัวเลือกในการปรับแต่งธีมและทำให้เป็นของคุณเอง

ดูว่ามีอะไรใหม่ใน CHANGELOG เอกสาร v2

So Simple live preview

รูปแบบที่เรียบง่ายมาก

หน้าตัวอย่าง

คำอธิบาย
โพสต์ที่มีรูปภาพฮีโร่ขนาดใหญ่	ดูตัวอย่าง	แหล่งที่มา
โพสต์ที่มีองค์ประกอบ HTML ทั่วไปที่หลากหลายซึ่งแสดงให้เห็นว่าธีมจัดรูปแบบอย่างไร	ดูตัวอย่าง	แหล่งที่มา
โพสต์แสดงโค้ดที่ไฮไลต์	ดูตัวอย่าง	แหล่งที่มา
โพสต์ที่แสดงภาพที่มีการจัดแนวที่หลากหลาย	ดูตัวอย่าง	แหล่งที่มา
โพสต์ทั้งหมดจัดกลุ่มตามปี	ดูตัวอย่าง	แหล่งที่มา
โพสต์ทั้งหมดจัดกลุ่มตามหมวดหมู่	ดูตัวอย่าง	แหล่งที่มา
โพสต์ทั้งหมดจัดกลุ่มตามแท็ก	ดูตัวอย่าง	แหล่งที่มา
หน้าหมวดหมู่	ดูตัวอย่าง	แหล่งที่มา
รายการเอกสารในมุมมองกริด	ดูตัวอย่าง	แหล่งที่มา

สามารถดูโพสต์ตัวอย่างเพิ่มเติมได้บนเว็บไซต์สาธิต ไฟล์ต้นฉบับสำหรับสิ่งเหล่านี้ (และไซต์สาธิตทั้งหมด) สามารถพบได้ในโฟลเดอร์ /docs

การติดตั้ง

หากคุณใช้ Jekyll v3.5+ และโฮสต์เอง คุณสามารถติดตั้งธีมเป็น Ruby gem ได้อย่างรวดเร็ว หากคุณโฮสต์ด้วย GitHub Pages คุณสามารถติดตั้งเป็นธีมระยะไกลหรือคัดลอกไฟล์ธีมทั้งหมดได้โดยตรง (ดูโครงสร้างด้านล่าง) ลงในโปรเจ็กต์ของคุณ

วิธีอัญมณีทับทิม

เพิ่มบรรทัดนี้ลงใน Gemfile ของไซต์ Jekyll ของคุณ (หรือสร้างใหม่):
```
 gem "jekyll-theme-so-simple"
```
เพิ่มบรรทัดนี้ลงในไฟล์ _config.yml ของไซต์ Jekyll ของคุณ:
```
 theme : jekyll-theme-so-simple
```
จากนั้นรัน Bundler เพื่อติดตั้งธีมเจมและการขึ้นต่อกัน:
```
 bundle install
```

วิธีเพจ GitHub

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 หากไม่เป็นเช่นนั้น คุณสามารถบังคับให้สร้างใหม่ได้โดยการกดคอมมิตว่างไปที่ GitHub (ดูรายละเอียดเพิ่มเติมด้านล่าง)

หากคุณโฮสต์ไซต์ที่ใช้ Jekyll หลายแห่งภายใต้ชื่อผู้ใช้ GitHub เดียวกัน คุณจะต้องใช้หน้าโครงการแทนหน้าผู้ใช้ โดยพื้นฐานแล้ว คุณเปลี่ยนชื่อ repo เป็นอย่างอื่นที่ไม่ใช่ USERNAME.github.io และสร้างสาขา gh-pages จาก master สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการทำงาน โปรดดูเอกสารประกอบของ GitHub

ลบสิ่งที่ไม่จำเป็นออก

หากคุณแยกหรือดาวน์โหลด repo so-simple-theme คุณสามารถลบไฟล์และโฟลเดอร์ต่อไปนี้ได้อย่างปลอดภัย:

.github
docs
example
.editorconfig
.gitattributes
banner.js
CHANGELOG.md
Gemfile
jekyll-theme-so-simple.gemspec
package.json
Rakefile
README.md
README-OLD.md
screenshot.png

กำลังอัปเกรด

หากคุณใช้ Ruby 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

พลอยทับทิม

เพียงเรียกใช้ bundle update หากคุณใช้ Bundler (มี Gemfile ) หรือ gem update jekyll-theme-so-simple หากคุณไม่มี

ธีมระยะไกล

ตรวจสอบว่าคุณได้กำหนดเวอร์ชันล่าสุดใน _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/so-simple-theme.git

หากต้องการเพิ่ม คุณสามารถทำสิ่งต่อไปนี้:

 git remote add upstream https://github.com/mmistakes/so-simple-theme.git

ดึงการอัปเดตลง

ตอนนี้คุณสามารถดึงการคอมมิตใด ๆ ที่ทำกับสาขา master ของธีมด้วย:

 git pull upstream master

อาจมีข้อขัดแย้งในการผสาน ทั้งนี้ขึ้นอยู่กับจำนวนการปรับแต่งที่คุณทำหลังจากการฟอร์ก ทำงานกับไฟล์ที่ขัดแย้งกันโดยใช้แฟล็ก Git จัดเตรียมการเปลี่ยนแปลงที่คุณต้องการเก็บไว้ จากนั้นจึงคอมมิตการเปลี่ยนแปลงเหล่านั้น

อัปเดตไฟล์ด้วยตนเอง

อีกวิธีในการจัดการกับการอัปเดตคือการดาวน์โหลดธีม --- แทนที่เค้าโครง การรวม และเนื้อหาด้วยธีมที่ใหม่กว่าด้วยตนเอง เพื่อให้แน่ใจว่าคุณจะไม่พลาดการเปลี่ยนแปลงใดๆ ให้ตรวจสอบประวัติการคอมมิตของธีมเพื่อดูว่ามีอะไรเปลี่ยนแปลงไปบ้าง

ต่อไปนี้เป็นรายการตรวจสอบโดยย่อของโฟลเดอร์/ไฟล์สำคัญที่คุณต้องคำนึงถึง:

ชื่อ
`_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 และไฟล์ที่เกี่ยวข้องกับการพัฒนาบางไฟล์ในไดเรกทอรีรากของโครงการ

โปรดทราบ: หากคุณติดตั้ง So Simple ผ่าน Ruby Gem หรือวิธีธีมระยะไกล ไฟล์ธีมที่พบใน /_layouts , /_includes , /_sass และ /assets จะหายไปจากโปรเจ็กต์ของคุณ ซึ่งเป็นเรื่องปกติเนื่องจากจะรวมเข้ากับอัญมณี jekyll-theme-so-simple

 ├── _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.yml
index.md

หมายเหตุ: ศึกษาเอกสาร การแบ่งหน้าด้าน ล่างสำหรับคำแนะนำเกี่ยวกับวิธีการเปิดใช้งานบนหน้าแรก

เริ่มต้นจาก `jekyll new`

การใช้คำสั่ง jekyll new จะช่วยให้คุณเริ่มต้นและทำงานได้เร็วที่สุด

แก้ไขไฟล์ Gemfile และ _config.yml ของคุณโดยทำตามคำแนะนำการติดตั้งด้านบนและคำแนะนำการกำหนดค่าด้านล่าง จากนั้นสร้าง _data/text.yml ตามคำแนะนำก่อนหน้านี้

กำลังกำหนดค่า

การกำหนดค่าองค์ประกอบทั่วทั้งไซต์ ( locale , title , description , url , logo , author ฯลฯ) เกิดขึ้นใน _config.yml ของโปรเจ็กต์ของคุณ ดูการกำหนดค่าตัวอย่างใน repo นี้สำหรับการอ้างอิงเพิ่มเติม

ชื่อ	คำอธิบาย	ตัวอย่าง
`locale`	ภาษาหลักสำหรับไซต์	`"en-us"`
`title`	ชื่อของไซต์	`"My Awesome Site"`
`description`	คำอธิบายสั้น ๆ	`"This is my site, it is awesome."`
`baseurl`	ใช้เพื่อทดสอบเว็บไซต์ภายใต้ URL ฐานเดียวกันที่จะนำไปใช้งาน	`/my-base-path`
`url`	URL แบบเต็มไปยังเว็บไซต์ของคุณ	`"https://your-site.com"`
`logo`	เส้นทางไปยังโลโก้ทั่วทั้งไซต์ที่ใช้ในหน่วยโฆษณาด้านบน	`/images/your-logo.png`

สกินไซต์

มีสกินสามแบบ (ค่าเริ่มต้น สว่าง และมืด) เพื่อเปลี่ยนชุดสีของธีม

`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 เป็น repo ในพื้นที่ของคุณ
แทนที่และปรับแต่งตัวแปร Sass ตามที่คุณเห็นสมควร
อัพเดตพา skin ใน _config.yml เพื่ออ้างอิงไฟล์ . .css สกินใหม่นี้

สถานที่ของไซต์

site.locale ใช้เพื่อประกาศภาษาหลักสำหรับหน้าเว็บแต่ละหน้าภายในไซต์

ตัวอย่าง: locale: "en-US" ตั้งค่าแอตทริบิวต์ lang สำหรับไซต์เป็นภาษาอังกฤษแบบสหรัฐอเมริกา ในขณะที่ en-GB ใช้สำหรับรูปแบบภาษาอังกฤษแบบสหราชอาณาจักร รหัสประเทศเป็นทางเลือกและ locale: "en" ก็ยอมรับได้เช่นกัน หากต้องการค้นหารหัสภาษาและประเทศของคุณ โปรดตรวจสอบตารางอ้างอิงนี้

การตั้งค่าสถานที่อย่างเหมาะสมเป็นสิ่งสำคัญสำหรับการเชื่อมโยงข้อความที่แปลแล้วที่พบในไฟล์ข้อมูลข้อความ

หมายเหตุ: ธีมมีค่าเริ่มต้นเป็นข้อความเป็นภาษาอังกฤษ ( en , en-US , en-GB ) หากคุณเปลี่ยนภาษาใน _config.yml เป็นอย่างอื่น อย่าลืมเพิ่มคีย์ภาษาที่เกี่ยวข้องและข้อความที่แปลเป็น _data/text.yml

URL ของไซต์

ชื่อโฮสต์หลักและโปรโตคอลสำหรับเว็บไซต์ของคุณ หากคุณโฮสต์ด้วย GitHub Pages จะเป็นเช่น url: "https://github.io.mmistakes" หรือ url: "https://your-site.com" หากคุณมีชื่อโดเมนแบบกำหนดเอง

ขณะนี้ GitHub Pages บังคับใช้ https:// สำหรับไซต์ใหม่ ดังนั้นโปรดคำนึงถึงเรื่องนี้เมื่อตั้งค่า URL ของคุณเพื่อหลีกเลี่ยงคำเตือนเนื้อหาผสม

หมายเหตุ: Jekyll จะแทนที่ค่าของ url ด้วย http://localhost:4000 เมื่อรัน jekyll serve แบบโลคัลในการพัฒนา หากคุณต้องการหลีกเลี่ยงพฤติกรรมนี้ ให้ตั้งค่า JEKYLL_ENV=production เพื่อบังคับให้สภาพแวดล้อมใช้งานจริง

URL ฐานของไซต์

ตัวเลือกนี้ทำให้เกิดความสับสนในชุมชนเจคิลล์ หากคุณไม่ได้โฮสต์ไซต์ของคุณเป็นหน้าโครงการ GitHub หรือในโฟลเดอร์ย่อย (เช่น /blog ) ก็อย่าไปยุ่งกับมัน

ในกรณีของไซต์สาธิต So Simple จะโฮสต์บน GitHub ที่ https://mmistakes.github.io/so-simple-theme หากต้องการตั้งค่าเส้นทางฐานนี้อย่างถูกต้อง ฉันจะใช้ url: "https://mmistakes.github.io" และ baseurl: "/so-simple-theme"

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการใช้ site.url และ site.baseurl อย่างถูกต้องตามที่ผู้ดูแล Jekyll ตั้งใจไว้ โปรดตรวจสอบโพสต์ของ Parker Moore ในหัวข้อนี้

หมายเหตุ: เมื่อใช้ baseurl อย่าลืมรวมไว้เป็นส่วนหนึ่งของลิงก์และเส้นทางเนื้อหาในเนื้อหาของคุณ ค่าของ url: และ baseurl: "/blog" จะทำให้ไซต์ท้องถิ่นของคุณมองเห็นได้ที่ http://localhost:4000/blog ไม่ใช่ http://localhost:4000 คุณสามารถเติมเนื้อหาทั้งหมดและเส้นทางลิงก์ภายในด้วย {{ site.baseurl }} หรือใช้ Jekyll's relative_url

หากต้องการใช้ค่าตัวอย่างเหนือเส้นทางรูปภาพต่อไปนี้ของ {{ '/images/my-image.jpg' | relative_url }} จะส่งออกอย่างถูกต้องเป็น http://localhost:4000/blog/images/my-image.jpg

หากไม่มีตัวกรอง relative_url เส้นทางเนื้อหาจะหายไป /blog และคุณจะมีรูปภาพที่เสียหายบนหน้าเว็บของคุณ

รูปแบบวันที่

คุณสามารถเปลี่ยนรูปแบบวันที่เริ่มต้นได้โดยระบุ date_format ใน _config.yml ยอมรับรูปแบบวันที่ Liquid มาตรฐานใดๆ

ตัวอย่างเช่น ค่าเริ่มต้นของ "%B %-d, %Y" สามารถเปลี่ยนแปลงได้ดังนี้:

 date_format : " %Y-%m-%d "

เวลาอ่านหนังสือ

เปิดใช้งานตัวอย่างเวลาการอ่านโดยประมาณทั่วทั้งไซต์ด้วย read_time: true 200 ได้รับการตั้งค่าเป็นค่าเริ่มต้นของคำต่อนาที ซึ่งสามารถเปลี่ยนแปลงได้ผ่าน words_per_minute ในไฟล์ _config.yml ของคุณ

 read_time : true
words_per_minute : 200

คณิตศาสตร์

เปิดใช้งาน MathJax (เครื่องมือแสดงผล JavaScript สำหรับคณิตศาสตร์) ทั่วทั้งไซต์ด้วย

 mathjax :
  enable : true

ตัวเลือก combo ให้คุณเลือกชุดค่าผสมของคอมโพเนนต์ MathJax โดยค่าเริ่มต้นคือ "tex-svg" และตัวเลือก tags ช่วยให้คุณควบคุมการกำหนดหมายเลขสมการได้ โดยตัวเลือกคือ "ams" (ค่าเริ่มต้น) "ทั้งหมด" และ "ไม่มี"

การกำหนดค่าตัวอย่าง:

 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"

Google แบบอักษร

ใช้ Google Fonts ทั่วทั้งไซต์ของคุณได้อย่างง่ายดายโดยเปลี่ยน name แบบอักษรและ weights ตามลำดับ การจับคู่แบบอักษรที่แนะนำมีดังนี้:

 google_fonts :
  - name : " Source Sans Pro "
    weights : " 400,400i,700,700i "
  - name : " Lora "
    weights : " 400,400i,700,700i "

หมายเหตุ: หากใช้ตระกูลแบบอักษรอื่นๆ อย่าลืมเพิ่ม จากนั้นแทนที่ตัวแปร SCSS ต่อไปนี้ใน /assets/css/main.scss ด้วยค่า font-family ที่ Google จัดเตรียมไว้ให้

 $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 ;

ดูเอกสารประกอบสไตล์ชีตด้านล่างสำหรับข้อมูลเพิ่มเติมเกี่ยวกับการแทนที่ตัวแปรเริ่มต้นของธีม

การแบ่งหน้า

แบ่งรายการหลักของโพสต์ในหน้าแรกออกเป็นหลายๆ หน้าโดยเปิดใช้งานการแบ่งหน้า

รวมปลั๊กอิน jekyll-paginate ไว้ใน Gemfile ของคุณ
```
 group :jekyll_plugins do
  gem "jekyll-paginate"
end
```
เพิ่ม jekyll-paginate ให้กับอาร์เรย์ plugins (ก่อนหน้านี้ gems ) ในไฟล์ _config.yml ของคุณและการตั้งค่าการแบ่งหน้าต่อไปนี้:
```
 paginate : 10  # amount of posts to show per page
paginate_path : /page:num/
```
สร้าง index.html (หรือเปลี่ยนชื่อ index.md ) ในรูทของโปรเจ็กต์ของคุณ และเพิ่มส่วนหน้าต่อไปนี้:
```
 layout : home
paginate : true
```

ค้นหา

หากต้องการจัดทำดัชนีเนื้อหาทั้งหมดของเอกสารของคุณเพื่อใช้ในหน้าการค้นหา ให้ตั้งค่า search_full_content เป็น true ใน _config.yml :

 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 ให้เพิ่มชื่อย่อ Disqus ของคุณลงในไฟล์ _config.yml ของโปรเจ็กต์ของคุณ:

 disqus :
  shortname : my_disqus_shortname

ความคิดเห็นจะปรากฏในการใช้งานจริงเมื่อสร้างด้วยค่าสภาพแวดล้อมต่อไปนี้เท่านั้น: JEKYLL_ENV=production เพื่อหลีกเลี่ยงไม่ให้บัญชี Disqus ของคุณเสียหายด้วยเนื้อหา localhost

หากคุณไม่ต้องการแสดงความคิดเห็นสำหรับโพสต์ใดโพสต์หนึ่ง คุณสามารถปิดการใช้งานได้โดยเพิ่ม comments: false ไว้ที่ส่วนหน้าของโพสต์นั้น

Google Analytics

หากต้องการเปิดใช้งาน 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 Cards และภาพขนาดย่อของฟีดไซต์หากเปิดใช้งาน ขนาดภาพที่แนะนำ
`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/) "

หมายเหตุ: ส่วนหน้า image.feature เลิกใช้แล้ว เพื่อรองรับ jekyll-seo-tag อย่างสมบูรณ์ หากคุณไม่ได้ใช้ 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 พิกเซล

ลิงค์ผู้เขียน

หากต้องการกำหนดลิงก์ที่จะปรากฏในแถบด้านข้างของผู้เขียน ให้ใช้คีย์ authors.links ใน _config.yml หรือ /_data/authors.yml

ชื่อ	คำอธิบาย
`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 : false

`layout: page`

เลย์เอาต์นี้ดูและทำหน้าที่ layout: post โดยมีความแตกต่างดังต่อไปนี้

แถบด้านข้างของผู้เขียนและเมตาของหน้า (วันที่เผยแพร่ หมวดหมู่ และแท็ก) จะถูกละไว้
หน้ากว้างน้อยลงเนื่องจากไม่ได้แสดงแถบด้านข้าง
ความคิดเห็น Disqus จะถูกละเว้น
ละเว้นลิงก์การนำทางของโพสต์ถัดไป/ก่อนหน้า

เค้าโครงหน้าเป็นฐานสำหรับเค้าโครงอื่นๆ หลายประการ เช่น 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

`layout: categories`

เลย์เอาต์นี้แสดงโพสต์ทุกหมวดหมู่ที่จัดกลุ่ม รองรับเรื่องด้านหน้าเช่นเดียวกับ layout: page

`layout: tags`

เค้าโครงนี้แสดงโพสต์ทั้งหมดจัดกลุ่มตามแท็ก รองรับเรื่องด้านหน้าเช่นเดียวกับ layout: page

`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

หากต้องการสร้างเพจที่แสดงโพสต์ทั้งหมดที่กำหนดให้กับหมวดหมู่ foo คุณจะต้องสร้าง foo.md ในรูทของโปรเจ็กต์ของคุณและเพิ่มส่วนหน้านี้:

 title : Foo
layout : category
permalink : /categories/foo/
taxonomy : foo

`layout: tag`

เลย์เอาต์นี้แสดงโพสต์ทั้งหมดที่จัดกลุ่มตามแท็กเฉพาะ รองรับส่วนหน้าเดียวกันกับ layout: page โดยมีสิ่งต่อไปนี้เพิ่มเติม:

 taxonomy : # tag name
entries_layout : # list (default), grid

หากต้องการสร้างเพจที่แสดงโพสต์ทั้งหมดที่กำหนดให้กับ tag foo bar คุณจะต้องสร้าง foo-bar.md ในรูทของโปรเจ็กต์ของคุณ และเพิ่มส่วนหน้านี้:

 title : Foo Bar
layout : tag
permalink : /tags/foo-bar/
taxonomy : foo bar

`layout: search`

เค้าโครงนี้แสดงแบบฟอร์มการค้นหาและแสดงหน้าที่เกี่ยวข้องตามคำค้นหา

ดัชนีเนื้อหาของหน้า: title , excerpt , content (เมื่อเปิดใช้งาน), categories , tags และ url

หากคุณต้องการแยกหน้า/โพสต์บางหน้าออกจากดัชนีการค้นหา ให้ตั้งค่าสถานะการค้นหาเป็น false ในส่วนหน้า

 search : false

หากต้องการจัดทำดัชนีเนื้อหาทั้งหมดของเอกสารของคุณ ให้ตั้ง search_full_content เป็น true ใน _config.yml :

 search_full_content : true

รูปภาพ

ขนาดภาพที่แนะนำเป็นพิกเซลมีดังนี้:

ภาพ	คำอธิบาย	ขนาด
`site.logo`	โลโก้ทั่วทั้งไซต์ที่ใช้ในหน่วยโฆษณาด้านบน	`200 x 200`
`page.image.path`	รูปภาพเอกสารขนาดใหญ่เต็มความกว้าง	รูปภาพสูงจะดันเนื้อหาลงมาที่หน้า `1600 x 600` เป็นขนาดพื้นกลางที่ดีที่ต้องการ
`page.image`	ตัวย่อของ `page.image.path` เมื่อใช้เพียงอย่างเดียว (ไม่มี `thumbnail` `caption` หรือตัวแปรอื่นๆ)	เหมือนกับ `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/

หมายเหตุ: ชื่อที่ยาวหรือลิงก์จำนวนมากอาจทำให้แถบนำทางแบ่งออกเป็นหลายบรรทัด โดยเฉพาะบนหน้าจอขนาดเล็ก โปรดคำนึงถึงสิ่งนี้ในขณะที่คุณพัฒนาการนำทางหลักของไซต์ของคุณ

ผู้เขียน

ข้อมูลผู้เขียนจะถูกใช้เป็นข้อมูลเมตาสำหรับโพสต์ "ตามบรรทัด" และเผยแพร่ฟิลด์ creator ของการ์ดสรุป Twitter โดยมีเนื้อหาส่วนหน้าต่อไปนี้ใน _config.yml :

 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 ของคุณเช่นนั้น (อนุญาตให้ใช้ Markdown):

 copyright : " This site is made with <3 by *me, myself, and I*. "

ผู้ช่วยเหลือ

คุณสามารถนึกถึงผู้ช่วย Jekyll เหล่านี้เป็นรหัสย่อได้ เนื่องจาก GitHub Pages ไม่อนุญาตให้ใช้ปลั๊กอินส่วนใหญ่ --- แท็กที่กำหนดเองไม่สามารถใช้งานได้ แทนที่จะใช้ประโยชน์จากธีม รวมถึง การทำสิ่งที่คล้ายกัน

ฝังแบบตอบสนอง

ฝังวิดีโอจาก YouTube/Vimeo หรือเนื้อหา iframe อื่น ๆ ที่ปรับขนาดให้พอดีกับความกว้างของเนื้อหาหลัก

พารามิเตอร์	ที่จำเป็น	คำอธิบาย
`url`	ใช่	URL ของวิดีโอหรือ iframe เช่น `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 %}

คู่มือการโยกย้าย

So Simple 3 เป็นการเขียนธีมใหม่ทั้งหมด การเปลี่ยนแปลงที่โดดเด่นที่สุดสรุปได้ด้านล่างนี้ ตามด้วยการเปลี่ยนแปลงที่เฉพาะเจาะจงมากขึ้น

พูดได้อย่างปลอดภัยว่าคุณอาจต้องการทิ้งไฟล์ _layouts , _includes , _sass , .css และ .js ทั้งหมดจาก v2 และใช้ตัวเลือกการติดตั้ง Ruby gem หรือธีมระยะไกล

การเปลี่ยนแปลงระดับโลก

"วิธีการแยก" เลิกใช้แล้วเพื่อสนับสนุนการติดตั้ง/อัปเกรดธีมผ่านอัญมณีหรือธีมระยะไกล
_layouts , _includes , _sass และ JavaScript ทั้งหมดได้ถูกสร้างขึ้นใหม่แล้ว
ใช้ site.url และ site.baseurl อย่างเหมาะสมโดยใช้ประโยชน์จากตัวกรอง relative_url และ absolute_url
แทนที่แบบกำหนดเอง /_includes/open-graph.html ด้วย jekyll-seo-tag
ควบคุมลิงก์และไอคอนที่ใช้ในแถบด้านข้างและส่วนท้ายของผู้เขียนได้อย่างสมบูรณ์
แท็ก บทความ และหน้าเริ่มต้นบล็อกถูกแทนที่ด้วยรูปแบบใหม่ ( tags และ posts ) เพื่อให้ใช้งานได้ง่ายขึ้น
ลบหน้า 404.md แล้ว
แทนที่ไฟล์ฟีด atom.xml แบบกำหนดเองด้วย jekyll-feed
ลบไฟล์เริ่มต้น favicon.ico และ favicon.png
แทนที่การค้นหา JSON แบบธรรมดาด้วย Lunr
แทนที่ Magnific Popup ด้วย Lity
ลบ FitVids.JS แล้ว

รองรับเบราว์เซอร์

CSS เขียนขึ้นโดยคำนึงถึงเบราว์เซอร์สมัยใหม่ ในกรณีที่เป็นไปได้ มีการใช้ทางเลือกสำรองสำหรับเค้าโครงแบบ float เพื่อให้สิ่งต่าง ๆ ดูไม่ เสียหายเกินไป ในเบราว์เซอร์ที่ไม่รองรับ display: grid และ flexbox

การเปลี่ยนแปลงการกำหนดค่า

การเปลี่ยนแปลงสถานที่

รูปแบบเปลี่ยนจาก en_US (พร้อมขีดล่าง) เป็น en-US พร้อมเครื่องหมายยัติภังค์

การเปลี่ยนแปลงเจ้าของ

site.owner ตอนนี้เป็น site.author เพื่อสนับสนุน jekyll-seo-tag และ jekyll-feed ได้ดียิ่งขึ้น

เวอร์ชัน 2	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

การเปลี่ยนแปลงของ Google Analytics

ตอนนี้ 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 ได้ดียิ่งขึ้น เช่น jekyll-seo-tag, jekyll-feed และ jekyll-sitemap คีย์ image ส่วนใหญ่จึงถูกเปลี่ยนชื่อ ปรับส่วนหน้าในโพสต์และเพจทั้งหมดของคุณให้เหมาะสม

เวอร์ชัน 2	v3
`image.feature`	`image.path`
`image.thumb`	`image.thumbnail`
`image.credit`	`image.caption` (อนุญาตให้ใช้ Markdown)
`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) "

การเปลี่ยนแปลงการพัฒนา

แทนที่งาน Grunt ด้วยสคริปต์ npm

ทีละขั้นตอน

ขั้นตอนคร่าวๆ ในการย้ายหุ้น So Simple v2 fork (โดยไม่มีการเปลี่ยนแปลง) ไปเป็นเวอร์ชันล่าสุด

ลบ _includes/ , _layouts/ , _sass/ , jshintrc , Gruntfile.js และ search.json
แก้ไข Gemfile สำหรับวิธีการติดตั้ง Ruby gem หรือ GitHub Pages แล้วทำตามคำแนะนำเหล่านั้น

เพิ่ม Google Fonts ต่อไปนี้ใน _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 เพื่อเปิดใช้งานลิงก์แท็กในแถบด้านข้างของโพสต์เมตา
เปลี่ยนชื่อ avatar เป็น picture ใน _data/authors.yml (และในส่วนหน้าของโพสต์/เพจ) และแก้ไขเส้นทางที่สอดคล้องกับการเปลี่ยนแปลงเส้นทางรูปภาพด้านบน

การปรับแต่ง

เมื่อติดตั้งเป็น Ruby gem หรือ ธีมระยะไกล ไฟล์ธีมหลัก ( _layouts , _includes , _sass , assets ฯลฯ) จะหายไปจากโปรเจ็กต์ของคุณ

โครงสร้างเริ่มต้น สไตล์ และสคริปต์ของธีมนี้สามารถแทนที่และปรับแต่งได้สองวิธีต่อไปนี้:

การเอาชนะการรวมและเค้าโครง

ไฟล์ธีมสามารถแทนที่ได้โดยการวางไฟล์ที่มีชื่อเดียวกันลงในไดเร็กทอรี _includes หรือ _layouts ของโปรเจ็กต์ของคุณ ตัวอย่างเช่น:

หากต้องการเพิ่มปุ่มแชร์ทางสังคมอื่นให้กับ _includes/social-share.html ให้สร้างไดเร็กทอรี _includes ในโปรเจ็กต์ของคุณ คัดลอก _includes/social-share.html จากโฟลเดอร์ gem ของ So Simple ไปยัง <your_project>/_includes และแก้ไขไฟล์นั้น

เคล็ดลับมืออาชีพ: เพื่อค้นหาไฟล์ของธีมบนคอมพิวเตอร์ของคุณ ให้รัน bundle show jekyll-theme-so-simple ซึ่งจะส่งคืนตำแหน่งของไฟล์ธีมแบบ gem

ธีมนี้มาพร้อมกับไฟล์สองไฟล์เพื่อช่วยแทรกมาร์กอัปและเนื้อหาที่กำหนดเองลงในตำแหน่งที่กำหนดไว้ล่วงหน้า

	คำอธิบาย
`_includes/head-custom.html`	แทรกอยู่ภายในองค์ประกอบ `<head>` เพื่อเพิ่มข้อมูลเมตา ไอคอน Fav ฯลฯ
`_includes/footer-custom.html`	แทรกอยู่ภายในองค์ประกอบ `<footer>` ก่อนสคริปต์ไซต์และข้อมูลลิขสิทธิ์

การปรับแต่ง Sass (SCSS)

หากต้องการแทนที่ Sass เริ่มต้น (อยู่ในไดเร็กทอรี _sass ของธีม) ให้ทำอย่างใดอย่างหนึ่งต่อไปนี้:

คัดลอกโดยตรงจากอัญมณี So Simple
- ไปที่ไดเร็กทอรีการติดตั้ง So Simple gem ในพื้นที่ของคุณ (รันบัน bundle show jekyll-theme-so-simple เพื่อรับพาธไป)
- คัดลอกเนื้อหาของ /assets/css/main.scss จากตรงนั้นไปที่ <your_project>
- ปรับแต่งสิ่งที่คุณต้องการภายใน <your_project>/assets/css/main.scss
คัดลอกจาก repo นี้
- คัดลอกเนื้อหาของ Assets/css/main.scss ไปที่ <your_project>
- ปรับแต่งสิ่งที่คุณต้องการภายใน <your_project/assets/css/main.scss

หมายเหตุ: หากต้องการปรับแต่ง Sass บางส่วนจริงที่รวมอยู่ใน gem คุณจะต้องคัดลอกเนื้อหาทั้งหมดของไดเร็กทอรี _sass ไปที่ <your_project> เนื่องจากวิธีที่ Jekyll นำเข้าไฟล์เหล่านี้ในปัจจุบัน จึงมีทั้งหมดหรือไม่มีเลย การเอาชนะ Sass บางส่วน (หรือสอง) จะไม่ทำงานเหมือน _includes และ _layouts

หากต้องการปรับแต่งสไตล์พื้นฐานของธีม คุณสามารถแทนที่ตัวแปร Sass ได้โดยเพิ่มลงใน <your_project>/assets/css/main.scss ตัวอย่างเช่น หากต้องการเปลี่ยนสีเน้นเสียงที่ใช้ทั่วทั้งธีม ให้เพิ่มสิ่งต่อไปนี้ก่อนบรรทัด @import ทั้งหมด:

 $accent-color : tomato ;

การปรับแต่งจาวาสคริปต์

หากต้องการแทนที่ JavaScript ดีฟอลต์ที่รวมอยู่ในธีม ให้ทำอย่างใดอย่างหนึ่งต่อไปนี้:

คัดลอกโดยตรงจากอัญมณี So Simple
- ไปที่ไดเร็กทอรีการติดตั้ง So Simple gem ในพื้นที่ของคุณ (รันบัน bundle show jekyll-theme-so-simple เพื่อรับพาธไป)
- คัดลอกเนื้อหาของ /assets/js/main.js จากตรงนั้นไปที่ <your_project>
- ปรับแต่งสิ่งที่คุณต้องการภายใน <your_project>/assets/js/main.js
คัดลอกจาก repo นี้
- คัดลอกเนื้อหาของ /assets/js/main.js ไปยัง <your_project>
- ปรับแต่งสิ่งที่คุณต้องการภายใน <your_project>/assets/js/main.js

ไฟล์ /assets/js/main.min.js ของธีมสร้างขึ้นจากปลั๊กอิน jQuery และสคริปต์อื่นๆ ที่พบใน /assets/js/

 ├── 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/ และต้องการให้สคริปต์เชื่อมต่อกับสคริปต์อื่นๆ อย่าลืมอัปเดตสคริปต์ uglify ใน package.json เช่นเดียวกับสคริปต์ที่คุณลบ

คุณยังสามารถเพิ่มสคริปต์ให้กับองค์ประกอบ <head> หรือปิด </body> ได้โดยการเพิ่มเส้นทางไปยังอาร์เรย์ต่อไปนี้ใน _config.yml

ตัวอย่าง:

 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 พร้อมเวอร์ชัน JS สำหรับการยึดถือ ตำแหน่งที่โดดเด่นไอคอนเหล่านี้ปรากฏอยู่ในแถบด้านข้างของผู้เขียนและลิงก์ส่วนท้าย

การพัฒนา

หากต้องการตั้งค่าสภาพแวดล้อมของคุณเพื่อพัฒนาธีมนี้:

โคลนที่เก็บนี้
cd เข้าไปใน /example และรัน bundle install .

หากต้องการทดสอบธีมในเครื่องเมื่อคุณทำการเปลี่ยนแปลง:

cd ลงในโฟลเดอร์รูทของ repo (เช่น jekyll-theme-so-simple )
รัน bundle exec rake preview และเปิดเบราว์เซอร์ของคุณไปที่ http://localhost:4000/example/

สิ่งนี้จะสตาร์ทเซิร์ฟเวอร์ Jekyll โดยใช้ไฟล์ของธีมและเนื้อหาของไดเร็กทอรี example/ เมื่อมีการแก้ไข ให้รีเฟรชเบราว์เซอร์ของคุณเพื่อดูการเปลี่ยนแปลง

สคริปต์สร้าง JavaScript

ในความพยายามที่จะลดการพึ่งพาชุดสคริปต์ npm จะถูกใช้เพื่อสร้าง main.min.js แทนที่จะเป็นตัวรันงานเช่น Gulp หรือ Grunt หากเครื่องมือเหล่านั้นมีสไตล์ของคุณมากกว่าก็ให้ใช้มันแทน

ในการเริ่มต้น:

ติดตั้ง Node.js
cd ไปที่รูทของโปรเจ็กต์ของคุณ
ติดตั้งการขึ้นต่อกันทั้งหมดโดยการรันการติดตั้ง npm

หมายเหตุ: หากคุณอัปเกรดจากธีมเวอร์ชันก่อนหน้า ตรวจสอบให้แน่ใจว่าคุณได้คัดลอกผ่าน package.json ก่อนที่จะรัน npm install คุณอาจต้องลบไดเร็กทอรี node_modules ของคุณด้วย

หากทุกอย่างเป็นไปด้วยดี การรัน npm run build:js จะบีบอัด/เชื่อม main.js และสคริปต์ปลั๊กอินทั้งหมดลงใน /assets/js/main.min.js

มีส่วนร่วม

พบการพิมพ์ผิดในเอกสารหรือไม่? ต้องการคุณสมบัติหรือการแก้ไขข้อบกพร่อง? ค้นหาปัญหาที่เปิดและปิดก่อนที่จะส่งปัญหาเพื่อหลีกเลี่ยงความซ้ำซ้อน

คำขอดึงก็ได้รับการชื่นชมเช่นกัน หากนี่เป็นครั้งแรกของคุณ การอ่าน GitHub Flow อาจเป็นประโยชน์

หากการสนับสนุนของคุณเพิ่มหรือเปลี่ยนแปลงลักษณะการทำงานของธีม ตรวจสอบให้แน่ใจว่าได้อัปเดตเอกสารประกอบและ/หรือเนื้อหาตัวอย่าง เอกสารประกอบอยู่ใน README.md ในขณะที่โพสต์ เพจ และคอลเลกชันตัวอย่างอยู่ใน docs และโฟลเดอร์ example

ดึงคำขอ

เมื่อส่งคำขอดึง:

โคลน repo
สร้างสาขาจาก master และตั้งชื่อที่มีความหมาย (เช่น my-awesome-new-feature )
เปิดคำขอดึงบน GitHub และอธิบายว่าปัญหาใดที่แก้ไขได้

เครดิต

ผู้สร้าง

ไมเคิล โรส

https://mademistakes.com
https://twitter.com/mmistakes
https://github.com/mmistakes

ไอคอน + รูปภาพสาธิต:

แบบอักษรที่ยอดเยี่ยม
เรากราฟิกส์
Unsplash

อื่น:

เจคิลล์
เบรกพอยต์
jQuery
jQuery สมูทเลื่อน
ลิตี้
ลุนร

ใบอนุญาต

ใบอนุญาต MIT (MIT)

อนุญาตให้บุคคลใดก็ตามที่ได้รับสำเนาของซอฟต์แวร์นี้และไฟล์เอกสารที่เกี่ยวข้อง ("ซอฟต์แวร์") อนุญาตโดยไม่เสียค่าใช้จ่าย เพื่อจัดการกับซอฟต์แวร์โดยไม่มีข้อจำกัด รวมถึงแต่ไม่จำกัดเพียงสิทธิ์ในการใช้ คัดลอก ปรับเปลี่ยน ผสาน เผยแพร่ แจกจ่าย ให้อนุญาตช่วง และ/หรือขายสำเนาของซอฟต์แวร์ และอนุญาตให้บุคคลที่ได้รับซอฟต์แวร์นี้สามารถทำได้ ภายใต้เงื่อนไขต่อไปนี้:

ประกาศเกี่ยวกับลิขสิทธิ์ข้างต้นและประกาศการอนุญาตนี้จะรวมอยู่ในสำเนาทั้งหมดหรือส่วนสำคัญของซอฟต์แวร์

ซอฟต์แวร์นี้มีให้ "ตามที่เป็น" โดยไม่มีการรับประกันใดๆ ทั้งโดยชัดแจ้งหรือโดยนัย ซึ่งรวมถึงแต่ไม่จำกัดเพียงการรับประกันความสามารถในการค้าขาย ความเหมาะสมสำหรับวัตถุประสงค์เฉพาะ และการไม่ละเมิด ไม่ว่าในกรณีใดผู้เขียนหรือผู้ถือลิขสิทธิ์จะต้องรับผิดต่อการเรียกร้องค่าเสียหายหรือความรับผิดอื่นใดไม่ว่าในการกระทำของสัญญาการละเมิดหรืออย่างอื่นที่เกิดขึ้นจากหรือเกี่ยวข้องกับซอฟต์แวร์หรือการใช้งานหรือข้อตกลงอื่น ๆ ใน ซอฟต์แวร์.

So Simple รวมภาพถ่ายจาก Unsplash

So Simple รวมภาพถ่ายจาก WeGraphics

So Simple รวมเบรกพอยต์ไว้ด้วย เบรกพอยต์กระจายภายใต้ข้อกำหนดของใบอนุญาต MIT/GPL

ขยาย

so simple theme

ธีม Jekyll ที่เรียบง่ายมาก

หน้าตัวอย่าง

การติดตั้ง

วิธีอัญมณีทับทิม

วิธีเพจ GitHub

ลบสิ่งที่ไม่จำเป็นออก

กำลังอัปเกรด

พลอยทับทิม

ธีมระยะไกล

ใช้คอมไพล์

ดึงการอัปเดตลง

อัปเดตไฟล์ด้วยตนเอง

โครงสร้าง

เริ่มต้นใหม่

เริ่มต้นจาก jekyll new

กำลังกำหนดค่า

สกินไซต์

สถานที่ของไซต์

URL ของไซต์

URL ฐานของไซต์

รูปแบบวันที่

เวลาอ่านหนังสือ

คณิตศาสตร์

Google แบบอักษร

การแบ่งหน้า

ค้นหา

หน้าอนุกรมวิธาน

ความคิดเห็น (ผ่าน Disqus)

Google Analytics

อื่น

เค้าโครง

layout: default

layout: post

ลิงค์ผู้เขียน

layout: page

layout: home

layout: posts

layout: categories

layout: tags

layout: collection

layout: category

layout: tag

layout: search

รูปภาพ

ข้อความธีม

การนำทาง

ผู้เขียน

ส่วนท้าย

ลิงค์ส่วนท้าย

ข้อความลิขสิทธิ์

ผู้ช่วยเหลือ

ฝังแบบตอบสนอง

สารบัญ

คู่มือการโยกย้าย

การเปลี่ยนแปลงระดับโลก

รองรับเบราว์เซอร์

การเปลี่ยนแปลงการกำหนดค่า

การเปลี่ยนแปลงสถานที่

การเปลี่ยนแปลงเจ้าของ

การเปลี่ยนแปลงของ Google Analytics

ยกเลิกการเปลี่ยนแปลงความคิดเห็น

ค้นหาการเปลี่ยนแปลง

การเปลี่ยนแปลงรูปภาพ

การเปลี่ยนแปลงการพัฒนา

ทีละขั้นตอน

การปรับแต่ง

การเอาชนะการรวมและเค้าโครง

การปรับแต่ง Sass (SCSS)

การปรับแต่งจาวาสคริปต์

ไอคอนแบบอักษรที่ยอดเยี่ยม

การพัฒนา

สคริปต์สร้าง JavaScript

มีส่วนร่วม

ดึงคำขอ

เครดิต

ผู้สร้าง

ไอคอน + รูปภาพสาธิต:

อื่น:

ใบอนุญาต

เริ่มต้นจาก `jekyll new`

`layout: default`

`layout: post`

`layout: page`

`layout: home`

`layout: posts`

`layout: categories`

`layout: tags`

`layout: collection`

`layout: category`

`layout: tag`

`layout: search`