cockpit project.github.io ดาวน์โหลด - cockpit project.github.io ซอร์สโค้ดดาวน์โหลดดาวน์โหลด

cockpit project.github.io

ข้อมูลเว็บไซต์

1.0.0

ดาวน์โหลด

เว็บไซต์โครงการห้องนักบิน

เว็บไซต์ Cockpit Project ตั้งอยู่บน Springboard ซึ่งเป็นงานสร้างที่ได้รับการรับรองจาก Jekyll ซึ่งได้รับอนุญาตจาก MIT ซึ่งใช้สำหรับการเริ่มต้นเว็บไซต์อย่างรวดเร็ว

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

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับ Springboard โปรดดู Jekyll-Springboard

เริ่มต้นใช้งาน

ใช้คอนเทนเนอร์ Podman

การตั้งค่าคอนเทนเนอร์เป็นครั้งแรก

ติดตั้ง Podman (ถ้าคุณยังไม่ได้ติดตั้งไว้ล่วงหน้าด้วย SilverBlue และมีให้ที่อื่น): sudo dnf install podman
สร้างคอนเทนเนอร์และติดตั้งการอ้างอิงด้วย: _scripts/container-create

เรียกใช้เซิร์ฟเวอร์ Jekyll ในเครื่อง

เรียกใช้เว็บไซต์ในพื้นที่โดยใช้ Jekyll ด้วย:

_scripts/container-jekyll
เยี่ยมชม http://127.0.0.1:4000/

คุณสามารถส่งอาร์กิวเมนต์ไปยังคำสั่ง container-jekyll หากต้องการดูทุกอย่างที่มีอยู่ให้ผ่าน --help ช่วย อาร์กิวเมนต์ที่มีประโยชน์ที่สุดคือ:

-I สำหรับการเพิ่มขึ้นซึ่งเพิ่มความเร็วในการรวบรวมหน้าโดยการคอมไพล์ใหม่เฉพาะส่วนที่มีการเปลี่ยนแปลง
-l สำหรับ Livereload ซึ่งอัปเดตเบราว์เซอร์เมื่อชิ้นส่วนของหน้าเปลี่ยน

ดังนั้นสำหรับการเรนเดอร์ทันทีของการเปลี่ยนแปลงในท้องถิ่นคุณจะเรียกใช้:

_scripts/container-jekyll -Il

อัปเดตเมื่อ Gemfile / Gemfile.lock เปลี่ยนไป

_scripts/container-update-gems

การลบคอนเทนเนอร์

_scripts/container-delete

สิ่งนี้จะลบคอนเทนเนอร์และไดเรกทอรี .gem ท้องถิ่น

การติดตั้งในพื้นที่โดยไม่มีคอนเทนเนอร์

ในการแปลงเนื้อหาเป็นหน้าเว็บคุณจะต้องติดตั้งทับทิม Bundler และ Jekyll

ติดตั้ง Ruby & Bundler (เป็นรูท):
หมายเหตุ: ในการเป็นรากคุณต้องเรียกใช้ su หรือ sudo -s
- fedora / rhel / centos :
```
 dnf install -y rubygem-bundler ruby-devel libffi-devel make gcc gcc-c++ 
redhat-rpm-config zlib-devel libxml2-devel libxslt-devel tar nodejs
```
- OpenSuse :
```
 zypper install ruby2.1-rubygem-bundler ruby2.1-devel make gcc-c++ 
libxml2-devel libxslt-devel tar
```
- Debian / Ubuntu :
```
 apt update && apt install bundler zlib1g-dev
```
- MacOS / OS X :
  หมายเหตุ: ก่อนอื่นคุณต้องติดตั้งเครื่องมือนักพัฒนา MAC จากนั้นเรียกใช้สิ่งต่อไปนี้:
```
 gem update --system
gem install bundler
```
กำหนดค่า Bundler ให้ทำงานเป็นผู้ใช้:
```
 bundle config path ~/.gem
```
ติดตั้งอัญมณี (ในฐานะผู้ใช้):
```
 bundle install
```
เรียกใช้ Jekyll:
```
 bundle exec jekyll server
```

ทำงานกับเว็บไซต์

เนื่องจากการนั่งร้านไซต์นี้ถูกสร้างขึ้นบน Jekyll เอกสารทั้งหมดของ Jekyll จึงใช้

