`
sunxboy
  • 浏览: 2877818 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

使用jekyll 创建页面

 
阅读更多

作为写文章的补充,Jekyll 还可以创建静态页面。利用 Jekyll 带来的便利,你只需要复制文件或文件夹,就是这么简单。

主页

像任何网站的配置一样,需要按约定在站点的要目录下找到 index.html文件,这个文件将被做为主页显示出来。除非你的站点设置了其它的文件作为默认文件,这个文件就将是你的 Jekyll 生成站点的主页。

提示™: 在主页上使用布局

站点上任何 HTML 文件,包括主页,都可以使用布局和 include 中的内容一般共用的内容,如页面的 header 和 footer. 将合适的部分抽出放到布局中。

其它的页面的位置

将 HTML 文件放在哪里取决于你想让它们如何工作。有两种方式可以创建页面:

  • 命名 HTML 文件:将命名好的为页面准备的 HTML 文件放在站点的根目录下。
  • 命名文件夹:在站点的根目录下为每一个页面创建一个文件夹,并把 index.html 文件放在每个文件夹里。

这两种方法都可以工作(并且可以混合使用),它们唯一的区别就是访问的 URL 样式不同。

命名 HTML 文件

增加一个新页面的最简单方法就是把给 HTML 文件起一个适当的名字并放在根目录下。一般来说,一个站点下通常会有:主页 (homepage), 关于 (about), 和一个联系 (contact) 页。根目录下的文件结构和对应生成的 URL 会是下面的样子:

.
|-- _config.yml
|-- _includes/
|-- _layouts/
|-- _posts/
|-- _site/
|-- about.html    # => http://yoursite.com/about.html
|-- index.html    # => http://yoursite.com/
└── contact.html  # => http://yoursite.com/contact.html

命名一个文件夹并包含一个 index.html 文件

上面的方法可以很好的工作,但是有些人不喜欢在 URL 中显示文件的扩展名。用 Jekyll 达到这种效果,你只需要为每个顶级页面创建一个文件夹,并包含一个 inex.html 文件。这样,每个 URL 就将以文件夹的名字作为结尾,网站服务器会将对应的 index.html 展示给用户。下面是一个示例来展示这种结构的样子:

.
├── _config.yml
├── _includes/
├── _layouts/
├── _posts/
├── _site/
├── about/
|   └── index.html  # => http://yoursite.com/about/
├── contact/
|   └── index.html  # => http://yoursite.com/contact/
└── index.html      # => http://yoursite.com/

这种方式可能不适合每个人,对那些喜欢干净 URL 的人这是一种简单有效的方法。最终选择哪种方法完全由你来决定!

分享到:
评论

相关推荐

    Atom-jekyll-atom,在atom中使用jekyll的工具和片段的集合.zip

    Atom-jekyll-atom是专为在Atom文本编辑器中高效使用Jekyll搭建和管理静态博客的集成工具和代码片段集合。这个压缩包包含了名为“jekyll-atom-master”的项目文件,意味着用户可以在这个强大的文本编辑器中获得优化的...

    library-jekyll-theme:使用Jekyll创建数字书架

    标题:“library-jekyll-theme:使用Jekyll创建数字书架” 在Web开发领域,静态站点生成器如Jekyll已经成为了个人博客、项目文档和轻量级网站的首选工具。"library-jekyll-theme"是一个专门设计用于创建数字书架或...

    custom-jekyll-layouts:使用 Jekyll 创建自定义布局的课程计划

    这个“custom-jekyll-layouts”课程计划旨在教你如何在 Jekyll 中创建并使用自定义布局,从而实现个性化网站设计。 ### 一、了解 Jekyll 基础 在开始自定义布局之前,你需要对 Jekyll 的基本结构和工作原理有所...

    Jekyll 博客管理工具

    - **创建新项目**:使用`jekyll new`命令初始化一个新的Jekyll博客项目。 - **编写内容**:在 `_posts` 目录下创建Markdown格式的文章,标题前缀遵循日期格式(如2022-01-01-我的第一篇文章.md)。 - **配置站点**...

    一个现代静态简历模板和主题由Jekyll和GitHub页面提供支持

    标题中的“一个现代静态简历模板和主题由Jekyll和GitHub页面提供支持”表明这是一个基于Jekyll框架构建的静态网站模板,特别设计用于创建个人简历。Jekyll是一个静态站点生成器,它将文本格式的文件(如Markdown或...

    jekylladmin是一个jekyll插件为用户提供了传统CMS风格的来创作内容和管理jekyll网站

    Jekyll 是一个静态站点生成器,它允许开发者使用Markdown、HTML和CSS等静态文件创建博客或者网站。然而,对于不熟悉命令行操作的用户来说,直接编辑这些文件可能较为困难。这时,`jekylladmin` 插件就应运而生,它为...

    jekyll简洁博客主题

    这个主题可能被部署在这个GitHub Pages项目中,用户可以通过克隆或下载这个`abaojin.github.io-master`来使用并自定义这个Jekyll博客主题。 **总结** “jekyll简洁博客主题”是一个以简洁设计为主的Jekyll博客模板...

    jekyll-archive:Jekyll 插件创建一组归档页面

    这个插件为 Jekyll 网站创建了一组存档页面。 奇怪的是,Jekyll 没有为开箱即用的帖子提供基于日期的存档。 例如,如果您有像blog/2014/01/01/title这样的永久链接结构,则 URL hacking 将不起作用,因为转到blog/...

    用jekyll制作高大上的网站(二)——实际应用

    一个标准的Jekyll项目通常包含以下几个部分:`_posts` 存放博客文章,`_layouts` 定义页面布局,`_includes` 用来存储可重用的代码片段,`_site` 是Jekyll生成的最终静态网站,以及 `_config.yml` 文件,用于配置...

    Jekyll.Documentation

    Jekyll 是一个静态站点生成器,由GitHub的开发者Tom Preston-Werner创建。它基于Ruby语言,允许用户通过简单的文本格式(如Markdown)来编写内容,并将其转换为静态HTML和CSS网站。Jekyll的核心理念是“内容优先”,...

    Ruby-AwesomeJekyll一组很棒的Jekyll工具插件主题指南

    1. **模板系统**: Jekyll 使用 Liquid 模板语言来创建动态页面布局和内容。开发者可以通过定义变量、循环和条件语句来构建自定义模板。 2. **Markdown支持**: Jekyll 默认支持Markdown,这是一种轻量级的标记语言,...

    jekyll-demo

    总之,Jekyll 是一个强大且灵活的静态站点生成器,它简化了博客和网站的创建过程,让内容创作者能够专注于写作,而无需深入学习复杂的Web开发技术。通过掌握Markdown语言、理解和利用Jekyll的配置、布局、主题和插件...

    saultyevil.github.io:使用Jekyll创建并使用Gi​​tHub Pages托管的投资组合网站

    【标题】:“saultyevil.github.io:使用Jekyll创建并使用GitHub Pages托管的投资组合网站” 这个标题揭示了几个关键的IT知识点: 1. **Jekyll**:Jekyll是一款静态站点生成器,它将文本格式(如Markdown和Textile...

    jekyllminimaltheme的中文简体化一款极简风格的jekyll主题

    在使用 Jekyll Minimal Theme 创建个人博客或网站时,用户需要熟悉 Jekyll 的基本配置,例如在 `_config.yml` 文件中设置站点元数据,如站点标题、作者信息、URL 等。此外,了解 Markdown 和 Liquid 模板语言的基本...

    3mily.github.io:投资组合网站,使用 Jekyll 创建

    Jekyll 是一个静态站点生成器,特别适合创建博客、个人作品集或简洁的公司网站。该框架以其简洁、高效和易于维护的特点受到了开发者们的欢迎。 **Jekyll 简介** Jekyll 是基于 Ruby 编程语言开发的,它将文本格式...

    简单和响应式的Jekyll主题帮助中心

    这个“简单和响应式的Jekyll主题帮助中心”是为创建一个易于使用、对用户友好的在线帮助中心而设计的。Jekyll的强大之处在于它使用Markdown和YAML等轻量级标记语言,使得内容创作变得简单,同时通过 Liquid 模板引擎...

    Node.js-JekyllNow让你在几分钟内构建Jekyll博客而不用接触命令行

    JekyllNow是一个开源项目,由Barry Clark创建,它使得创建基于Jekyll的博客变得极其简单。Jekyll是一款静态站点生成器,通常需要通过命令行操作来搭建和管理。然而,JekyllNow消除了这个门槛,允许用户无需任何...

    jekyll-demo:使用Jekyll的演示站点

    这个工具特别适合博客、个人网站或者项目文档的创建,因为它允许作者使用Markdown或Textile等简单的标记语言编写内容,然后自动生成静态页面,无需数据库支持。Jekyll 的核心理念是“内容优先”,让开发者可以专注于...

    jekyll-book-3.2.1.p1.pdf

    用户可以通过命令行界面与Jekyll交互,创建新的网站、文章、页面等。 文章是Jekyll网站内容的核心。Jekyll中的文章文件由文本内容和元信息组成,元信息通常位于文件的顶部,遵循YAML格式。发布新文章时,可以直接在...

    静态站点生成器 Jekyll.zip

    2. **模板**:Jekyll 使用 Liquid 模板语言来创建页面布局,这些模板保存在 `_layouts` 目录下。 3. **转换**:Jekyll 将Markdown或Textile转换为HTML,并应用模板,生成静态页面。 4. **输出**:生成的静态文件...

Global site tag (gtag.js) - Google Analytics