Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Jekyll
Webdesign

如何设置Jekyll主题

by
Difficulty:BeginnerLength:LongLanguages:

Chinese (Simplified) (中文(简体)) translation by Fuhuan (you can also view the original English article)

Jekyll是一个静态网站生成系统,可以让你将纯文本文件转换为复杂的博客,而无需担心数据库,安全问题,更新以及许多CMS和博客平台可能带来的其他复杂问题。

与大多数网站管理系统类似,可以在网站上使用Jekyll主题。 然而目前,Jekyll并没有像你习惯的那样使用主题。

现在Jekyll主题需要通过安装程序来应用。 当你下载Jekyll主题时,你也会下载运行整个Jekyll主题网站所需的所有文件。

未来版本的Jekyll将会发生变化,但现在你需要知道如何使用Jekyll主题。

在本教程中,我们将从一开始就设置一个Jekyll主题,从一些基本的安装议开始,逐步了解如何熟悉主题的功能,以及如何设置新网站或重新安装新的主题,维持一个现有的网站。

让我们开始!

Envato市场上的Jekyll主题

Envato Market上的Jekyll主题拥有一系列从19美元到24美元不等的主题。 稍后,我们将使用“ Writer ”和“ Astro ”(两个当前畅销主题)来演示安装。

jekyll on Themeforest
Envato市场上的Jekyll主题

Envato市场上的Jekyll主题

Jekyll主题用于在你自己的计算机上离线管理,内置于静态HTML网站中,然后进行部署。 添加内容时,基本过程是创建一个子集文件,在顶部添加一些前置事项,使用内容填充文件的其余部分,然后重新构建你的网站。

一旦你的网站建成,你可以以任何你选择的方式部署它,通过FTP或git命令。 但是,我们不会在本教程中关注部署,因此如果你想了解更多关于该主题的信息,请访问Jekyll主题使用帮助文档。

相反,我们将专注于你的计算机上脱机发生的Jekyll网站设置过程的一部分,这一切都开始于安装。

必备条件

使用Jekyll确实涉及到一些命令行的用法,但如果你从未使用过命令行,那么请不要让它掉线。 我建议通过我们的网页设计命令行  系列教程系列中的一些条目来获得适配。

Jekyll并没有得到Windows系统官方的支持。 但不意味着你不能使用它,但你可能需要跳过几个障碍。 如果你想在Windows上使用Jekyll,请查看Jekyll文档中的详细信息。

否则,如果你使用的是Mac OS X,Linux或Unix,则需要确保安装了以下必备组件:

  • Ruby(预装在Mac上)
  • Ruby(预装在Mac上)

要检查你是否安装了Ruby,请运行该命令ruby -v。 检查Ruby Gems运行gem -v。 在这两种情况下,这些命令都会检查版本号,只要你看到终端中返回的号码,你就可以轻松解决。

我们将使用Jekyll 3.1.x,因此你不需要像Jekyll安装文档页面中提到的那样需要NodeJS或Python 。

运行Jekyll安装

现在,要将Jekyll安装到你的计算机上,请运行以下命令: gem install jekyll

如果你看到提示你没有写入权限的消息,请在提示符前sudo输入命令  并在提示时输入密码。

然后,你会在终端中看到几行显示正在运行的安装过程。 当它说“安装了1颗宝石”时,你就完成了。

创建一个默认的Jekyll网站

让我们快速创建一个Jekyll主题网站,以便你可以在默认的非主题状态中看到它的外观,并熟悉它的文件和文件夹结构。 创建一个文件夹来容纳该网站,然后打开指向该文件夹的终端并运行: jekyll new .

注意:如果你想在某个时候在子文件夹中创建一个新的Jekyll网站,请使用以下命令: jekyll new subfolder_name

当网站设置完成后,你会在终端中看到一条消息,指出  “在<路径>中安装了新的jekyll网站”。 此时,在你的文件夹中,你应该看到Jekyll网站的标准内容。

现在运行该命令  jekyll serve来启动并离线运行你的网站。

当你 在终端中看到消息“服务器正在运行...按ctrl-c停止”时,你可以 在浏览器中输入地址  http:// localhost:4000并查看默认的Jekyll网站。

现在你已经看到了Jekyll网站的默认文件和文件夹结构以及它的非主题状态,你可以更好地了解你在典型的Jekyll主题下载中看到的内容。

快速演示新Jekyll主题

正如你从本教程中讨论的内容中所知道的那样,Jekyll主题当前带有运行整个网站所需的所有文件。 正如你在上一节中看到的那样,一旦你拥有了所有可以运行的文件jekyll serve,以便在浏览器中查看该网站。