ข้อมูลอ้างอิงที่เป็นประโยชน์:

เอกสาร Jekyll อย่างเป็นทางการ
CloudCannon Jekyll แบบฝึกหัด

บันทึกย่อ

บันทึกย่อการเปิดตัวอยู่ในรูปแบบของโพสต์บล็อกที่จัดรูปแบบ markdown และอยู่ใน _posts ที่มีวันที่และ URL Slug เป็นส่วนหนึ่งของชื่อไฟล์

สำหรับรายละเอียดเพิ่มเติมอ่านส่วนบนบล็อกโพสต์

หน้าปัด

Frontmatter นั้นฝังอยู่ใน Yaml ซึ่งรวมอยู่ในเอกสารทุกกระบวนการของ Jekyll หาก Frontmatter Yaml ถูกทิ้งไว้ Jekyll จะไม่ประมวลผลไฟล์และจะคัดลอกออกไปยังไม่ผ่านการประมวลผลไปยังไดเรกทอรีย่อย _site

ตัวอย่างไฟล์ Markdown ที่มี frontmatter (ที่ด้านบน):

 ---
title : This is a blog post!
date : 2017-04-01
author : reedrichards
tags : foo bar baz
category : selfpost
---

Hi everyone! Welcome to my first blog post!

ผู้เขียนควรเป็นชื่อเล่น (โดยเฉพาะอย่างยิ่ง) และคุณควรกรอกข้อมูลในไฟล์ _data/authors.yml

โพสต์บล็อก ต้องการ frontmatter กับฟิลด์ส่วนใหญ่ข้างต้น ฟิลด์สำหรับ tags และ category เป็นทางเลือก ไฟล์อื่น ๆ ทั้งหมดที่จะประมวลผลโดย Jekyll ควรมีอย่างน้อยการเปิดและปิดบรรทัด frontmatter (สองสามขีด --- ) และ อย่าง น้อยก็ควรรวม title ด้วย

การทำเครื่องหมาย

Jekyll ใช้ markdown ... โดยเฉพาะ markdown ปรุงรสของ GitHub ผ่าน Kramdown

คุณสามารถใช้การประชุม Markdown ทั้งหมดที่ GitHub เพิ่มไว้ด้านบน (รวมถึงตาราง ฯลฯ ) และยังสามารถเพิ่มในชั้นเรียนและ ID (เหนือสิ่งอื่นใด) ด้วย Kramdown

นอกจากนี้ Jekyll ใช้สิ่งที่เรียกว่าแท็ก "Liquid" สำหรับการควบคุมตรรกะและการไหลแบบง่าย (ตัวแปรถ้า/จากนั้น/อื่น ๆ ลูป ฯลฯ ) ของเหลวไม่ได้รับการสนับสนุนไม่เพียง แต่ใน HTML และสิ่งที่ Jekyll พิจารณา PlainText (JSON, XML, ฯลฯ ) แต่ยังอยู่ใน markdown

หากคุณต้องการผสม Markdown กับเค้าโครงขั้นสูงขึ้นอีกเล็กน้อยคุณอาจต้องการพิจารณาการจับภาพบล็อกด้วยการเรนเดอร์ markdown ในแท็กของเหลว ดูเหมือนว่า (ใช้กริด glidlex แบบง่าย):

{% capture intro %}
## Intro title here

A list:

1 . Item 1
2 . Item 2
{% endcapture %}

{% capture details %}
Some other information to the side...
{% endcapture %}

< section class = " grid " >
  < div class = " col " >{{ intro | markdownify }}</ div >
  < div class = " col " >{{ details | markdownify }}</ div >
</ section >

สิ่งนี้ช่วยให้คุณสามารถผสมและจับคู่เนื้อหาใน markdown บริสุทธิ์ด้วย HTML เล็กน้อยสำหรับเค้าโครงขั้นสูงมากขึ้น โดยทั่วไปคุณจะต้องเก็บทุกอย่างไว้ใน pure markdown และเก็บเทคนิคนี้ไว้สำหรับหน้าพิเศษ (เช่นหน้า Landing Pages หรืออะไรก็ตามที่ต้องซับซ้อนกว่าเล็กน้อย)

ของเหลว

