jekyll skeleton
1.0.0
Jekyll นั่งร้านเพื่อเริ่มเว็บไซต์ใหม่ https://marcanuy.github.io/jekyll-skeleton/
สารบัญ
นี่คือไซต์ Jekyll พื้นฐานที่สร้างขึ้นด้วย jekyll new --blank (ไม่มีธีมหรือโพสต์ตัวอย่าง) เพื่อใช้เป็นจุดเริ่มต้นสำหรับเว็บไซต์ใดๆ
จุดประสงค์คือเพื่อเริ่มต้นเว็บไซต์ใหม่อย่างรวดเร็วโดยโคลน Repo นี้และปรับแต่งตามความต้องการของคุณ โดยมีคุณสมบัติทั้งหมดที่ฉันเพิ่มและกำหนดค่าทุกครั้งที่ฉันสร้างอินสแตนซ์ Jekyll ใหม่
การสาธิตสดมีลักษณะ " เรียบง่าย " เนื่องจากไม่ได้ใช้ธีมใดๆ และเป้าหมายเดียวคือเพื่อแสดงการออกแบบการนำทางของเว็บไซต์และวิธีเพิ่มโพสต์/หมวดหมู่
โครงสร้างใช้การออกแบบที่อธิบายไว้ในวิธีการเพิ่ม Bootstrap 4 ให้กับ Jekyll วิธีที่ถูกต้อง, Jekyll แบบหลายภาษาโดยไม่ต้องใช้ปลั๊กอิน และวิธีใช้งาน Breadcrumbs บนไซต์ Jekyll ด้วยหมวดหมู่ที่ซ้อนกัน ซึ่งนำไปใช้กับอินสแตนซ์ Jekyll เปล่าพร้อมคำแนะนำที่ให้ไว้โดยปลั๊กอินด้านล่าง
เพียงโคลน repo นี้และเริ่มสร้างของคุณ
git clone [email protected]:marcanuy/jekyll-skeleton.git
สร้างโดยอัตโนมัติในแต่ละ jekyll build :
/sitemap.xml/feed.xml SASS และการปรับแต่งตัวแปร Bootstrap 4 อย่างง่ายดายใน /assets/main.scss และ /_sass/_variables.scss
เพิ่มแท็กข้อมูลเมตาสำหรับเครื่องมือค้นหาและเครือข่ายโซเชียลโดยอัตโนมัติ
ชื่อหน้า โดยมีชื่อเว็บไซต์หรือคำอธิบายต่อท้าย
<head>
<title>...</title>
</head>
คำอธิบายหน้า
<head>
<meta name="description" content="..."/>
</head>
URL ตามรูปแบบบัญญัติ
<link rel="canonical" href="..."/>
URL ถัดไปและก่อนหน้าบนหน้าที่แบ่งหน้า
ไซต์ JSON-LD และโพสต์ข้อมูลเมตาเพื่อการจัดทำดัชนีที่สมบูรณ์ยิ่งขึ้น
<meta property="fb:app_id" content="1822851531277021"/>
<script type="application/ld+json">
{"@context": "http://schema.org",
"@type": "WebPage",
"headline": "...",
"description": "...",
"url": "..."}</script>
เปิดชื่อกราฟ คำอธิบาย ชื่อไซต์ และ URL (สำหรับ Facebook, LinkedIn ฯลฯ)
<meta property="og:title" content="..."/>
<meta name="description" content="..."/>
<meta property="og:description" content="..."/>
<meta property="og:url" content="..."/>
<meta property="og:site_name" content="..."/>
<meta property="og:type" content="..."/>
<meta property="article:published_time" content="..."/>
<meta property="fb:app_id" content="..."/>
ข้อมูลเมตาการ์ดสรุปของ Twitter
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="..."/>
<meta name="twitter:creator" content="..."/>
หลายภาษา
เมนูนำทางภาษาสำหรับแต่ละหน้าไปยังเวอร์ชันแปลอื่น ๆ ทั้งหมด
<a hreflang="es" href="http://example.com/es/foobar" />
<a hreflang="de" href="http://example.com/de/foobar" />
<a hreflang="en" href="http://example.com/en/foobar" />
องค์ประกอบลิงก์สำรองในส่วน head ของ HTML
<link rel="alternate" hreflang="es" href="http://example.com/es" />
<link rel="alternate" hreflang="de" href="http://example.com/de" />
<link rel="alternate" hreflang="en" href="http://example.com/en" />
เปลี่ยนเส้นทางจากโฟลเดอร์ย่อยภาษาเริ่มต้นไปยังหน้าแรกของไซต์ ( /en -> / )
Breadcrumbs สำหรับเพจและโพสต์
<!-- url: /jekyll-skeleton/en/example-post -->
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/jekyll-skeleton/"><i class="fa fa-home" aria-hidden="true"></i></a></li>
<li class="breadcrumb-item ">
<a href="/jekyll-skeleton/en">en</a>
</li>
<li class="breadcrumb-item active">
Example Post
</li>
</ol>
เจคิลล์-สเกเลตัน ถูกสร้างขึ้นโดยคำนึงถึงหลักการดังต่อไปนี้:
jekyll-seo-taggit clone https://github.com/marcanuy/jekyll-skeleton
cd jekyll-seleton
make installmake serve เพิ่มภาษาใน _config.yml :
defaults:
#languages
-
scope:
path: ""
values:
lang: "en"
layout: default
-
scope:
path: "es"
values:
lang: "es"
ชื่อของมันคือ _data/locales.yml และเทียบเท่ากับแต่ละหน้าในภาษาใน /_data/map.yml :
-
en: index.html
es: es/index.html
-
en: about.html
es: es/acerca.html
เพิ่มโพสต์ในแต่ละภาษาที่อยู่ในไดเร็กทอรีย่อยภาษา: /en , es ฯลฯ
คุณสมบัติต่อไปนี้ในโพสต์ front-matter ถูกนำมาใช้:
---
title: # jekyll-seo-tag - The title of the post, page, or document
description: # jekyll-seo-tag - A short description of the page's content
image: # jekyll-seo-tag - URL to an image associated with the post, page, or document (e.g., /assets/page-pic.jpg)
author: # jekyll-seo-tag - Page-, post-, or document-specific author information (see below)
lang: # jekyll-seo-tag - Page-, post-, or document-specific language information
---
Jekyll-skeleton ใช้ปลั๊กอินต่อไปนี้:
หากคุณต้องการโฮสต์ไซต์ที่ได้รับจาก repo นี้ใน Github คุณสามารถปฏิบัติตามคำแนะนำนี้: การปรับใช้อัตโนมัติของเว็บไซต์ Jekyll ไปยังหน้า Github ด้วย Git Push To Github
$ สร้างงานสร้าง RM -fr _ไซต์/ rm -fr สินทรัพย์/ผู้ขาย/ #จากเส้นด้าย rm -fr สินทรัพย์/แบบอักษร #การพึ่งพาฟอนต์ที่ยอดเยี่ยม RM -fr .sass_cache การติดตั้งบันเดิล --path vendor/bundler คำเตือน: Bundler เวอร์ชันที่ทำงานอยู่ (1.13.6) เก่ากว่าเวอร์ชันที่สร้าง lockfile (1.15.0) เราขอแนะนำให้คุณอัปเกรด Bundler เป็นเวอร์ชันล่าสุดโดยเรียกใช้ `gem install Bundler` การใช้พร้อมกัน-ทับทิม 1.0.5 ใช้ i18n 0.8.1 การใช้มินิเทส 5.10.2 การใช้ thread_safe 0.3.6 ใช้ public_suffix 2.0.5 การใช้เครื่องระบายสี 1.1.0 การใช้สี 1.2 ใช้ ffi 1.9.18 การใช้ส่วนขยายที่ส่งต่อได้ 2.6.0 การใช้ทหารรับจ้าง 0.3.6 ใช้ mini_portile2 2.1.0 การใช้แบบขนาน 1.11.2 การใช้ตะโกน 2.0.7 ใช้ sass 3.4.24 ใช้ rb-fsevent 0.9.8 ใช้ kramdown 1.13.2 การใช้ของเหลว 3.0.6 การใช้รูจ 1.11.1 ใช้ safe_yaml 1.0.4 การใช้บันเดิล 1.13.6 ใช้ tzinfo 1.2.3 การใช้แอดเดรส 2.5.1 ใช้อีธาน 0.10.1 การใช้ rb-inotify 0.9.8 ใช้ pathutil 0.14.0 ใช้โนโคกิริ 1.7.2 การใช้ jekyll-sass-converter 1.5.0 การใช้ activesupport 5.1.1 การใช้ Typhoeus 0.8.0 การใช้การฟัง 3.0.8 ใช้ jekyll-toc 0.2.1 การใช้ html-proofer 3.7.2 ใช้ jekyll-watch 1.5.0 การใช้ jekyll 3.4.3 การใช้ jekyll-feed 0.9.2 ใช้ jekyll-redirect-from 0.12.1 การใช้ jekyll-seo-tag 2.2.3 การใช้ jekyll-sitemap 1.1.1 แพ็คเสร็จ! การพึ่งพา Gemfile 7 รายการ ติดตั้งอัญมณี 38 รายการแล้ว อัญมณีที่แถมมาจะถูกติดตั้งลงใน ./vendor/bundler ติดตั้งเส้นด้าย ติดตั้งเส้นด้าย v0.24.5 [1/4] กำลังแก้ไขแพ็คเกจ... ความสำเร็จที่ทันสมัยอยู่แล้ว เสร็จสิ้นใน 0.38 วินาที mkdir -p สินทรัพย์/ผู้ขาย/ cp node_modules/font-awesome/css/font-awesome.min.css สินทรัพย์/ผู้ขาย/ cp -r node_modules/font-awesome/fonts สินทรัพย์ cp node_modules/jquery/dist/jquery.min.js สินทรัพย์/ผู้ขาย/ cp node_modules/tether/dist/js/tether.min.js สินทรัพย์/ผู้ขาย/ cp node_modules/bootstrap/dist/js/bootstrap.min.js สินทรัพย์/ผู้ขาย/ บันเดิล exec jekyll build ไฟล์คอนฟิกูเรชัน: /tmp/jekyll-skeleton/_config.yml ที่มา: /tmp/jekyll-skeleton ปลายทาง: /tmp/jekyll-skeleton/_site การสร้างส่วนเพิ่ม: ปิดการใช้งาน เปิดใช้งานด้วย --increational กำลังสร้าง... ทำได้ภายใน 5.474 วินาที การฟื้นฟูอัตโนมัติ: ปิดการใช้งาน ใช้ --watch เพื่อเปิดใช้งาน $ ต้นไม้ -L 3 _site/ _เว็บไซต์/ ├── สินทรัพย์ │ ├── แบบอักษร │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── แบบอักษรที่ยอดเยี่ยม-webfont.woff2 │ ├── main.css │ └── ผู้ขาย │ ├── bootstrap.min.js │ ├── แบบอักษร-awesome.min.css │ ├── jquery.min.js │ └── tether.min.js ├── เด │ ├── beispiel-post.html │ ├── index.html │ └── หมวดที่ 1 │ ├── index.html │ └── โพสต์ใน untercategorie.html ├── ปรับใช้_key.enc ├── th │ ├── ตัวอย่าง-post.html │ ├── index.html │ └── หมวดหมู่ย่อย1 │ ├── index.html │ └── โพสต์ในไดเรกทอรีย่อย.html ├── เช่น │ ├── index.html │ ├── โพสต์-ejemplo.html │ └── หมวดหมู่ย่อย1 │ ├── index.html │ └── โพสต์-en-subdirectorio.html ├── feed.xml ├── index.html ├── ใบอนุญาต ├── แพ็คเกจ json ├── README.md ├── robots.txt ├── แผนผังเว็บไซต์.xml └── เส้นด้าย.ล็อค 9 ไดเร็กทอรี, 32 ไฟล์ $ ทำการตรวจสอบ มัดผู้บริหารเจคิลล์ด็อกเตอร์ ไฟล์คอนฟิกูเรชัน: /tmp/jekyll-skeleton/_config.yml ผลการทดสอบของคุณออกมาแล้ว ทุกอย่างดูดี มัด exec htmlproofer --check-html --http-สถานะละเว้น 999 --โดเมนภายใน marcanuy.github.io,localhost:4000 --สมมติ-ส่วนขยาย _เว็บไซต์ ใช้งาน ["ScriptCheck", "LinkCheck", "HtmlCheck", "ImageCheck"] บน ["_site"] บน *.html... กำลังตรวจสอบลิงก์ภายนอก 14 ลิงก์... วิ่งไป 13 ไฟล์! HTML-Proofer เสร็จสิ้นเรียบร้อยแล้ว
อย่าลังเลที่จะเปิดประเด็นและ/หรือมีส่วนร่วม!
