博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jekyll 主题_Jekyll入门(外加免费的Bootstrap 3入门主题)
阅读量:2508 次
发布时间:2019-05-11

本文共 25455 字,大约阅读时间需要 84 分钟。

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主题,供您分叉和重新利用。

You can check-out a demo the blog we're building or dive straight into the theme's code . 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 , , , 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非常灵活。 您可以构建模板并以 , , 或什至只是纯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 , or host it on a file storage service like . Finally, since it's static, if you put any sort of CDN with HTML caching (, , 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.

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

博客意识 (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 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 :

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

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, by following these steps:

接下来, 按照以下步骤 :

brew install rbenv ruby-build# Add rbenv to bash so that it loads every time you open a terminalecho 'if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi' >> ~/.bash_profilesource ~/.bash_profile# Install Rubyrbenv install 2.2.2rbenv global 2.2.2ruby -v

If you're using , 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:

如果您使用的是 ,请确保将其添加到~/.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 .

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

Finally, it's a good idea to install 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提供了一种确保不同宝石在不同系统上具有匹配版本的方法。 与团队合作时,这特别有用。

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

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

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 is and recommend checking it out.

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

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/computerjekyll 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-blogjekyll 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 or . This is awesome and makes development super easy with little overhead on your part.

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

Now navigate to in your browser to see the Jekyll install we just setup.

现在,在浏览器中导航至以查看我们刚刚设置的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 

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 .

您还可以参考上的官方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 .

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

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 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 on how we integrated Bootstrap 3 with it.

Jekyll已准备就绪。 默认主题不使用Bootstrap,但是您可以将其与进行比较,以了解我们如何将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 , we created a js and img folders since the default theme doesn't have these out-of-the-box.

您会注意到,使用 ,我们创建了一个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 - 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 aresource:      .destination: ./_siteplugins:     ./_pluginslayouts:     ./_layoutsdata_source: ./_datacollections: null# Handling Readingsafe:         falseinclude:      [".htaccess"]exclude:      []keep_files:   [".git", ".svn"]encoding:     "utf-8"markdown_ext: "markdown,mkdown,mkdn,mkd,md"# Filtering Contentshow_drafts: nulllimit_posts: 0future:      trueunpublished: false# Pluginswhitelist: []gems:      []# Conversionmarkdown:    kramdownhighlighter: rougelsi:         falseexcerpt_separator: "\n\n"# Servingdetach:  falseport:    4000host:    127.0.0.1baseurl: "" # does not include hostname# Outputtingpermalink:     datepaginate_path: /page:numtimezone:      nullquiet:    falsedefaults: []# Markdown Processorsrdiscount:  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 .

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

模板化 (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: pagetitle: Aboutpermalink: /about/---# {
{ 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.## Heading 2Lorem 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 .

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

液体模板 (Liquid Templates)

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

Jekyll使用超棒 。 它易于学习,安全且可扩展。

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

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

包括 (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 you want, but you need to pick a layout, title, and permalink at minimum.

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

Here's an example:

这是一个例子:

---layout: innertitle: Aboutpermalink: /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: innertitle: 'My First Post on Jekyll'date: 2015-08-31 13:26:34categories: blog developmenttags: cats dogs codecustom_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 .

在查看所有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 %}    

post.title

{
{ post.content }}
{% 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 .

您可以阅读有关设置它们的 。

资料档案 (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 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 and its ! It covers everything and more.

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

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

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

翻译自:

jekyll 主题

转载地址:http://tnywd.baihongyu.com/

你可能感兴趣的文章
windows 10 & Office 2016 安装
查看>>
最短路径(SP)问题相关算法与模板
查看>>
js算法之最常用的排序
查看>>
Python——交互式图形编程
查看>>
经典排序——希尔排序
查看>>
团队编程项目作业2-团队编程项目代码设计规范
查看>>
英特尔公司将停止910GL、915GL和915PL芯片组的生产
查看>>
团队编程项目作业2-团队编程项目开发环境搭建过程
查看>>
Stax解析XML示例代码
查看>>
cookie
查看>>
二级图片导航菜单
查看>>
<Using parquet with impala>
查看>>
OpenGL渲染流程
查看>>
委托异步回调
查看>>
扩展欧几里得算法
查看>>
いつでもどこでも本格的に麻雀&チュートリアルが充実!iPhone/iPod touch/iPad向け「雀龍門Mobile」をiPadで遊んでみました...
查看>>
如何重置mysql中的root密码
查看>>
bzoj 3171: [Tjoi2013]循环格 最小费用最大流
查看>>
关于IO的一些数字
查看>>
高放的c++学习笔记之模板与泛型编程
查看>>