Liquid เป็นภาษาเทมเพลตที่สร้างขึ้นโดย Shopify และรวมอยู่ใน Jekyll โดยค่าเริ่มต้น

โดยทั่วไปมีแท็กของเหลวสองประเภท:

วัตถุซึ่งดูเหมือน {{ objectname }}
แท็กดูคล้ายกับวัตถุ แต่แทนที่จะใช้วงเล็บสองเท่าแท็กใช้เครื่องหมายเปอร์เซ็นต์ {% tagname %}

ทั้งวัตถุและแท็กใช้ตัวกรองซึ่งเขียนเป็นท่อตามด้วยคำสั่ง ตัวกรองสามารถ (บางครั้งเป็นทางเลือก) ใช้ข้อโต้แย้งเช่นกันและสามารถถูกล่ามโซ่ได้

ตัวอย่างง่ายๆ (การมอบหมายค่อนข้างโง่ที่นี่ แต่สำคัญที่จะชี้ให้เห็น):

{% if person %}
  {% assign role = person . job_title | capitalize %}

  Hello, {{ person . name }}!

  How long have you worked at {{ role }}?
{% endif %}

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

ตัวอย่างการลดอวกาศ (ส่วนใหญ่มีประโยชน์สำหรับลูป):

{%
  if foo
    %}{{
      foo . bar
      | split: "::"
      | join: ", "
      | strip
    }}{%
  endif
%}

เอกสารของเหลวอย่างเป็นทางการ
Jekyll Cheat Sheet-แท็กของเหลวเฉพาะ Jekyll
ของเหลวสำหรับนักออกแบบ - ภาพรวมที่ยอดเยี่ยมเกี่ยวกับวิธีการใช้แท็กเหลวในเอกสาร (ทั้ง Markdown และ HTML)

โพสต์บล็อก

โพสต์บล็อกทั้งหมดอยู่ในไดเรกทอรี _posts และจะต้องจัดรูปแบบกับปี Slug (โดยปกติจะเป็นชื่อที่สั้นลงซึ่งใช้เป็นส่วนหนึ่งของ URL) และส่วนขยาย ดูเหมือน 2017-04-01-welcome-to-the-blog.md welcome to-the-blog.md

นอกจากนี้ทุกโพสต์บล็อกจะต้องมี frontmatter รวมถึง title ฟิลด์และ date (ซึ่งควรจะเหมือนกับวันที่ของชื่อไฟล์) และควรรวมถึง author เพื่อให้เครดิตบุคคล (รวมถึงแสดงภายใต้ผู้เขียนในหน้าผู้เขียน) นอกจากนี้โพสต์บล็อกอาจมี tags และ category แต่ไม่จำเป็น (แนะนำเท่านั้น)

ผู้เขียนบล็อก

ในขณะที่ไม่จำเป็นขอแนะนำให้ใช้ชื่อเล่นสำหรับผู้เขียนในหน้าของโพสต์บล็อก

มีตรรกะเล็กน้อยในรหัสโพสต์บล็อกที่ใช้ข้อมูลจากไฟล์ _data/authors.yml หากมีอยู่

รูปแบบสำหรับไฟล์ผู้เขียนมีลักษณะเช่นนี้:

 default :
  name : Site Admin

example :
  name : Ann Example
  twitter : example
  googleplus : somegoogleaccount
  facebook : somefacebookaccount
  gravatar : 5658ffccee7f0ebfda2b226238b1eb6e
  description : |
    This is an example author. To get a gravatar, do something like:
    echo -n [email protected] | md5sum

reedrichards :
  name : ' Reed "Fantastic" Richards '
  twitter : MrFantastic__
  description : |
    Along with a few of my friends, I was blasted by cosmic radiation,
    and now I'm super bendy and stretchy.

    We fight crime.

ในตัวอย่างด้านบน, default , example และ reedrichards เป็นชื่อเล่นที่ใช้ในโพสต์บล็อก ฟิลด์ทั้งหมดเป็นทางเลือก แต่อย่างน้อยคุณอาจต้องการ name

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

การนำทาง

การนำทางถูกควบคุมโดยไฟล์ _data/navigation.yml หากมีอยู่

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

- title : Home
  url : " / "

- title : Software
  url : /software/

- title : Standards
  url : /standards/

- title : Search
  url : /search/

