jekyll 主题_Jekyll入门(外加免费的Bootstrap 3入门主题)

jekyll 主题

Jekyll is a simple and blog-aware static site generator built in Ruby. In laymen terms, it's just a tool to let you have all the cool features of a full-blown CMS without having to worry about managing a database. This means hosting is extremely easy and scalable since all you're doing is managing a bunch of files.

Jekyll是一个使用Ruby构建的简单且可识别博客的静态网站生成器。 用外行的话来说,它只是一个工具,让您拥有成熟的CMS的所有很酷的功能,而不必担心管理数据库 。 这意味着托管非常容易可扩展,因为您要做的只是管理一堆文件。

In this tutorial, we'll cover everything you need to know to get started. It doesn't matter if your a seasoned Ruby developer or have never written a line of Ruby in your life. We'll also walk-through some best practice approaches and provide you with an awesome free starter Jekyll theme with Bootstrap 3 for you to fork and repurpose.

在本教程中,我们将介绍入门所需的一切。 无论您是经验丰富的Ruby开发人员,还是一生中从未编写过Ruby系列,都无关紧要。 我们还将逐步介绍一些最佳实践方法,并为您提供Bootstrap 3很棒的免费入门 Jekyll主题,供您分叉和重新利用。

bootstrap-plus-jekyll

You can check-out a demo the blog we're building here or dive straight into the theme's code here. Our starter theme should be helpful for several reasons:

您可以检查出一个演示中,我们正在构建的博客点击这里或潜水直入主题的代码在这里 。 出于以下几个原因,我们的入门主题应该会有所帮助:

  • Bootstrap 3 integrated

    集成了Bootstrap 3
  • Organized global variables

    有组织的全局变量
  • All config settings setup

    所有配置设置设置
  • Pages setup in their own folder

    页面设置在自己的文件夹中
  • Simple BS3 pagination demo

    简单的BS3分页演示
  • Dead simple layout simple

    死简单布局简单
  • .gitignore already setup

    .gitignore已经设置
  • Multiple post options: Featured Image, Video, Lead Text, etc.

    多个发布选项:精选图片,视频,潜在客户文字等。
  • Category and tag integration

    类别和标签集成
  • Huge, in-your-face, blog-style you can easily change (accepting pull requests)

    您可以轻松更改巨大的脸部博客样式(接受请求请求)

吉柯的好处 (Jekyll Benefits)

简单 (Simple)

Jekyll is really flexible. You can build templates and write content in markdown, textile, liquid, or even just plain HTML/CSS. It really doesn't matter and is up to your preference because Jekyll will intelligently build your site based on all your files.

Jekyll非常灵活。 您可以构建模板并以markdowntextileliquid或什至只是纯HTML / CSS编写内容。 没关系,完全取决于您的偏好,因为Jekyll将根据您的所有文件智能地构建您的网站。

静态的 (Static)

The entire website gets compiled into a static website. This means you can host it in almost any server environment with nearly zero overhead. You can also host it for free on Github Pages, or host it on a file storage service like Amazon S3. Finally, since it's static, if you put any sort of CDN with HTML caching (CloudFlare, CloudFront, etc.) in front of it, you'll sleep well at night knowing you can very cheaply handle an almost unlimited amount of traffic without downtime.

整个网站被编译成一个静态网站。 这意味着您可以在几乎任何零开销的几乎任何服务器环境中托管它。 您还可以免费在Github Pages上托管它,或将其托管在Amazon S3等文件存储服务上。 最后,由于它是静态的,因此如果您在其前面放置任何类型的带有HTML缓存的CDN( CloudFlareCloudFront等),您便会在晚上安然入睡,因为您可以廉价地处理几乎无限量的流量而不会造成停机。

博客意识 (Blog-aware)

Jekyll has all the benefits of a CMS, you just need to know how to use it. It's completely blog-aware with permalinks, categories, pages, posts, custom layouts, and even custom content types called Collections. On top of this, there's themes, plugins, and all sorts of extras.

