Jekyll 搭建新網站的鷹架。 https://marcanuy.github.io/jekyll-sculpture/
目錄
這是一個使用jekyll new --blank
創建的基本 Jekyll 網站(沒有主題或範例貼文),可作為任何網站的起點。
其目的是快速啟動新網站,克隆此存儲庫並根據您的需求進行定制,已經擁有我每次創建新 Jekyll 實例時添加和配置的所有功能。
現場演示看起來如此“簡約”,因為它不使用任何主題,其唯一目標是展示網站導航的設計以及如何添加帖子/類別。
其結構使用如何以正確的方式將Bootstrap 4 添加到Jekyll、不帶插件的多語言Jekyll 和如何在具有嵌套類別的Jekyll 站點上實現麵包屑文章中描述的設計,並應用到空白Jekyll 實例,並使用下面的插件提供的建議。
只需克隆此存儲庫並開始建立您的存儲庫即可。
git clone [email protected]:marcanuy/jekyll-skeleton.git
在每個jekyll 建置時自動產生:
/sitemap.xml
/feed.xml
。 SASS 以及/assets/main.scss
和/_sass/_variables.scss
中 Bootstrap 4 變數的輕鬆自訂。
自動為搜尋引擎和社群網路新增元資料標籤
頁面標題,附加網站標題或說明
<head>
<title>...</title>
</head>
頁面說明
<head>
<meta name="description" content="..."/>
</head>
規範網址
<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>
Open Graph 標題、描述、網站標題和 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" />
HTML 的head
部分中的備用連結元素
<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
-> /
)
頁面和貼文的麵包屑
<!-- 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-sculpture 的建構遵循以下原則:
jekyll-seo-tag
使用建議。git clone https://github.com/marcanuy/jekyll-skeleton
cd jekyll-seleton
make install
make 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-sculpture使用以下外掛程式:
如果您想在 Github 中託管從此儲存庫派生的站點,您可以遵循以下指南:使用 Git 推送到 Github 將 Jekyll 網站自動部署到 Github 頁面 。
$進行建構 rm -fr_site/ rm -fr 資產/供應商/ #from 紗線 rm -fr 資產/字體 #fontawesome 依賴項 rm -fr .sass_cache 捆綁安裝--路徑供應商/捆綁程序 警告:Bundler 的運作版本 (1.13.6) 早於建立鎖定檔案的版本 (1.15.0)。我們建議您透過執行「gem install bundler」升級到最新版本的 Bundler。 使用並發 ruby 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 使用ethon 0.10.1 使用 rb-inotify 0.9.8 使用pathutil 0.14.0 使用 nokogiri 1.7.2 使用 jekyll-sass-converter 1.5.0 使用 ActiveSupport 5.1.1 使用傷寒 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 捆綁完畢! 7 個 Gemfile 依賴項,現已安裝 38 個 gem。 捆綁的 gem 安裝到 ./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/字型資源 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 資產/供應商/ 捆綁執行 jekyll 構建 設定檔:/tmp/jekyll-sculpture/_config.yml 來源:/tmp/jekyll-骨骼 目的地:/tmp/jekyll-sculpture/_site 增量建置:禁用。使用 --incremental 啟用 生成... 5.474 秒內完成。 自動再生:停用。使用 --watch 來啟用。 $樹 -L 3 _site/ _地點/ ├── 資產 │ ├── 字體 │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ ├── main.css │ └── 供應商 │ ├── bootstrap.min.js │ ├── font-awesome.min.css │ ├── jquery.min.js │ └── tether.min.js ├── 德 │ ├── beispiel-post.html │ ├──index.html │ └── 下類別1 │ ├──index.html │ └── post-in-unterkategorie.html ├── 部署_key.enc ├── zh │ ├── example-post.html │ ├──index.html │ └── 子類別1 │ ├──index.html │ └── post-in-subdirectory.html ├── es │ ├──index.html │ ├── post-ejemplo.html │ └── 子類別1 │ ├──index.html │ └── post-en-subdirectorio.html ├── feed.xml ├── 索引.html ├── 許可證 ├── package.json ├── 自述文件.md ├── 機器人.txt ├── 網站地圖.xml └── 紗線.lock 9個目錄,32個文件 $進行檢查 捆綁執行傑基爾醫生 設定檔:/tmp/jekyll-sculpture/_config.yml 你的測試結果出來了。 捆綁執行 htmlproofer --check-html --http-status-ignore 999 --內部網域 marcanuy.github.io,localhost:4000 --假設副檔名 _地點 在 *.html 上的 [“_site”] 上運行 [“ScriptCheck”、“LinkCheck”、“HtmlCheck”、“ImageCheck”]... 正在檢查 14 個外部連結... 跑了 13 個文件! HTML-Proofer 已成功完成。
請隨意提出問題和/或貢獻!