这意味着,当你下载一个新的Jekyll主题时,你可以将其提取出来,立即jekyll serve在全功能的Jekyll网站上运行并使用主题。 许多主题甚至会包含已包含的演示内容。

让我们来看一些使用主题“ Writer ”和“ Astro ”的例子,(或者你喜欢的)。

一旦提取,就通过主题结构进行搜索,直到找到容纳Jekyll网站所有文件的根文件夹。 你应该能够从早先默认的Jekyll安装中识别此文件夹。 寻找诸如_config.yml文件,_includes目录等内容。

然后打开文件夹内的终端并运行jekyll serve。

如果成功,你将看到“终端服务器地址:”消息,并在终端显示一个URL。 将此网址复制并粘贴到浏览器中,你应该会看到新主题的效果演示。

缺少文件?

在某些情况下,你可能会在尝试运行时看到错误消息jekyll serve。 如果发生这种情况,请查看消息是否抱怨缺少文件,即主题所需的功能缺失。

在这个例子中,你可以在红色的错误文本中看到“jekyll-paginate”gem丢​​失了:

一个快速的谷歌搜索调出Github的问题宝石回购,提供安装它所需的命令。

在运行所述命令并安装缺失的组件文件后jekyll serve,能够按照预期的主题运行。

如果演示不加载

如果你转到提供的网址并且没有看到该网站,例如:

...检查的值baseurl在_config.yml文件。 我们稍后会详细讨论的这个文件控制整个网站的整体配置。

该baseurl变量附加到主域,当我们离线工作时,它是  http:// localhost:4000。

在上面的例子中,我们希望我们的网站出现在  http:// localhost:4000。 在_config.yml文件中,我们的变量设置为:baseurl

这看起来似乎是正确的,但由于这个值附加到主域,它实际上使网站尝试加载在http:// localhost:4000http:// localhost。

所以,我们需要将值更改为如下所示的空字符串:

你的网站将按预期加载。

如果你想要从子目录加载网站,请将该baseurl值更改为子目录的名称,确保以正斜杠开始和结束:

熟悉主题

主要原因之一是,直接从现有结构中提供主题开始是一个好主意,除了检查它按预期运行外,它还使你有机会熟悉Jekyll主题的功能和工作流程。

因为Jekyll主题相当灵活性可以提供不同的功能。 查找主题是否包含类别页面,精选图片,作者页面等等。 查找主题是否包含类别页面,精选图片,作者页面等等。 记下这些功能,以便搜索主题的文档并学习如何使用它们。

你还应该查看主题的文件和文件夹结构。 你需要调查的主要领域是:

  • 主题在_layouts文件夹中可能具有的任何自定义页面布局
  • 主题在_layouts文件夹中可能具有的任何自定义页面布局

你还需要了解你可能必须在网站的_config.yml文件中设置的网站范围配置选项,才能使用主题的功能,例如社交媒体网址,作者信息,导航链接等。

让它成为你的

现在,你有机会查看主题并熟悉自己,现在可以在自己的网站上使用它了。 将你已创建的演示版本保持不变,以便将其与新建网站进行比较。

清除演示内容

在你的计算机上创建一个新文件夹,然后将所有主题的文件重新提取到该文件夹​​中。

这一次,进入_posts文件夹并删除其中的所有文件,以便演示文稿被删除。

之后, 从根文件夹中删除任何.md(markdown)文件,这样所有演示页面都不再显示。

如果你愿意,如果你打算用你自己的替换它们,你也可以找到并删除演示内容中使用的任何图像,例如发布特色缩略图。 演示内容图像是否存在可以因主题而异。

如果你的主题确实有要删除的演示图像,但你不确定它们的位置,请检查它应该告诉你的主题文档。 否则,你可能需要浏览主题模板中的代码并从中找出它。

设置网站配置

接下来,你应该从根文件夹打开_config.yml文件并设置主题所需的任何网站范围的变量。 某些设置一般是共同所有_config.yml文件,如,,和其他几个人。 但是,某些设置将特定于给定的主题。titleemaildescription

你在网站配置文件中需要做什么取决于具体主题,所以最好在此处参考主题的文档,以获取有关每个设置的功能的指导。

例如,在Writer主题中,可以使用nav_list变量设置自定义导航菜单来定义菜单项列表。 每个人都有一个标签,永久链接和一个可以在其旁边显示一个Font Awesome图标的类。

相比之下,Astro主题不使用Writer指定  nav_item变量,但有自己的自定义变量,允许你将链接添加到各种社交媒体帐户,以及激活Disqus评论等。

通过你自己主题的_config.yml文件中的变量,直到你把它们全部设置为你的喜好为止。

请注意,如果你在首次使用新网站后进行此类更改,则  jekyll serve需要停止该过程CTRL + C 并重新启动该过程  以查看后续更改的生效。