Jekyll具有CMS的所有优点,您只需要知道如何使用它即可。 它完全具有博客意识,具有永久链接,类别,页面,帖子,自定义布局,甚至是称为集合的自定义内容类型。 最重要的是,有主题,插件和各种附加功能。

系统要求 (System Requirements)

ruby-banner

Now that we have done a very healthy intro into Jekyll, let's get started!

既然我们已经对Jekyll进行了非常健康的介绍,那么让我们开始吧!

Jekyll is a command-line executable built with Ruby and has a few commands we need to run from time to time. If you're not a Ruby developer, there's a few things we need to do to setup our environment for this kind of development.

Jekyll是使用Ruby构建的命令行可执行文件,其中包含一些我们需要不时运行的命令。 如果您不是Ruby开发人员,那么我们需要做一些事情来为这种开发设置环境。

We'll be doing this tutorial for Mac users, but it's very similar to Windows (Window users see this resource first) and Linux users.

我们将为Mac用户编写本教程,但是它与Windows(Window用户首先看到此资源 )和Linux用户非常相似。

The first thing you want to do is make sure Xcode Command Line Tools is installed.

您要做的第一件事是确保已安装Xcode命令行工具

Run this command from your terminal to start the download prompt:

从终端运行以下命令以启动下载提示:

xcode-select --install

The next thing you need to do is install Ruby. Your system might already have this, but we'll be getting the latest version. First install Homebrew:

接下来需要做的是安装Ruby。 您的系统可能已经有此版本,但是我们将获取最新版本。 首先安装Homebrew

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

If you already have Homebrew install, first update it with:

如果您已经安装了Homebrew,请首先使用以下命令进行更新:

brew update

Next, install Ruby by following these steps:

接下来, 按照以下步骤安装Ruby

brew install rbenv ruby-build

# Add rbenv to bash so that it loads every time you open a terminal
echo 'if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi' >> ~/.bash_profile
source ~/.bash_profile

# Install Ruby
rbenv install 2.2.2
rbenv global 2.2.2
ruby -v

If you're using oh my zsh, make sure you add this to the bottom of your ~/.zshrc file or you still won't be using the most current version of Ruby we just installed:

如果您使用的是我的zsh ,请确保将其添加到~/.zshrc文件的底部,否则您将不会使用我们刚安装的最新版本的Ruby:

export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"

At this point, you should have the latest version of Ruby installed. You'll also notice RubyGems (Ruby's package manager) was installed.

此时,您应该已经安装了最新版本的Ruby。 您还会注意到RubyGems(Ruby的程序包管理器)已安装。

You can see that with:

您可以通过以下方式看到它:

gem -v

You can update RubyGems with:

您可以使用以下命令更新RubyGems:

sudo gem update --system

For whatever reason if RubyGem's isn't installed, follow the manual install instructions here.

无论出于何种原因,如果未安装RubyGem,请按照此处的手动安装说明进行操作。

Finally, it's a good idea to install Bundler even though we won't be using it for this tutorial. Bundler allows a way to make sure that different gems have matching versions across different systems. This is especially useful while collaborating with teams.

最后,即使我们在本教程中不会使用Bundler,也是一个好主意。 Bundler提供了一种确保不同宝石在不同系统上具有匹配版本的方法。 与团队合作时,这特别有用。

It's really similar to how Composer or how NPM manages dependencies:

确实类似于ComposerNPM管理依赖项的方式:

sudo gem install bundler

The last requirement is to make sure you have NodeJS installed. If you don't have it installed yet, just run:

最后的要求是确保已安装NodeJS。 如果尚未安装,请运行:

brew install node

This might seem like a lot, but is a pretty standard setup for a lot of web developers. Plus, now your machine is Ruby ready!

这看起来可能很多,但是对于许多Web开发人员来说,这是一个非常标准的设置。 另外,现在您的机器已准备好使用Ruby!

安装 (Installation)

jekyll-banner

