So Simple 是一个简单的 Jekyll 主题,适合您的文字和图片。旨在提供:
查看变更日志中的新增内容。 v2 文档。
描述 | ||
---|---|---|
带有大英雄图片的帖子。 | 预览 | 来源 |
包含各种常见 HTML 元素的帖子,展示了主题如何设置它们的样式。 | 预览 | 来源 |
发布显示突出显示的代码。 | 预览 | 来源 |
显示具有多种对齐方式的图像的帖子。 | 预览 | 来源 |
所有帖子均按年份分组。 | 预览 | 来源 |
所有帖子均按类别分组。 | 预览 | 来源 |
所有帖子均按标签分组。 | 预览 | 来源 |
类别页面。 | 预览 | 来源 |
网格视图中的文档列表。 | 预览 | 来源 |
可以在演示网站上查看其他示例帖子。这些(以及整个演示站点)的源文件可以在/docs
文件夹中找到。
如果您运行 Jekyll v3.5+ 并自托管,您可以快速将主题安装为 Ruby gem。如果您使用GitHub Pages进行托管,您可以安装为远程主题或直接将所有主题文件(请参阅下面的结构)复制到您的项目中。
将这一行添加到 Jekyll 站点的Gemfile
中(或创建一个):
gem "jekyll-theme-so-simple"
将此行添加到 Jekyll 站点的_config.yml
文件中:
theme : jekyll-theme-so-simple
然后运行 Bundler 安装主题 gem 和依赖项:
bundle install
GitHub Pages 添加了对任何 GitHub 托管主题的全面支持。
将gem "jekyll"
替换为:
gem "github-pages" , group : :jekyll_plugins
运行bundle update
并验证所有 gem 是否正确安装。
将remote_theme: "mmistakes/[email protected]"
添加到您的_config.yml
文件中。删除任何其他theme:
或remote_theme:
条目。
注意:您的 Jekyll 站点应该可以立即在 http://USERNAME.github.io 上查看。如果不是,您可以通过将空提交推送到 GitHub 来强制重建(有关更多详细信息,请参阅下文)。
如果您在同一 GitHub 用户名下托管多个基于 Jekyll 的站点,则必须使用项目页面而不是用户页面。本质上,您将存储库重命名为USERNAME.github.io以外的名称,并在master
上创建一个gh-pages
分支。有关其工作原理的更多详细信息,请查看 GitHub 的文档。
如果您分叉或下载了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
的顶部。
如果您使用的是 Bundler (有Gemfile
),则只需运行bundle update
即可;如果没有,则运行gem update jekyll-theme-so-simple
即可。
验证您在_config.yml
中分配了最新版本
remote_theme: "mmistakes/[email protected]"
注意:如果省略@xxx
则将使用主题的当前master
分支。建议将remote_theme
“锁定”在特定版本,以避免对您的站点引入重大更改。
下一步需要重建您的 GitHub Pages 站点,以便它可以下载最新的主题更新。这可以通过将提交推送到 GitHub 存储库来实现。
如果您目前没有任何内容要推送,则空提交也可以完成工作:
git commit --allow-empty -m "Force rebuild of site"
如果您想充分利用 Jekyll + GitHub Pages 工作流程,那么您需要使用 Git。要手动下载主题更新,您必须首先确保有上游遥控器。如果您分叉了主题的存储库,那么您很可能就可以开始了。
要仔细检查,请运行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
中找到,以及项目根目录中的一些开发相关文件。
请注意:如果您通过 Ruby Gem 或远程主题方法安装了 So Simple,则/_layouts
、 /_includes
、 /_sass
和/assets
中找到的主题文件将从您的项目中丢失。这是正常的,因为它们与jekyll-theme-so-simple
gem 捆绑在一起。
├── _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
中。请参阅此存储库中的示例配置以获取更多参考。
姓名 | 描述 | 例子 |
---|---|---|
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
复制并重命名到您的本地存储库。_config.yml
中的skin
路径以引用这个新的皮肤.css
文件。site.locale
用于声明站点内每个网页的主要语言。
示例: locale: "en-US"
将站点的 lang 属性设置为美国英语风格,而en-GB
将设置为英国英语风格。国家/地区代码是可选的,并且较短的locale: "en"
也是可以接受的。要查找您的语言和国家/地区代码,请查看此参考表。
正确设置区域设置对于关联文本数据文件中找到的本地化文本非常重要。
注意:主题默认为英文文本( en
、 en-US
、 en-GB
)。如果将_config.yml
中的语言环境更改为其他内容,请务必将相应的语言环境键和翻译后的文本添加到_data/text.yml
中。
您站点的基本主机名和协议。如果您使用 GitHub Pages 托管,这将类似于url: "https://github.io.mmistakes"
或url: "https://your-site.com"
(如果您有自定义域名)。
GitHub Pages 现在对新站点强制使用https://
,因此在设置 URL 时请注意这一点,以避免出现混合内容警告。
注意:在开发中本地运行jekyll serve
时,Jekyll 会使用http://localhost:4000
覆盖url
的值。如果您想避免此行为,请设置JEKYLL_ENV=production
以强制环境进入生产环境。
这个选项在 Jekyll 社区中引起了各种混乱。如果您没有将您的网站托管为 GitHub 项目页面或子文件夹(例如/blog
),那么就不要搞乱它。
对于So Simple演示网站,它托管在 GitHub 上:https://mmistakes.github.io/so-simple-theme。为了正确设置此基本路径,我将使用url: "https://mmistakes.github.io"
和baseurl: "/so-simple-theme"
。
有关如何按照 Jekyll 维护者的意图正确使用site.url
和site.baseurl
更多信息,请查看 Parker Moore 关于该主题的帖子。
注意:使用baseurl
时,请记住将其包含在内容中的链接和资产路径中。 url:
和baseurl: "/blog"
的值将使您的本地站点在 http://localhost:4000/blog 上可见,而不是在 http://localhost:4000 上可见。您可以在所有资产和内部链接路径前面添加{{ site.baseurl }}
或使用 Jekyll 的relative_url
。
要使用以下图像路径上方的示例值{{ '/images/my-image.jpg' | relative_url }}
将正确输出为http://localhost:4000/blog/images/my-image.jpg
。
如果没有relative_url
过滤器,资产路径将丢失/blog
,并且页面上的图像会损坏。
您可以通过在_config.yml
中指定date_format
来更改默认日期格式。它接受任何标准 Liquid 日期格式。
例如"%B %-d, %Y"
的默认值可以这样更改:
date_format : " %Y-%m-%d "
使用read_time: true
启用站点范围内的估计阅读时间片段。 200
已被设置为每分钟的默认字数值 - 可以通过_config.yml
文件中的words_per_minute
进行更改。
read_time : true
words_per_minute : 200
在站点范围内启用MathJax (数学的 JavaScript 显示引擎)
mathjax :
enable : true
combo
选项允许您选择 MathJax 组件组合 - 默认为“tex-svg”。而且, tags
选项可以让您控制方程编号——选项有“ams”(默认)、“all”和“none”。
配置示例:
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"
通过相应地替换字体name
和weights
,可以在整个网站中轻松使用Google 字体。建议的字体配对如下:
google_fonts :
- name : " Source Sans Pro "
weights : " 400,400i,700,700i "
- name : " Lora "
weights : " 400,400i,700,700i "
注意:如果使用其他字体系列,请务必添加,然后使用 Google 提供的font-family
值覆盖/assets/css/main.scss
中的以下 SCSS 变量。
$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
添加到_config.yml
文件中的plugins
数组(以前是gems
)以及以下分页设置:
paginate : 10 # amount of posts to show per page
paginate_path : /page:num/
在项目的根目录中创建index.html
(或重命名index.md
)并添加以下前面的内容:
layout : home
paginate : true
要对文档的完整内容建立索引以在搜索页面中使用,请在_config.yml
中将search_full_content
设置为true
:
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 短名称添加到项目的_config.yml
文件中:
disqus :
shortname : my_disqus_shortname
仅当使用以下环境值构建时,注释才会出现在生产中: JEKYLL_ENV=production
,以避免localhost
内容污染您的 Disqus 帐户。
如果您不想显示特定帖子的评论,可以通过在该帖子的前言中添加comments: false
来禁用它们。
要启用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 卡和站点提要缩略图(如果启用)。建议的图像尺寸。 |
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
front Matter 已被弃用,以完全支持 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
像素。
要定义作者侧栏中显示的链接,请使用_config.yml
或/_data/authors.yml
中的authors.links
键。
姓名 | 描述 |
---|---|
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
,但有以下差异。
页面布局构成了其他几种布局的基础,例如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
。
默认情况下,帖子显示在列表视图中。要更改为网格视图,请将entries_layout: grid
添加到页面的前面。
layout: categories
此布局显示所有分组类别的帖子。它容纳与layout: page
。
默认情况下,帖子显示在列表视图中。要更改为网格视图,请将entries_layout: grid
添加到页面的前面。
layout: tags
此布局显示按标签分组的所有帖子。它容纳与layout: page
。
默认情况下,帖子显示在列表视图中。要更改为网格视图,请将entries_layout: grid
添加到页面的前面。
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
默认情况下,帖子显示在列表视图中。要更改为网格视图,请将entries_layout: 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
默认情况下,帖子显示在列表视图中。要更改为网格视图,请将entries_layout: grid
添加到页面的前面。
要创建一个显示分配给标签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
要索引文档的完整内容,请在_config.yml
中将search_full_content
设置为true
:
search_full_content : true
注意:大量帖子会增加搜索索引的大小,影响页面加载性能。将search_full_content
设置为false
(默认值)会将索引限制为正文内容的前 50 个单词。
建议的图像尺寸(以像素为单位)如下:
图像 | 描述 | 尺寸 |
---|---|---|
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/
注意:长标题或许多链接可能会导致导航栏分成多行,尤其是在较小的屏幕上。在开发网站的主要导航时请记住这一点。
作者信息用作“按行”帖子的元数据,并通过_config.yml
中的以下前面内容传播 Twitter 摘要卡的creator
字段:
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 不允许大多数插件 --- 自定义标签已被淘汰。相反,主题利用include来做类似的事情。
嵌入来自 YouTube/Vimeo 的视频或任何其他可响应调整大小以适合其父级宽度的iframe
内容。
范围 | 必需的 | 描述 |
---|---|---|
url | 是的 | 视频或 iframe 的 URL,例如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 %}
所以Simple 3是对整个主题的重大重写。下面总结了最显着的变化,然后是更具体的变化。
可以肯定地说,您可能希望放弃 v2 中的所有_layouts
、 _includes
、 _sass
、 .css
和.js
文件,并使用 Ruby gem 或远程主题安装选项。
_layouts
、 _includes
、 _sass
和 JavaScript 均已重建。relative_url
和absolute_url
过滤器正确使用site.url
和site.baseurl
。/_includes/open-graph.html
替换为jekyll-seo-tag 。tags
和posts
),以便于使用。404.md
页面。atom.xml
feed 文件替换为jekyll-feed 。favicon.ico
和favicon.png
文件。float
的布局的回退,因此在不支持显示的浏览器中,事情看起来不会太糟糕display: grid
和弹性盒。格式已从en_US
(带下划线)更改为en-US
(带连字符)。
site.owner
现在是site.author
,以更好地支持 jekyll-seo-tag 和 jekyll-feed。
v2 | 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 |
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
键已被重命名。相应地调整所有帖子和页面中的首页内容。
v2 | 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 front Matter:
image :
path : /images/feature-image-filename.jpg
thumbnail : /images/thumb-image-filename.jpg
caption : " [Michael Rose](https://mademistakes) "
将现有的 So Simple v2 分支(无需更改)迁移到最新版本的大致步骤。
删除_includes/
、 _layouts/
、 _sass/
、 jshintrc
、 Gruntfile.js
和search.json
。
编辑Gemfile
以获取 Ruby gem 或 GitHub Pages 安装方法并按照这些说明进行操作。
将以下 Google 字体添加到_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
中的body内容并将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
重命名为_data/authors.yml
中的picture
(以及任何帖子/页面的首页),并编辑遵循上面图像路径更改的路径。
当安装为Ruby gem或远程主题时,项目中将不存在核心主题文件( _layouts
、 _includes
、 _sass
、 assets
等)。
可以通过以下两种方式覆盖和自定义该主题的默认结构、样式和脚本:
可以通过将同名文件放入项目的_includes
或_layouts
目录中来覆盖主题文件。例如:
_includes/social-share.html
,请在项目中创建一个_includes
目录,将_includes/social-share.html
从 So Simple 的 gem 文件夹复制到<your_project>/_includes
并编辑该文件。专业提示:要在计算机上找到主题文件,请运行bundle show jekyll-theme-so-simple
。这将返回基于 gem 的主题文件的位置。
该主题附带两个文件,可帮助将自定义标记和内容注入预定义的位置。
描述 | |
---|---|
_includes/head-custom.html | 插入到<head> 元素内,用于添加元数据、网站图标等。 |
_includes/footer-custom.html | 插入到<footer> 元素内,位于站点脚本和版权信息之前。 |
要覆盖默认的 Sass(位于主题的_sass
目录中),请执行以下操作之一:
直接从 So Simple gem 复制
bundle show jekyll-theme-so-simple
来获取它的路径)。/assets/css/main.scss
的内容从那里复制到<your_project>
。<your_project>/assets/css/main.scss
中自定义您想要的内容。从此存储库复制。
<your_project>
。<your_project/assets/css/main.scss
中自定义您想要的内容。注意:要自定义 gem 中捆绑的实际 Sass 部分,您需要将_sass
目录的完整内容复制到<your_project>
。由于 Jekyll 目前导入这些文件的方式,要么全有要么全无。覆盖单个 Sass 部分(或两个)不会像_includes
和_layouts
那样工作。
要对主题样式进行基本调整,可以通过添加到<your_project>/assets/css/main.scss
来覆盖 Sass 变量。例如,要更改整个主题中使用的强调色,请在所有@import
行之前添加以下内容:
$accent-color : tomato ;
要覆盖主题中捆绑的默认 JavaScript,请执行以下操作之一:
直接从 So Simple gem 复制
bundle show jekyll-theme-so-simple
以获取它的路径)。/assets/js/main.js
的内容从那里复制到<your_project>
。<your_project>/assets/js/main.js
中自定义您想要的内容。从此存储库复制。
/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/
并希望它们与其他脚本连接,请务必更新package.json
中的uglify
脚本。对于您删除的脚本也是如此。
您还可以通过在_config.yml
中添加以下数组的路径来将脚本添加到<head>
或结束</body>
元素。
例子:
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
到存储库的根文件夹(例如jekyll-theme-so-simple
)。bundle exec rake preview
并打开浏览器访问http://localhost:4000/example/
。这将使用主题的文件和example/
目录的内容启动 Jekyll 服务器。进行修改后,刷新浏览器以查看任何更改。
为了减少依赖性,使用一组 npm 脚本来构建main.min.js
而不是像 Gulp 或 Grunt 这样的任务运行程序。如果这些工具更符合您的风格,那么请务必使用它们。
开始使用:
cd
到项目的根目录。注意:如果您从主题的先前版本升级,请确保在运行npm install
之前复制了package.json
。您可能还需要删除node_modules
目录。
如果一切顺利,执行npm run build:js
会将main.js
和所有插件脚本压缩/连接到/assets/js/main.min.js
中。
在文档中发现拼写错误?请求功能或错误修复?在提交问题之前搜索已打开和已关闭的问题以避免重复。
拉取请求也受到赞赏。如果这是您第一次,阅读 GitHub Flow 可能会有所帮助。
如果您的贡献添加或更改了主题的行为,请确保更新文档和/或示例内容。文档位于 README.md 中,而示例文章、页面和集合位于docs
和example
文件夹中。
提交拉取请求时:
master
中创建一个分支并给它一个有意义的名称(例如my-awesome-new-feature
)。迈克尔·罗斯
麻省理工学院许可证 (MIT)
版权所有 (c) 2013-2019 Michael Rose 和贡献者
特此免费授予获得本软件和相关文档文件(“软件”)副本的任何人不受限制地使用本软件,包括但不限于使用、复制、修改、合并的权利、发布、分发、再许可和/或销售软件的副本,并允许向其提供软件的人员这样做,但须满足以下条件:
上述版权声明和本许可声明应包含在本软件的所有副本或主要部分中。
本软件按“原样”提供,不提供任何明示或暗示的保证,包括但不限于适销性、特定用途的适用性和不侵权的保证。在任何情况下,作者或版权持有者均不对因本软件或本软件中的使用或其他交易而产生或与之相关的任何索赔、损害或其他责任负责,无论是合同、侵权行为还是其他行为。软件。
So Simple 包含 Font Awesome,版权所有 (c) 2017 Dave Gandy。 Font Awesome 是根据 SIL OFL 1.1 和 MIT 许可证的条款分发的。
So Simple 包含了来自 Unsplash 的照片。
So Simple 融合了 WeGraphics 的照片
So Simple 结合了断点。 Breakpoint 是根据 MIT/GPL 许可证的条款分发的。
So Simple 结合了 jQuery Smooth Scroll,版权所有 (c) 2017 Karl Swedberg。 jQuery Smooth Scroll 是根据 MIT 许可证条款分发的。
So Simple 包含 Lunr,版权所有 (c) 2017 Oliver Nightingale。 Lunr 根据 MIT 许可证条款进行分发。
如此简单地包含了Lity,版权(C)2015-2016,Jan Sorgalla。 Lity根据MIT许可的条款分发](http://opensource.org/licenses/mit)。
如此简单的内容表内容表切换,版权(C)2017 Timothy B. Smith。目录切换表根据MIT许可条款分布](http://opensource.org/licenses/mit)。