โปรดทราบว่า URL เป็น "/" อยู่ในราคา สิ่งนี้จำเป็นเนื่องจาก Yaml อย่างไรก็ตาม title อื่น ๆ s และ url s skip quoting และยังคงทำงานอยู่

คุณสามารถได้รับแฟนซีและเพิ่ม navigation ย่อยหากคุณต้องการ (แม้ว่าคุณอาจไม่ควรด้วยเหตุผลการใช้งาน):

- title : About
  url : /about/
  nav :
    - title : Things
      url : /about/things/
    - title : FAQ
      url : /about/faq/
      nav :
        - title : Test1
          url : /test1
        - title : Test2
          url : /test2

การปรับแต่ง

การปรับแต่งไซต์เกิดขึ้นส่วนใหญ่ในสองสถานที่: _config.yml และ assets/site.scss (หรือ assets/site.sass ) โดยค่าเริ่มต้นไฟล์ CSS ของไซต์ไม่มีอยู่ดังนั้นคุณจะต้องสร้างมันขึ้นมา

กำหนดค่า yaml

ไฟล์ _config.yaml นั้นค่อนข้างตรงไปตรงมา มันมีการกำหนดค่าโดยค่าเริ่มต้นที่ทำให้สิ่งต่าง ๆ ทำงานในพื้นที่ในลักษณะเดียวกันกับวิธีการทำงานของหน้า GitHub

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับไฟล์ _config.yaml อ่านเอกสารของ Jekyll

CSS ที่กำหนดเอง

การสร้างไซต์ที่กำหนดเอง CSS นั้นง่าย เรียกใช้หนึ่งในคำสั่งต่อไปนี้:

หากคุณกำลังใช้ SCSS : cp assets/default.scss assets/site.scss
หากคุณต้องการใช้ Sass : sass-convert assets/default.scss assets/site.sass

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

ขั้นตอนต่อไปคือการแก้ไขไฟล์ SCSS/SASS ของไซต์

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

เพิ่มสไตล์ที่กำหนดเองใด ๆ ให้กับเว็บไซต์ของคุณด้านล่างการนำเข้าทั้งหมด

โลโก้ที่กำหนดเอง

วางโลโก้ของคุณโดยเฉพาะอย่างยิ่งในรูปแบบ SVG ในไดเรกทอรีรูปภาพ เรียกมันว่า logo.svg (หรือ logo.png หากคุณไม่มีใน SVG) แค่ไหน! เสร็จแล้ว!

โครงสร้างไดเรกทอรี

การส่งออกกฎง่ายๆ: ไดเรกทอรีและไฟล์ที่เริ่มต้นด้วยขีดล่างจะเห็นโดย Jekyll (และบางส่วนมีความสำคัญในรหัสฐาน Jekyll ส่วนใหญ่เช่น _layouts ) แต่ไม่รวมอยู่ในผลลัพธ์