Now that you have all your system requirements setup, installing Jekyll is as easy as:

既然您已经设置了所有系统要求,那么安装Jekyll就像下面这样简单:

gem install jekyll

If you run into permission issues, just do:

如果您遇到权限问题,请执行以下操作:

sudo gem install jekyll

After Jekyll is done installing, you should be able to type anywhere from the command-line:

Jekyll安装完成后,您应该可以在命令行中的任何位置键入:

jekyll -v

This will prompt you with the Jekyll version installed and means Jekyll is successfully installed.

这将提示您安装了Jekyll版本,这意味着成功安装了Jekyll。

入门 (Getting Started)

Before we kick-off on building our blog, I quickly wanted to note how awesome the Jekyll documentation is and recommend checking it out.

在开始构建博客之前,我Swift想指出一下Jekyll文档的功能,并建议您查看一下。

So let's spin-up our first blog. From the command-line, navigate you where you'd like this project to be and type the following command:

因此,让我们启动第一个博客。 在命令行中,导航至您希望该项目位于的位置,然后键入以下命令:

cd wherever/you/want/this/project/on/your/computer
jekyll new my-blog

jekyll-getting-started

The new command here will create an install of Jekyll with the default theme. Alternatively, if you'd rather start with our theme, run the following command instead (Note: We make a ton of comparisons in this tutorial to the default theme setup in this tutorial. It might be a good idea to follow along that way first.):

此处的new命令将使用默认主题创建Jekyll的安装。 另外,如果您希望从我们的主题开始, 改为运行以下命令( 注:我们在本教程中对本教程中的默认主题设置进行了大量比较。首先遵循这种方式可能是一个好主意。):

git clone https://github.com/scotch-io/scotch-io.github.io my-blog

Let's jump into our new my-blog directory and run the serve command:

让我们跳到新的my-blog目录中并运行serve命令:

cd my-blog
jekyll serve

Jekyll comes with a built-in development server. This command start this server on your machine and starts watching your files for changes similar to Grunt or Gulp. This is awesome and makes development super easy with little overhead on your part.

Jekyll带有内置的开发服务器 。 此命令在您的计算机上启动此服务器,并开始监视文件中是否有类似GruntGulp的更改。 这很棒,并且使开发变得超级容易,而您的工作量却很少。

Now navigate to http://127.0.0.1:4000/ in your browser to see the Jekyll install we just setup.

现在,在浏览器中导航至http://127.0.0.1:4000/以查看我们刚刚设置的Jekyll安装。

指令 (Commands)

Let's quickly explain some commands and how Jekyll works a bit more. Since there's no database, you're going to be creating new pages, posts, and templates in markdown, html, textile, or liquid files and then using Jekyll to compile (or build) them together into a website. Before building the site, it actually doesn't exist and is just a bunch of template files.

让我们快速解释一些命令以及Jekyll的工作原理。 由于没有数据库,您将要在markdownhtmltextileliquid文件中创建新的页面,帖子和模板,然后使用Jekyll将它们一起编译(或build )到网站中。 在building站点之前,它实际上并不存在,而只是一堆模板文件。

“服务”或“ s” ("serve", or just "s")

The serve command builds your site, boots up a development server, and starts watching files for changes by default. Any time a change happens, it will build your site automatically (see below).

serve命令会构建您的站点,启动开发服务器,并默认开始监视文件中的更改。 每当发生更改时,它将自动build您的网站(请参见下文)。

To run this, just do:

要运行此程序,只需执行以下操作:

jekyll build

Stopping the server is as easy as:

停止服务器很容易:

ctrl-c

“构建”,或者只是“ b” ("build", or just "b")

By default, whenever you build your website, it will be generated into a folder called _site.

默认情况下,无论何时build网站,都会将其生成到名为_site的文件夹中。

You can generate your static site by running:

您可以通过运行以下命令生成静态站点:

jekyll build

You can also change the destination with:

您还可以使用以下方法更改目的地:

jekyll build --destination <destination>

