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

jekyll theme consulting

หมวดหมู่อื่นๆ

1.0.0

ดาวน์โหลด

การให้คำปรึกษา - ธีม Jekyll

เทมเพลต jekyll ที่เงียบขรึม ไร้ความยุ่งยากสำหรับธุรกิจ

คุณสามารถดูตัวอย่างธีมได้ที่นี่

Consulting Theme

คุณสมบัติ

ตอบสนอง : รองรับทันทีเมื่อแกะกล่องสำหรับหน้าจอทุกขนาด ไม่ว่าจะเป็นสมาร์ทโฟน แล็ปท็อป แท็บเล็ต...

หลายภาษา : จัดการเพจ เมนู URL วันที่ แผนผังเว็บไซต์ในหลายภาษาได้อย่างง่ายดาย

ปรับแต่งได้ : สีของธีม, เมนู, รายการโซเชียลสามารถเปลี่ยนได้จากไฟล์ปรับแต่งส่วนกลาง

วิดเจ็ตจำนวนมาก : แท็บ มินิโพสต์ สปอตไลท์ รายการคุณสมบัติ และอื่นๆ สามารถแทรกได้อย่างง่ายดายโดยไม่ต้องกังวลกับภายใน

เทมเพลตจำนวนมาก : แบบฟอร์มการติดต่อ เมนูการนำทาง และอื่น ๆ สามารถแทรกได้อย่างง่ายดายด้วย Jekyll แบบกำหนดเอง

ภาพเวกเตอร์ : ภาพธีมเป็นแบบเวกเตอร์ แสดงผลได้อย่างราบรื่นบนจอแสดงผลใดๆ และสามารถจัดสไตล์แบบไดนามิกได้

พร้อม GDPR : มาพร้อมกับปลั๊กอินยินยอมคุกกี้และนโยบายความเป็นส่วนตัวสำเร็จรูปที่สอดคล้องกับ GDPR

พร้อมทำ SEO : แผนผังเว็บไซต์, robots.txt และแท็กจะถูกสร้างขึ้นสำหรับเว็บไซต์โดยอัตโนมัติ

Light : ภาพ svg, นิ้วหัวแม่มือ และการโหลดแบบ Lazy Loading สำหรับภาพแรสเตอร์, ห้องสมุดไม่กี่แห่ง

ประสิทธิภาพ : การโหลดแบบขนานและการดำเนินการของสินทรัพย์ รองรับการโหลดแบบ Lazy Loading สินทรัพย์แบบย่อขนาด เส้นทางวิกฤตที่ถูกบีบอัด

แข็งตัว : การตรวจสอบแบบฟอร์ม, recaptcha, ไลบรารีที่ตรวจสอบแล้ว

การติดตั้ง

เพิ่มบรรทัดนี้ลงใน Gemfile ของไซต์ Jekyll ของคุณ:

 gem "jekyll-theme-consulting"

และเพิ่มบรรทัดนี้ลงใน _config.yml ของไซต์ Jekyll ของคุณ:

 theme : jekyll-theme-consulting

แล้วดำเนินการ:

 $ bundle

หรือติดตั้งด้วยตัวเองเป็น:

 $ gem install jekyll-theme-consulting

การใช้งาน

สำหรับผู้ที่ไม่คุ้นเคยกับวิธีการทำงานของ Jekyll ลองดูที่ jekyllrb.com เพื่อดูรายละเอียดทั้งหมด หรืออ่านเฉพาะข้อมูลเบื้องต้น การเขียนโพสต์ และการสร้างเพจ

การเริ่มต้น

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

การกำหนดค่า

คุณสามารถใช้พารามิเตอร์ที่กำหนดเองต่อไปนี้ใน _config.yml

เว็บไซต์

ทั้ง title และ subtitle จะแสดงเคียงข้างกัน :

ในชื่อแท็บ
ที่ด้านบนของหน้าในส่วนหัว

ทางสังคม

ไอคอนโซเชียลจะปรากฏขึ้นสำหรับแต่ละ URL ที่คุณกรอก ท่ามกลาง facebook_url ฯลฯ

ติดต่อ

ข้อมูลติดต่อของคุณสามารถนำมาใช้ในแบบฟอร์มการติดต่อ ส่วนท้าย หรือที่อื่นๆ ได้

รีแคปชา

แบบฟอร์มการติดต่อได้รับการตรวจสอบโดยใช้ปลั๊กอิน recaptcha ของ Google ขั้นแรก คุณต้อง [ลงทะเบียนเว็บไซต์ของคุณ] เพื่อเปิดใช้งานปลั๊กอิน Google จะให้ คีย์การรวมฝั่งไคลเอ็นต์ แก่คุณ: คัดลอกไปที่ _config.yml ใต้ recaptcha.sitekey

รูปภาพ

ขี้เกียจโหลด

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

มีความเป็นไปได้ 2 แบบ:

ใช้สคริปต์ที่มาพร้อมกับอัญมณี
ขึ้นอยู่กับเบราว์เซอร์