_data - ไฟล์ข้อมูลในรูปแบบ YAML ( yml ) หรือ JSON อ้างอิงในแท็กเหลวเป็น site.data. FILENAME . DATA… .
- navigation.yml (ไม่บังคับ แต่แนะนำอย่างยิ่ง) - การนำทางที่ใช้ทั่วทั้งไซต์
- authors.yml (เป็นทางเลือก แต่แนะนำ) - ข้อมูลเกี่ยวกับผู้เขียนบล็อก
_includes - partials ที่ใช้สำหรับการรวมในเอกสารและเลย์เอาต์ซึ่งเป็นประโยชน์สำหรับการสรุปเชิงซ้อน HTML และตรรกะของเหลวที่ซับซ้อนโดยเฉพาะอย่างยิ่งเมื่อมันอาจถูกนำกลับมาใช้ใหม่ทั่วทั้งไซต์ รวมจะถูกเรียกใช้เป็น {% include FILENAME.html key=value %} (คีย์และค่าเป็นทางเลือกและสามารถเป็นอะไรก็ได้ - ค่าตัวเองสามารถเป็นตัวแปรหรือสตริงที่แนบมาในเครื่องหมายคำพูด)
_layouts เทมเพลตสำหรับหน้าโดยเฉพาะ HTML-เลย์เอาต์ที่สำคัญที่สุดคือ essential ซึ่งก็คือ "กระดูกเปลือย" HTML และการออกเลย์ layout: ใน frontmatter ว่างเปล่าโดยไม่มีเลย์เอาต์เลย (ซึ่งมีประโยชน์สำหรับ JSON, XML, ข้อความธรรมดา ฯลฯ )
_posts - โพสต์บล็อกไปที่นี่ในรูปแบบ Markdown โพสต์ควรมี frontmatter พื้นฐาน (yaml ที่ด้านบนของไฟล์) ชื่อไฟล์มีความสำคัญเช่นกัน: YYYY-MM-DD-your-post-short-title-in-lowercase.md สำหรับข้อมูลเพิ่มเติมโปรดปรึกษาเอกสารอย่างเป็นทางการของ Jekyll ในโพสต์บล็อก
_site - เอาต์พุตของกระบวนการรวบรวม Jekyll สิ่งนี้ไม่ควรตรวจสอบเป็น Git (และอยู่ใน .gitignore ) แล้ว ในการชำระเงิน GIT ที่สะอาดไดเรกทอรีนี้ไม่มีอยู่
assets - นี่คือสถานที่สำหรับ CSS, JavaScript และ Fonts Coffescript ( .coffee ) และ sass ( .sass , .scss ) ได้รับการสนับสนุนเป็น jekyll จะประมวลผลพวกเขาไปยัง CSS และ JavaScript หากพวกเขามีคำสั่ง frontmatter (ซึ่งอาจว่างเปล่าเช่นเดียวกับสองบรรทัดทันที --- ) สำหรับไฟล์ที่ดำเนินการระดับสูงสุด
- fonts - แบบอักษรใด ๆ ที่ให้บริการในท้องถิ่นควรไปที่นี่
- lib - CSS และ JavaScript ที่กำหนดเอง
- vendor - รวม CSS & JavaScript จากโครงการอื่น ๆ (เช่น jQuery ฯลฯ )
blog - นี่ไม่ใช่สถานที่สำหรับโพสต์บล็อก อย่างไรก็ตามเป็นสถานที่สำหรับไฟล์ที่ทำให้บล็อกทำงาน (ไฟล์ดัชนีไฟล์ผู้เขียนไฟล์หมวดหมู่ฟีด ฯลฯ ) ในกรณีส่วนใหญ่คุณไม่จำเป็นต้องแตะต้องสิ่งที่นี่
guide -คู่มือเฉพาะห้องนักบินที่ทิ้งเป็น HTML และรวมอยู่ในเว็บไซต์
- latest - คู่มือล่าสุด นี่คือสิ่งที่หน้าอื่น ๆ ควรเชื่อมโยง คำแนะนำอื่น ๆ รวมอยู่ในรุ่นลูกหลานภายใต้หมายเลขเวอร์ชันของพวกเขา
images - รูปภาพอาศัยอยู่ที่นี่ นี่คือโพสต์บล็อกรูปภาพและหน้าอื่น ๆ มักจะเชื่อมโยงไปยัง
- site -รูปภาพเฉพาะไซต์ (ไอคอนต่าง ๆ โลโก้ ฯลฯ ) ควรวางไว้ที่นี่
- logo.svg - ไฟล์โลโก้ใน SVG รองรับการใช้ logo.png ด้วย แต่แนะนำให้ใช้ SVG
- favicon.png - ไอคอนไซต์ 512px ขนาดใหญ่ขนาดใหญ่
- favicon-small.png ไอคอนไซต์ขนาดเล็ก 16px สแควร์ขนาดเล็ก

การปรับใช้

หน้า GitHub

หากคุณกำลังปรับใช้ GitHub โดยใช้หน้า GitHub สิ่งที่คุณต้องทำคือ:

คลิกตาราง "การตั้งค่า"
เลื่อนลงไปที่ "หน้า github"
เลือก "Master Branch" (หากยังไม่ได้เลือก)
คลิก "บันทึก"

ครั้งแรกที่การตั้งค่าหน้าเว็บของคุณอาจใช้เวลาหลายนาที กรุณาอดทน

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

หมายเหตุ : GitHub อาจบ่นเกี่ยวกับ CNAME "CNAME cockpit-project.org ได้ดำเนินการแล้ว" นี่เป็นเพียงการเตือนทุกอย่างก็ใช้ได้และควรใช้งานได้