Lastly, you can also add a --watch flag to rebuild on changes:

最后,您还可以添加--watch标志以基于更改进行重建:

jekyll build --watch

Your probably wondering why you wouldn't just use the serve command. This is useful to know for serveral reasons:

您可能想知道为什么不只使用serve命令。 出于服务器原因,这很有用:

  • You don't always want the local server.

    您并不总是需要本地服务器。
  • It's best practice to .gitignore your _site folder. So you may have to just compile your site on the fly somewhere.

    最佳做法是.gitignore您的_site文件夹。 因此,您可能只需要随时随地编译站点即可。

(new)

The new command will create a new Jekyll site scaffold in PATH (aka, the current location) with the default theme. We did this already while getting started.

new命令将使用默认主题在PATH(又称为当前位置)中创建一个新的Jekyll站点支架。 我们在开始时就已经做到了。

Here it is again:

这里又是:

jekyll new my-new-static-super-cool-blog-about-cats-and-dogs

You'll only have to do this when starting a new project from scratch. If you're using a theme or existing site, you won't even touch this.

从头开始新项目时,只需执行此操作。 如果您使用的是主题或现有网站,您甚至都不会触摸它。

文件夹和目录概述 (Folder and Directory Overview)

So we created our first project and are now familiar with the commands a bit. Let's review the folder structure that was created with the new command.

因此,我们创建了第一个项目,现在对命令有些熟悉了。 让我们回顾一下使用new命令创建的文件夹结构。

It's important to learn these pieces well since this is essentially the core framework of Jekyll, its templating, configuration, and where content generation is done.

充分学习这些文章很重要,因为这实质上是Jekyll的核心框架 ,其模板,配置以及完成内容的位置。

We're just going to do a brief overview of these and jump into all of them in detail later in the tutorial.

我们将对这些内容进行简要概述,并在本教程的后面部分详细介绍所有这些内容。

You can also reference the official Jekyll docs on Directory Structure.

您还可以参考Directory结构上的官方Jekyll文档。

_config.yml (_config.yml)

If you're starting a new project or cloning down an existing one, this is usually the first file you'll want to take a peak at. This file hosts global configurations for your entire site in YAML format.

如果您要开始一个新项目或克隆一个现有项目,通常这是您想要达到峰值的第一个文件。 该文件以YAML格式托管整个站点的全局配置。

These configurations are defaults used by the jekyll executable (such as a destination) and can also be retrieved in templates or content by doing:

这些配置是jekyll可执行文件(例如目标)使用的默认配置,还可以通过执行以下操作在模板或内容中进行检索:

{{ site.variable_name }}

We'll cover this in a lot more detail in a bit. Here's the official resource on Jekyll config if you want to quickly review.

我们将对此进行更详细的介绍。 如果您想快速查看,这是Jekyll配置的官方资源

_布局 (_layouts)

We'll cover how layouts work later too, but this directory is where you will put your templates. Templates are the HTML that wrap posts and other types of content like pages.

稍后我们还将介绍布局的工作方式,但是此目录是放置模板的位置。 模板是HTML,用于包装帖子和其他类型的内容(例如页面)。

_包括 (_includes)

This folder is where you'll put reusable bits of code for your templates. This is sometimes also called "partials" or "slices". We'll cover how to use these in the templating section later too.

在此文件夹中,您将放置可重复使用的代码段。 有时也称为“部分”或“切片”。 稍后我们还将在模板部分介绍如何使用它们。

_帖子 (_posts)

This folder contains all your posts in a format of your choosing. Since there's no database, each post is a separate file formatted like so:

该文件夹包含您选择的格式的所有帖子。 由于没有数据库,所以每个帖子都是一个单独的文件,格式如下:

YEAR-MONTH-DAY-this-is-my-title.MARKUP

_草稿 (_drafts)

You'll notice this folder actually isn't there if your using the default theme! You can create this empty folder now, but this is just where you will store unpublished posts.