การสนับสนุนเบราว์เซอร์สำหรับการโหลดแบบ Lazy Loading นั้นแตกต่างกันไป ดังนั้นจึงขอแนะนำให้เลือกใช้วิธีแก้ปัญหาแรก

การใช้ฟังก์ชั่นอัญมณี

เพิ่ม class="lazy-loading"
กรอกแอตทริบิวต์ src ด้วยเส้นทางไปยังไฟล์ตัวยึดตำแหน่ง
กรอกแอตทริบิวต์ data-src ด้วยเส้นทางไปยังไฟล์เนื้อหา

ก่อน:

 < img src =" {{ 'assets/images/content.jpg' | absolute_url }} " />

หลังจาก:

 < img class =" lazy-loading " src =" {{ 'assets/images/placeholder.jpg' | absolute_url }} " data-src =" {{ 'assets/images/content.jpg' | absolute_url }} " />

การใช้ฟังก์ชันการทำงานของเบราว์เซอร์

เพิ่ม loading="lazy"

ก่อน:

 < img src =" {{ 'assets/images/content.jpg' | absolute_url }} " />

หลังจาก:

 < img loading =" lazy " src =" {{ 'assets/images/content.jpg' | absolute_url }} " />

เบราว์เซอร์บางรุ่นไม่รองรับฟังก์ชันนี้!

รูปแบบการบีบอัดและไฟล์

ขอแนะนำให้ใช้รูปแบบ webp

ที่ขนาดและระดับการบีบอัดที่กำหนด (คุณภาพ) ไฟล์ webp จะมีขนาดอย่างน้อยครึ่งหนึ่งและให้ความรู้สึกนุ่มนวลยิ่งขึ้น

สิ่งตีพิมพ์

บนหน้า Github

ในที่เก็บของเว็บไซต์ของคุณเอง ให้แก้ไขไฟล์ _config.yml :

 url : " https://<github-account-name>.github.io/<repository-name> "

สร้างเว็บไซต์ด้วย:

 $ JEKYLL_ENV=production bundle exec jekyll build

มอบงานทั้งหมดของคุณให้กับสาขาปัจจุบัน

สร้างสาขาชื่อ gh-pages :

 $ git checkout -b gh-pages

และในที่สุดก็แทนที่เนื้อหาของที่เก็บด้วยหน้าเว็บที่สร้างขึ้น:

 $ mkdir ~/backup
$ mv ./* ~/backup/
$ mv ~/backup/.git ./
$ mv ~/backup/_site/* ./
$ git add .
$ git commit -m "First draft"

เนื้อหาของที่เก็บถูกสำรองข้อมูลไว้ในโฮมไดเร็กทอรีของผู้ใช้

และสุดท้ายก็กดไปที่ GitHub

 $ git push --u origin gh-pages

บนเซิร์ฟเวอร์ใดก็ได้

ในไดเร็กทอรีของเว็บไซต์ของคุณ ให้แก้ไขไฟล์ _config.yml :

 url : " https:<domain-name> "

สร้างเว็บไซต์ด้วย:

 $ JEKYLL_ENV=production bundle exec jekyll build

คัดลอกเนื้อหาของโฟลเดอร์ _site ไปยังเซิร์ฟเวอร์ของคุณ ซึ่งส่วนใหญ่จะอยู่ใน www

หากจำเป็น ให้กำหนดค่าเซิร์ฟเวอร์ของคุณให้ให้บริการไดเร็กทอรีนี้

มีส่วนร่วม

ยินดีรายงานข้อผิดพลาดและคำขอดึงบน GitHub ที่ https://github.com/apehex/jekyll-theme-consulting โครงการนี้มีวัตถุประสงค์เพื่อเป็นพื้นที่ที่ปลอดภัยและเป็นมิตรสำหรับการทำงานร่วมกัน และผู้มีส่วนร่วมจะต้องปฏิบัติตามจรรยาบรรณของผู้ร่วมให้ข้อมูล

การพัฒนา

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

หากต้องการทดสอบธีม ให้รัน bundle exec jekyll serve และเปิดเบราว์เซอร์ของคุณที่ http://localhost:4000 สิ่งนี้จะเริ่มต้นเซิร์ฟเวอร์ Jekyll โดยใช้ธีม เพิ่มหน้า เอกสาร ข้อมูล ฯลฯ เหมือนปกติเพื่อทดสอบเนื้อหาของธีม เมื่อคุณทำการแก้ไขธีมและเนื้อหาของคุณ เว็บไซต์ของคุณจะถูกสร้างขึ้นใหม่และคุณควรเห็นการเปลี่ยนแปลงในเบราว์เซอร์หลังจากการรีเฟรช เช่นเดียวกับปกติ

เมื่อธีมถูกปล่อยออกมา เฉพาะไฟล์ใน _layouts , _includes , _sass และ assets ที่ติดตามด้วย Git เท่านั้นที่จะถูกรวมกลุ่ม หากต้องการเพิ่มไดเร็กทอรีที่กำหนดเองให้กับ theme-gem โปรดแก้ไข regexp ใน jekyll-theme-consulting.gemspec ตามลำดับ