作为写文章的补充,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 的人这是一种简单有效的方法。最终选择哪种方法完全由你来决定!
相关推荐
这个插件为 Jekyll 网站创建了一组存档页面。 奇怪的是,Jekyll 没有为开箱即用的帖子提供基于日期的存档。 例如,如果您有像blog/2014/01/01/title这样的永久链接结构,则 URL hacking 将不起作用,因为转到blog/...
它使用 DSS 解析 CSS 中的 JSDoc 样式注释,然后使用 Jekyll 构建页面。 快速开始 npm install grunt dss jekyll serve 更多细节 数据安全系统 使用用 JSDoc 样式注释记录您的 CSS。 你可以使用 CSS、Sass、Less...
startbootstrap-clean-blog-jekyll, 一个全新的博客主题 Jekyll Bootstrap 启动 Bootstrap 博客官方版本博客是一个时尚的,反应性的博客主题,为 Bootstrap 创建,由启动 Bootstrap 。 这个主题有一个博客主页,关于...
使用React,Redux,React-Router创建并使用Webpack进行编译。 使用React制作,可静态和动态投放 为了建立: 用于生产 ./build-prod.sh //for production build 开发: 在不同的终端上运行build-dev和npm来运行...
文件夹克里斯·亨里克(Chris Henrick)的... 为每个项目生成一个markdown文件,并在./work/创建项目组合概述页面。 更新投资组合的工作方式如下: 根据需要编辑_data/work.json 。 cd scripts/ && npm install 从scri
文章和页面的可选大特征图像。 助您入门。 支持 Disqus 评论 查看托管在 GitHub 上的。 入门 So Simple 利用 Sass 和数据文件使定制变得更容易。 这些功能需要 Jekyll 2.x 并且不适用于旧版本的 Jekyll。 要了解...
json-post-layout md : markdown-post-layout--- 注意:Jekyll Layouts 使用提供的扩展和布局创建附加页面,它不会修改原始页面。配置将以下内容添加到您的 yaml front-matter 配置中: ---layouts : json : layout...
同时保持干净和直接的文件夹结构是必须的项目要求该项目使用 Yeoman 生成器作为脚手架工具,并使用 Grunt Jekyll 模块生成静态 HTML 页面。 这里有 NPM 和 Ruby 的完美结合:) 为了能够运行该项目,您需要拥有 , , ...
:warning_selector: :warning_selector: 该项目不再维护 :warning_selector: :warning_selector:卡Jekyll模板...基本设定 (使用命令sudo gem install jekyll ) 分叉克隆您刚创建的仓库。 编辑_config.yml以个性化您的
-Jekyll官方版本 是为创建的时尚,响应式博客主题。 该主题具有博客主页,关于页面,联系页面和示例帖子页面,以及由支持的有效联系表单。... 如果以下页面尚不存在,请创建以下页面(或将现有markdown文件的扩展名从
布局 标题 默认 开始 你好! 欢迎来到我的Github和Stackexchange活动(tik9.github.io) {:: nomarkdown} {:/} 这是什么网站呢?...使用它嵌入html而不安装npm 节点Js api为德语日期格式 开玩笑的测试 {:: nom
Jekyll Paper是一个简单的Jekyll主题,旨在帮助您以最简单的方式创建自己的博客。 不幸的是,Jekyll Paper通过'jekyll-archive'插件实现了类别页面,而GitHub Pages不支持它。 因此,该项目是针对自托管博客的,...
Jekyll URL缩短器 :scissors: :link: 这是用于使用Jekyll和GitHub Pages缩短URL的模板存储库。...创建链接页面 域 从您喜欢的那里获得一个(最好是简短的)域名。 您可能想为您的URL Shortener使用一个。 转到您的DN
此工作流程操作有助于自动为使用Jekyll构建的GitHub页面创建档案。 博客配置 创建一个集合 打开_config.yml文件以编辑您的配置。 将集合添加到如下所示的配置中。 # Archives collections : archives : output :...
例如,从Tumblr导入您的帖子和页面时,在适当的子目录中创建新页面是很烦人且不切实际的,因此,例如/post/123456789/my-slug-that-is-often-incompl ,将其重定向到新帖子网址。 不用处理维护这些页面的重定向,...
jekyll-plugins, 在 flatterline.com 网站上,为用户创建的插件 插件这是 Jekyll static 站点生成器的插件集合。 你可以看到这些插件在 flatterline.com 网站上使用。概述这里存储库包含以下插件:portfolio.rb - 一...
:toolbox: 这是 Jekyll 的一个主题,旨在...该站点使用Jekyll从提供的模板生成静态页面。 为了安装它及其组件,请遵循。 :wrench: 制作 为了简化我们的生活,我们简化了用于构建、发布、服务等的命令。为了实现这一点
在Jekyll站点中使用任意数量的嵌套级别以及每个级别的index.md文件创建目录和内容页面。 然后,使用项目中的逻辑遍历所有页面,并仅过滤当前级别的页面和目录。 这在两个包含文件中进行了处理,这些文件可以进行...
布尔玛为杰基尔制作的通用主题。 创建该主题的目的是仅通过编辑几个JSON文件即可生成网站,这是我使用脚本创建多个... 博客(此页面使用分页,扩展名必须是.html ) 接触 错误 家 文件 邮政 专案 恢复 --- layout: co