如果使用默认主题,您会发现此文件夹实际上不存在! 您现在可以创建一个空文件夹,但这只是存储未发布帖子的位置。

_plugins (_plugins)

This also doesn't exist yet with the default theme! You can add this in case you want to add plugins later.

默认主题还不存在! 如果以后要添加插件,则可以添加它。

关于.md (about.md)

The default theme comes with this page in the root directory. This is slightly annoying for organizational purposes. In the Scotch Theme though, we moved this to it's own folder _pages. We'll cover that later.

该页面的默认主题位于根目录中。 出于组织目的,这有点令人讨厌。 不过,在“苏格兰主题”中,我们将其移动到了自己的文件夹_pages 。 我们稍后再讨论。

index.html (index.html)

This is your blog's homepage. So long that this file has a YAML Front Matter section (which, again, we'll cover), it will be transformed by Jekyll. The same will happen for any other .html, .markdown, .md, or .textile file in your site’s root directory or directories not listed above.

这是您博客的主页。 只要该文件有一个YAML Front Matter部分(同样,我们将介绍),它将由Jekyll进行转换。 网站根目录或上面未列出的目录中的任何其他.html.markdown.md.textile文件都将发生同样的情况。

_现场 (_site)

This is your generated static website. Everytime your site is built or generated, this folder is "cleaned" and rebuilt from scratch. So never touch this and just know that it exists solely to host the output of your static site.

这是您生成的静态网站。 每次构建或生成您的站点时,都会“清除”此文件夹并从头开始重建。 因此,永远不要碰它,只知道它仅存在于宿主静态站点的输出。

_数据 (_data)

This is where you'll host things like reusable data, variables, or more. We'll make extensive use of this folder. Data can be in YAML, JSON, or a CSV.

在这里您将托管可重用数据,变量等内容。 我们将广泛使用此文件夹。 数据可以采用YAMLJSONCSV

_sass (_sass)

Jekyll comes Sass-ready. The default theme doesn't use Bootstrap, but you can compare it to the Scotch Theme on how we integrated Bootstrap 3 with it.

Jekyll已准备就绪。 默认主题不使用Bootstrap,但是您可以将其与Scotch Theme进行比较,以了解我们如何将Bootstrap 3与之集成。

任何其他文件/文件夹 (Any Other Files/Folders)

All other files and folders automatically get copied over to the static generated site. So if you create a folder called img, it will be copied over to the static site. This makes referencing images easy.

所有其他文件和文件夹将自动复制到静态生成的站点。 因此,如果您创建一个名为img的文件夹,它将被复制到静态站点。 这使引用图像变得容易。

You'll notice that with the Scotch Theme, we created a js and img folders since the default theme doesn't have these out-of-the-box.

您会注意到,使用Scotch Theme ,我们创建了一个jsimg文件夹,因为默认主题没有这些现成的。

组态 (Configuration)

As mentioned above, your site's configuration is done in _config.yml. The values set here are shared to the jekyll command from the command-line.

如上所述,您网站的配置是在_config.yml完成的。 此处设置的值从命令行共享给jekyll命令。

You'll also notice in the default theme that there's some settings in the example generated such as email, twitter_username, and github_username. Some people use this for declaring site-wide global variables since you can retreive them in templates like so:

您还会注意到,在默认主题中,示例中生成了一些设置,例如emailtwitter_usernamegithub_username 。 有人用它来声明站点范围的全局变量,因为您可以在模板中检索它们,如下所示:

{{ site.variable_name }}

Although you can do this and the default theme does this, I actually recommend using Data Files for anything custom instead.

尽管您可以执行此操作,并且默认主题可以执行此操作,但实际上我建议将数据文件用于任何自定义项。

When developing, Jekyll will not watch this file for changes. Any changes only happen during a brand-new site build - which is midly frustrating when moving fast.

开发时,Jekyll 将不会监视此文件的更改 。 任何更改都只会在全新的网站构建过程中发生 -快速迁移时会令人感到沮丧。