设置你的主页(如果需要)

有些主题会让你选择从主页的多个布局中进行选择,并设置影响其显示的控件。 如果是这种情况,你可能会发现可以从根文件夹的index.html文件的前端更改设置。

如果有多个布局可用,你可能会发现可以通过修改layout设置的值来选择其他布局 - 你必须参考主题的文档以查看可以使用的值。

在你编辑文件时,请查看是否有其他值应该更改以影响将显示在主页上的内容。 例如,在Writer主题中,可以将自定义标题和说明设置为仅显示在主页上,以及特色图片。

添加你自己的页面

如果你想添加诸如“关于”或“联系人”等页面,现在就是时间。 将.md(子集)文档添加到你要设置的每个页面的网站的根文件夹中。

注意:有些主题设置为将所有页面放置到子文件夹中(通常命名为“页面”),而不是根文件夹,因此请检查主题文档以查看是否属于这种情况。

例如,在这里我添加了“关于网站”页面(about.md), 关于我”作者个人资料页面(author-kezz.md) 和“联系人”页面(contact.md)。

当你添加页面文件时,你会想知道是否有特定的布局模板和/或前端设置,你应该使用它们。 为了找出你可以参考主题的文档,或者复制并粘贴你对主题进行的演示安装中的降价文件,并对它们进行修改。

举个栗子,我在这里复制了Writer演示中现有的作者页面,并将其重命名为我自己,然后编辑它的前端内容。

添加帖子

现在你已经掌握了网站结构设置的基本要素,现在可以添加一些帖子了。 我建议你从演示网站的_posts文件夹复制帖子,并将其粘贴到正在进行的安装中。 然后,你可以  使用你的新文章的日期和固定链接对其进行重命名。 通过重新使用演示文稿,所有必需的前台事宜都将到位,你只需更新它。

类别,标签和其他附加

类别,标签和其他附加 但情况并非总是如此,因此实施可能会因主题而异。 查看你主题的文档,了解你可能需要做什么来处理网站上的类别和代码。

例如,在Writer主题中,对于要使用的每个类别,都需要在名为“category”的网站子文件夹中手动设置文件夹和模板文件。

你可能还会使用你正在使用的特定主题的任何其他额外功能。 请务必仔细阅读你主题的功能列表和文档,以确保你涵盖了包含的所有内容。

在现有网站上切换主题

如果你已经有了一个Jekyll主题网站,并且想要应用一个新的主题,那么你将需要经历与上述几乎相同的过程。 删除演示内容之后会出现差异,而不是添加新的页面和帖子,而只是复制现有网站的内容。

如果你有已存在网页的现有Jekyll网站,请将旧网站中的关联降价文件复制并粘贴到新网站中。 浏览每个页面并更新前面的内容以使用新主题的布局和所需的变量。

然后将你旧的_posts文件夹中的所有帖子文件复制到新文件夹中。 这将会有点乏味,但是你很可能必须逐一浏览每个帖子文件,并使用新主题所需的任何设置更新其前端内容,并删除旧主题所需的任何设置但不再使用。

如果你的文件夹中包含图像和其他媒体,并且你的旧网站上的网页和帖子中使用了该文件夹,请将整个文件夹复制到你的新网站结构中。 你的帖子和页面仍应引用相同的图片位置,使其能够继续显示在你的内容中。

包起来

所以这些是你如何设置Jekyll主题的要点! 这个过程的细节会因主题而异,但你仍然可以在每种情况下遵循这些基本阶段。 让我们快速回顾这些阶段是什么。

  • 通过提取并运行来快速演示新主题: jekyll serve
  • 安装任何缺少的依赖项,以防止提供主题。
  • 浏览演示网站的前端,记下你需要学习使用的功能。
  • 浏览文件结构,特别是  _layouts文件夹,查看可能需要使用的自定义布局和变量。
  • 创建主题的第二次安装并清除演示内容页面,帖子和(可选)图像。
  • 填写_config.yml中的设置  以适合你的网站。
  • 通过编辑根文件夹中的index.html文件中的前端变量来设置主页(如果需要)  。 
  • 创建具有所需前置事项的页面降价文件(或从你的演示网站/现有网站复制并粘贴它们)。
  • 在_posts  文件夹中创建帖子降价文件,并  提供必要的前置事项(或从演示网站/现有网站复制并粘贴)。
  • 在_posts  文件夹中创建帖子降价文件,并  提供必要的前置事项(或从演示网站/现有网站复制并粘贴)。

我希望本教程能够帮助你自信地解决建立具有自定义主题的新Jekyll网站或将现有网站的主题切换到新主题的问题。 

有关使用Jekyll的全面指导,请查看Guy Routledge的课程:

感谢你的阅读,期待下一场再见!

关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.