That's why it makes sense to limit this file to your build config only. So what we did with the Scotch Theme was actually delete everything and add every single default value for quick reference and tweaking instead.

因此,仅将此文件限制为您的构建配置才有意义。 因此,我们使用苏格兰主题进行的操作实际上是删除所有内容,并添加每个默认值以供快速参考和调整。

This is a full list of all the defaults:

这是所有默认设置的完整列表:

# Where things are
source:      .
destination: ./_site
plugins:     ./_plugins
layouts:     ./_layouts
data_source: ./_data
collections: null

# Handling Reading
safe:         false
include:      [".htaccess"]
exclude:      []
keep_files:   [".git", ".svn"]
encoding:     "utf-8"
markdown_ext: "markdown,mkdown,mkdn,mkd,md"

# Filtering Content
show_drafts: null
limit_posts: 0
future:      true
unpublished: false

# Plugins
whitelist: []
gems:      []

# Conversion
markdown:    kramdown
highlighter: rouge
lsi:         false
excerpt_separator: "\n\n"

# Serving
detach:  false
port:    4000
host:    127.0.0.1
baseurl: "" # does not include hostname

# Outputting
permalink:     date
paginate_path: /page:num
timezone:      null

quiet:    false
defaults: []

# Markdown Processors
rdiscount:
  extensions: []

redcarpet:
  extensions: []

kramdown:
  auto_ids:       true
  footnote_nr:    1
  entity_output:  as_char
  toc_levels:     1..6
  smart_quotes:   lsquo,rsquo,ldquo,rdquo
  enable_coderay: false

  coderay:
    coderay_wrap:              div
    coderay_line_numbers:      inline
    coderay_line_number_start: 1
    coderay_tab_width:         4
    coderay_bold_every:        10
    coderay_css:               style

If you'd like to read more about configurations, check the official docs on it here.

如果您想了解有关配置的更多信息,请在此处查看有关它的官方文档。

模板化 (Templating)

Templating in Jekyll is amazingly simple. If you're familiar with modern templating systems, it will be a breeze to learn.

在Jekyll中进行模板非常简单。 如果您熟悉现代模板系统,则学习起来会很容易。

Templating is basically broken down into two parts: Front Matter and Liquid Templates

模板基本上分为两部分: 正面液体模板

前事 (Front Matter)

Front Matter is YAML located at the top of your files for specifying page or template specific variables. This is where the beauty and power of Jekyll comes from.

Front Matter是位于文件顶部的YAML,用于指定页面或模板特定的变量。 这就是杰基尔的美丽和​​力量所在。

An example of Front Matter on a page would be:

页面上“最重要的事项”的示例为:

---
layout: page
title: About
permalink: /about/
---

&num; {{ page.title }}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et eros pretium, tristique orci a, pharetra elit. Phasellus tincidunt viverra urna at placerat. Etiam et urna at purus pellentesque tempor.

&num;&num; Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et eros pretium, tristique orci a, pharetra elit. Phasellus tincidunt viverra urna at placerat. Etiam et urna at purus pellentesque tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et eros pretium, tristique orci a, pharetra elit. Phasellus tincidunt viverra urna at placerat. Etiam et urna at purus pellentesque tempor.

On a site build, Jekyll will parse this information at the top, generate a page accessible at the URI "/about", and make sure it uses the layout that is named "page".

在站点构建中,Jekyll将在顶部解析此信息,生成可通过URI“ / about”访问的页面,并确保其使用名为“ page”的布局。

And, as the example above shows, you can also access front-matter variables with liquid by doing:

并且,如上面的示例所示,您还可以通过执行以下操作使用液体访问前项变量:

{{ page.variable_name }}

Front Matter variables can override defaults or be totally custom. For a full list of the defaults, reference the official docs here.

Front Matter变量可以覆盖默认值或完全自定义。 有关默认设置的完整列表,请参考此处官方文档

液体模板 (Liquid Templates)

Jekyll uses the very awesome Liquid Templating Language by Shopify. It's easy to learn, secure, and extremely extensible.

Jekyll使用Shopify的超棒液体模板语言 。 它易于学习,安全且可扩展。

The fastest way to get aquanted with Liquid is to read this resource: Liquid for Designers. It covers everything and more. We'll cover the basics here too though very quickly.

熟悉Liquid的最快方法是阅读以下资源: Liquid for Designers 。 它涵盖了所有内容以及更多内容。 我们也会在这里快速介绍基本知识。

包括 (Includes)

These go in a folder called _includes. Here's the syntax:

这些放在名为_includes的文件夹中。 语法如下:

{% include my-include.html %}
回显或打印 (Echoing or Printing)
{{ variable_name }}
标签标记(不打印) (Tag Markup (doesn't print))
{% stuff goes here %}
筛选器 (Filters)
{{ 'i am now uppercase'|upcase }}
循环 (Loops)
{% for post in posts %}
    My title is {{ post.title }}
{% endfor %}
有条件的 (Conditionals)
{% if variable_name %}
    variable_name exists
{% else %}
    variable_name doesn't exist
{% endif %}

创建页面 (Creating Pages)

Creating pages with Jekyll is as easy as creating a new file. By default, you can just create the file in your root directory, but we'll be organizing our pages in their own folder.

使用Jekyll创建页面就像创建新文件一样容易。 默认情况下,您只能在根目录中创建文件,但我们将在各自的文件夹中组织页面。

To do that, all you need to do is add this to your _config.yml. Remember to reboot your local environment afterwards:

为此,您只需将其添加到_config.yml 。 记住,之后请重新启动本地环境:

include: ['_pages']

Then, just create a file that is either .html, .markdown, .md, or .textile and add your front matter. Your front matter can be any variables you want, but you need to pick a layout, title, and permalink at minimum.

然后,只需创建一个.html.markdown.md.textile的文件,然后添加您的首页即可。 您的首要任务可以是任何想要的变量 ,但是您至少需要选择一个layouttitlepermalink

Here's an example:

这是一个例子:

---
layout: inner
title: About
permalink: /about/
---

It doesn't matter what comes, fresh goes better in life, with Mentos fresh and full of Life! Nothing gets to you, stayin' fresh, stayin' cool, with Mentos fresh and full of life! Fresh goes better! Mentos freshness! Fresh goes better with Mentos, fresh and full of life! Mentos! The Freshmaker!

We got a right to pick a little fight, Bonanza! If anyone fights anyone of us, he's gotta fight with me! We're not a one to saddle up and run, Bonanza! Anyone of us who starts a little fuss knows he can count on me! One for four, four for one, this we guarantee. We got a right to pick a little fight, Bonanza! If anyone fights anyone of us he's gotta fight with me!

创建帖子 (Creating Posts)

Creating posts are equally easy as creating pages. The only difference is you need to associate a date or timestamp with them and they go in their own folder:

创建帖子与创建页面一样容易。 唯一的区别是您需要将日期或时间戳与它们相关联,并且它们位于各自的文件夹中:

_posts/

Here's how you should create your file:

创建文件的方法如下:

YYYY-MM-DD-my-title-is-called-this.md

This is automatically parsed by Jekyll and creates default title and date variables. You can override this in your front-matter though. Here's an example of a post's front-matter:

Jekyll将自动对此进行解析,并创建默认的title和date变量。 不过,您可以在前题中覆盖它。 这是帖子前题的一个示例:

---
layout: inner
title: 'My First Post on Jekyll'
date: 2015-08-31 13:26:34
categories: blog development
tags: cats dogs code
custom_var: 'meow meow meow'
---

It doesn't matter what comes, fresh goes better in life, with Mentos fresh and full of Life! Nothing gets to you, stayin' fresh, stayin' cool, with Mentos fresh and full of life! Fresh goes better! Mentos freshness! Fresh goes better with Mentos, fresh and full of life! Mentos! The Freshmaker!

We got a right to pick a little fight, Bonanza! If anyone fights anyone of us, he's gotta fight with me! We're not a one to saddle up and run, Bonanza! Anyone of us who starts a little fuss knows he can count on me! One for four, four for one, this we guarantee. We got a right to pick a little fight, Bonanza! If anyone fights anyone of us he's gotta fight with me!

Check out all the post variables and how to retreive them in your templates here.

此处查看所有post变量以及如何在模板中获取它们。

遍历帖子 (Looping through Posts)

There's essentially two ways to loop through posts:

基本上有两种方法可以遍历帖子:

  • Without Pagination

    没有分页
  • With Pagination

    分页

Here' how to do it without pagination:

这是不分页的方法:

{% for post in site.posts %}

    <h2>post.title</h2>
    <div class="content">
        {{ post.content }}
    </div>

{% endfor %}

And here's how to do it with pagination:

以下是分页的方法:

{% for post in paginator.posts %}
    {% include tile.html %}
{% endfor %}

馆藏 (Collections)

This article won't cover collections, but imagine collections as a custom content type. Not everything is a post or a page, so that's where these come in handy.

本文将不介绍集合,而是将集合想象为自定义内容类型。 并非所有内容都是帖子或页面,因此这些都非常有用。

In WordPress, this would be the equivalent of a "custom post type". Or, in ExpressionEngine or other CMS's, a custom "channel".

在WordPress中,这相当于“自定义帖子类型”。 或者,在ExpressionEngine或其他CMS中,为自定义“通道”。

You can read about setting them up here.

您可以在此处阅读有关设置它们的信息

资料档案 (Data files)

jekyll-data

"Data files" are collections of pure, raw, and static data. Think of these as variables or groups of variables. You can have data files be in .yml, .yaml, .json, or even a .csv.

“数据文件”是纯数据,原始数据和静态数据的集合。 将它们视为变量或变量组。 你可以有数据文件是.yml.yaml.json ,甚至是.csv

I personally prefer to put everything custom in here and not in my _config.yml file. I separate custom variables into data files because they're "watched" by Jekyll during development. Variables in _config.yml are set when the site is built - and that's it.

我个人更喜欢将所有自定义内容放在此处,而不是在_config.yml文件中。 我将自定义变量分成数据文件,因为在开发过程中Jekyll对其进行了“监视”。 _config.yml中的变量是在网站构建时设置的,仅此而已。

Some good example use cases:

一些很好的示例用例:

  • Site navigations

    网站导航
  • Global variables that are site-wide

    站点范围内的全局变量
  • Misc. footer stuff

    杂项 页脚的东西
  • Google Analytics tracking code

    Google Analytics(分析)跟踪代码
  • Etc...

    等等...

You can have as many data files as you want. Just put all of them in a folder called:

您可以根据需要拥有任意数量的数据文件。 只需将它们都放在一个名为以下文件夹中:

_data/

To retrieve the "data" in your layouts, it's as easy as:

要检索布局中的“数据”,操作非常简单:

{{ site.data.filename1.some_variable }}
{{ site.data.filename2.another_variable }}

Check them out here for more information.

此处查看它们以获取更多信息。

结论 (Conclusion)

Jekyll is pretty cool and easy to use - even if you don't like or know Ruby. Static CMS's definitely have their obvious benefits for users over database driven CMS's.

Jekyll非常酷并且易于使用-即使您不喜欢或不了解Ruby。 相对于数据库驱动的CMS,静态CMS对于用户无疑具有明显的优势。

Make sure you checkout the demo and its code! It covers everything and more.

确保您签出了演示及其代码 ! 它涵盖了所有内容以及更多内容。

Here's some additional resources on Jekyll to wrap-up the tutorial:

以下是Jekyll上的一些其他资源,可以总结本教程:

翻译自: https://scotch.io/tutorials/getting-started-with-jekyll-plus-a-free-bootstrap-3-starter-theme

jekyll 主题

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值