From 11b4ae05e51d9d47693aeb1020dcb92d07575a03 Mon Sep 17 00:00:00 2001 From: Tom Johnson Date: Sun, 25 Dec 2016 20:33:09 -0800 Subject: [PATCH 1/6] Improve theme docs See https://github.com/jekyll/jekyll/pull/5630 for more details on the update. @jekyll/documentation @DirtyF --- docs/_docs/themes.md | 606 ++++++++++++++++++++++++++++++++++++++----- 1 file changed, 538 insertions(+), 68 deletions(-) diff --git a/docs/_docs/themes.md b/docs/_docs/themes.md index c7d6d574474..31fdd45793e 100644 --- a/docs/_docs/themes.md +++ b/docs/_docs/themes.md @@ -1,110 +1,580 @@ --- layout: docs -title: Themes -permalink: /docs/themes/ +title: Templates +permalink: /docs/templates/ --- -Jekyll has an extensive theme system, which allows you to leverage community-maintained templates and styles to customize your site's presentation. Jekyll themes package layouts, includes, and stylesheets in a way that can be overridden by your site's content. +Jekyll uses the [Liquid](https://shopify.github.io/liquid/) templating language to +process templates. All of the standard Liquid [tags](https://shopify.github.io/liquid/tags/) and +[filters](https://shopify.github.io/liquid/filters/) are +supported. Jekyll even adds a few handy filters and tags of its own to make +common tasks easier. + +## Filters + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescriptionFilter and Output
+

Relative URL

+

Prepend the baseurl value to the input. Useful if your site is hosted at a subpath rather than the root of the domain.

+ 		+

+ {% raw %}{{ "/assets/style.css" | relative_url }}{% endraw %} +

+

+ /my-baseurl/assets/style.css +

+
+

Absolute URL

+

Prepend the url and baseurl value to the input.

+ 		+

+ {% raw %}{{ "/assets/style.css" | absolute_url }}{% endraw %} +

+

+ http://example.com/my-baseurl/assets/style.css +

+
+

Date to XML Schema

+

Convert a Date into XML Schema (ISO 8601) format.

+ 		+

+ {% raw %}{{ site.time | date_to_xmlschema }}{% endraw %} +

+

+ 2008-11-07T13:07:54-08:00 +

+
+

Date to RFC-822 Format

+

Convert a Date into the RFC-822 format used for RSS feeds.

+ 		+

+ {% raw %}{{ site.time | date_to_rfc822 }}{% endraw %} +

+

+ Mon, 07 Nov 2008 13:07:54 -0800 +

+
+

Date to String

+

Convert a date to short format.

+ 		+

+ {% raw %}{{ site.time | date_to_string }}{% endraw %} +

+

+ 07 Nov 2008 +

+
+

Date to Long String

+

Format a date to long format.

+ 		+

+ {% raw %}{{ site.time | date_to_long_string }}{% endraw %} +

+

+ 07 November 2008 +

+
+

Where

+

Select all the objects in an array where the key has the given value.

+ 		+

+ {% raw %}{{ site.members | where:"graduation_year","2014" }}{% endraw %} +

+
+

Where Expression

+

Select all the objects in an array where the expression is true. Jekyll v3.2.0 & later.

+ 		+

+ {% raw %}{{ site.members | where_exp:"item", +"item.graduation_year == 2014" }}{% endraw %} + {% raw %}{{ site.members | where_exp:"item", +"item.graduation_year < 2014" }}{% endraw %} + {% raw %}{{ site.members | where_exp:"item", +"item.projects contains 'foo'" }}{% endraw %} +

+
+

Group By

+

Group an array's items by a given property.

+ 		+

+ {% raw %}{{ site.members | group_by:"graduation_year" }}{% endraw %} +

+

+ [{"name"=>"2013", "items"=>[...]}, +{"name"=>"2014", "items"=>[...]}] +

+
+

Group By Expression

+

Group an array's items using a Liquid expression.

+ 		+

+ {% raw %}{{ site.members | group_by_exp:"item", +"item.graduation_year | truncate: 3, \"\"" }}{% endraw %} +

+

+ [{"name"=>"201...", "items"=>[...]}, +{"name"=>"200...", "items"=>[...]}] +

+
+

XML Escape

+

Escape some text for use in XML.

+ 		+

+ {% raw %}{{ page.content | xml_escape }}{% endraw %} +

+
+

CGI Escape

+

+ CGI escape a string for use in a URL. Replaces any special characters + with appropriate %XX replacements. +

+ 		+

+ {% raw %}{{ "foo,bar;baz?" | cgi_escape }}{% endraw %} +

+

+ foo%2Cbar%3Bbaz%3F +

+
+

URI Escape

+

+ URI escape a string. +

+ 		+

+ {% raw %}{{ "foo, bar \baz?" | uri_escape }}{% endraw %} +

+

+ foo,%20bar%20%5Cbaz? +

+
+

Number of Words

+

Count the number of words in some text.

+ 		+

+ {% raw %}{{ page.content | number_of_words }}{% endraw %} +

+

+ 1337 +

+
+

Array to Sentence

+

Convert an array into a sentence. Useful for listing tags. Optional argument for connector.

+ 		+

+ {% raw %}{{ page.tags | array_to_sentence_string }}{% endraw %} +

+

+ foo, bar, and baz +

+

+ {% raw %}{{ page.tags | array_to_sentence_string: 'or' }}{% endraw %} +

+

+ foo, bar, or baz +

+
+

Markdownify

+

Convert a Markdown-formatted string into HTML.

+ 		+

+ {% raw %}{{ page.excerpt | markdownify }}{% endraw %} +

+
+

Smartify

+

Convert "quotes" into “smart quotes.”

+ 		+

+ {% raw %}{{ page.title | smartify }}{% endraw %} +

+
+

Converting Sass/SCSS

+

Convert a Sass- or SCSS-formatted string into CSS.

+ 		+

+ {% raw %}{{ some_scss | scssify }}{% endraw %} + {% raw %}{{ some_sass | sassify }}{% endraw %} +

+
+

Slugify

+

Convert a string into a lowercase URL "slug". See below for options.

+ 		+

+ {% raw %}{{ "The _config.yml file" | slugify }}{% endraw %} +

+

+ the-config-yml-file +

+

+ {% raw %}{{ "The _config.yml file" | slugify: 'pretty' }}{% endraw %} +

+

+ the-_config.yml-file +

+
+

Data To JSON

+

Convert Hash or Array to JSON.

+ 		+

+ {% raw %}{{ site.data.projects | jsonify }}{% endraw %} +

+
+

Normalize Whitespace

+

Replace any occurrence of whitespace with a single space.

+ 		+

+ {% raw %}{{ "a \n b" | normalize_whitespace }}{% endraw %} +

+
+

Sort

+

Sort an array. Optional arguments for hashes: 1. property name 2. nils order (first or last).

+ 		+

+ {% raw %}{{ page.tags | sort }}{% endraw %} +

+

+ {% raw %}{{ site.posts | sort: 'author' }}{% endraw %} +

+

+ {% raw %}{{ site.pages | sort: 'title', 'last' }}{% endraw %} +

+
+

Sample

+

Pick a random value from an array. Optional: pick multiple values.

+ 		+

+ {% raw %}{{ site.pages | sample }}{% endraw %} +

+

+ {% raw %}{{ site.pages | sample:2 }}{% endraw %} +

+
+

To Integer

+

Convert a string or boolean to integer.

+ 		+

+ {% raw %}{{ some_var | to_integer }}{% endraw %} +

+
+

Array Filters

+

Push, pop, shift, and unshift elements from an Array.

+

These are NON-DESTRUCTIVE, i.e. they do not mutate the array, but rather make a copy and mutate that.

+ 		+

+ {% raw %}{{ page.tags | push: 'Spokane' }}{% endraw %} +

+

+ ['Seattle', 'Tacoma', 'Spokane'] +

+

+ {% raw %}{{ page.tags | pop }}{% endraw %} +

+

+ ['Seattle'] +

+

+ {% raw %}{{ page.tags | shift }}{% endraw %} +

+

+ ['Tacoma'] +

+

+ {% raw %}{{ page.tags | unshift: "Olympia" }}{% endraw %} +

+

+ ['Olympia', 'Seattle', 'Tacoma'] +

+
+

Inspect

+

Convert an object into its String representation for debugging.

+ 		+

+ {% raw %}{{ some_var | inspect }}{% endraw %} +

+
+
+ +### Options for the `slugify` filter + +The `slugify` filter accepts an option, each specifying what to filter. +The default is `default`. They are as follows (with what they filter): + +- `none`: no characters +- `raw`: spaces +- `default`: spaces and non-alphanumeric characters +- `pretty`: spaces and non-alphanumeric characters except for `._~!$&'()+,;=@` + +## Tags + +### Includes + +If you have small page fragments that you want to include in multiple places on your site, you can use the `include` tag: + +```liquid +{% raw %}{% include footer.html %}{% endraw %} +``` -## Installing a theme +Jekyll expects all include files to be placed in an `_includes` directory at the root of your source directory. In the above example, this will embed the contents of `_includes/footer.html` into the calling file. -1. To install a theme, first, add the theme to your site's `Gemfile`: +For more advanced information on using includes, see [Includes](../includes). - gem 'my-awesome-jekyll-theme' +### Code snippet highlighting -2. Save the changes to your `Gemfile` -3. Run the command `bundle install` to install the theme -4. Finally, activate the theme by adding the following to your site's `_config.yml`: +Jekyll has built in support for syntax highlighting of over 60 languages +thanks to [Rouge](http://rouge.jneen.net). Rouge is the default highlighter +in Jekyll 3 and above. To use it in Jekyll 2, set `highlighter` to `rouge` +and ensure the `rouge` gem is installed properly. - theme: my-awesome-jekyll-theme +Alternatively, you can use [Pygments](http://pygments.org) to highlight +your code snippets. To use Pygments, you must have Python installed on your +system, have the `pygments.rb` gem installed and set `highlighter` to +`pygments` in your site's configuration file. Pygments supports [over 100 +languages](http://pygments.org/languages/) -You can have multiple themes listed in your site's Gemfile, but only one theme can be selected in your site's `_config.yml`. -{: .note .info } +To render a code block with syntax highlighting, surround your code as follows: -## Overriding theme defaults +```liquid +{% raw %} +{% highlight ruby %} +def foo + puts 'foo' +end +{% endhighlight %} +{% endraw %} +``` -Jekyll themes set default layouts, includes, and stylesheets, that can be overridden by your site's content. For example, if your selected theme has a `page` layout, you can override the theme's layout by creating your own `page` layout in the `_layouts` folder (e.g., `_layouts/page.html`). +The argument to the `highlight` tag (`ruby` in the example above) is the +language identifier. To find the appropriate identifier to use for the language +you want to highlight, look for the “short name” on the [Rouge +wiki](https://github.com/jayferd/rouge/wiki/List-of-supported-languages-and-lexers) +or the [Pygments' Lexers page](http://pygments.org/docs/lexers/). + +#### Line numbers + +There is a second argument to `highlight` called `linenos` that is optional. +Including the `linenos` argument will force the highlighted code to include line +numbers. For instance, the following code block would include line numbers next +to each line: + +```liquid +{% raw %} +{% highlight ruby linenos %} +def foo + puts 'foo' +end +{% endhighlight %} +{% endraw %} +``` -Jekyll will look first to your site's content, before looking to the theme's defaults, for any requested file in the following folders: +#### Stylesheets for syntax highlighting -* `/assets` -* `/_layouts` -* `/_includes` -* `/_sass` +In order for the highlighting to show up, you’ll need to include a highlighting +stylesheet. For an example stylesheet you can look at +[syntax.css](https://github.com/mojombo/tpw/tree/master/css/syntax.css). These +are the same styles as used by GitHub and you are free to use them for your own +site. If you use `linenos`, you might want to include an additional CSS class +definition for the `.lineno` class in `syntax.css` to distinguish the line +numbers from the highlighted code. -Refer to your selected theme's documentation and source repository for more information on what files you can override. -{: .note .info} +### Gist -To locate theme's files on your computer, run `bundle show` followed by -the name of the theme's gem, e.g. `bundle show minima` for default Jekyll's -theme. Then copy the files you want to override, from the returned path to your root folder. +Use the `gist` tag to easily embed a GitHub Gist onto your site. This works +with public or secret gists: -## Creating a theme +```liquid +{% raw %} +{% gist parkr/931c1c8d465a04042403 %} +{% endraw %} +``` -Jekyll themes are distributed as Ruby gems. Don't worry, Jekyll will help you scaffold a new theme with the `new-theme` command. Just run `jekyll new-theme` with the theme name as an argument: +You may also optionally specify the filename in the gist to display: -```sh -jekyll new-theme my-awesome-theme - create /path/to/my-awesome-theme/_layouts - create /path/to/my-awesome-theme/_includes - create /path/to/my-awesome-theme/_sass - create /path/to/my-awesome-theme/_layouts/page.html - create /path/to/my-awesome-theme/_layouts/post.html - create /path/to/my-awesome-theme/_layouts/default.html - create /path/to/my-awesome-theme/Gemfile - create /path/to/my-awesome-theme/my-awesome-theme.gemspec - create /path/to/my-awesome-theme/README.md - create /path/to/my-awesome-theme/LICENSE.txt - initialize /path/to/my-awesome-theme/.git - create /path/to/my-awesome-theme/.gitignore -Your new Jekyll theme, my-awesome-theme, is ready for you in /path/to/my-awesome-theme! -For help getting started, read /path/to/my-awesome-theme/README.md. +```liquid +{% raw %} +{% gist parkr/931c1c8d465a04042403 jekyll-private-gist.markdown %} +{% endraw %} ``` -Add your template files in the corresponding folders, complete the `.gemspec` and the README files according to your needs. - -### Layouts and includes +To use the `gist` tag, you'll need to add the +[jekyll-gist](https://github.com/jekyll/jekyll-gist) gem to your project. -Theme layouts and includes work just like they work in any Jekyll site. Place layouts in your theme's `/_layouts` folder, and place includes in your themes `/_includes` folder. +## Links -For example, if your theme has a `/_layouts/page.html` file, and a page has `layout: page` in its YAML front matter, Jekyll will first look to the site's `_layouts` folder for a the `page` layout, and if none exists, will use your theme's `page` layout. +### Linking to pages {#link} -### Assets +To link to a post, a page, collection item, or file, the `link` tag will generate the correct permalink URL for the path you specify. For example, if you use the `link` tag to link to `mypage.html`, even if you change your permalink style to include the file extension or omit it, the URL formed by the `link` tag will always be valid. -Any file in `/assets` will be copied over to the user's site upon build unless they have a file with the same relative path. You may ship any kind of asset here: SCSS, an image, a webfont, etc. These files behave just like pages and static files in Jekyll: if the file has [YAML front matter]({{ site.baseurl }}/docs/frontmatter/) at the top, then it will be rendered. If it does not have YAML front matter, it will simply be copied over into the resulting site. This allows theme creators to ship a default `/assets/styles.scss` file which their layouts can depend on as `/assets/styles.css`. +You must include the file's original extension when using the `link` tag. Here are some examples: -All files in `/assets` will be output into the compiled site in the `/assets` folder just as you'd expect from using Jekyll on your sites. +```liquid +{% raw %} +{{ site.baseurl }}{% link _collection/name-of-document.md %} +{{ site.baseurl }}{% link _posts/2016-07-26-name-of-post.md %} +{{ site.baseurl }}{% link news/index.html %} +{{ site.baseurl }}{% link /assets/files/doc.pdf %} +{% endraw %} +``` -### Stylesheets +You can also use the `link` tag to create a link in Markdown as follows: -Your theme's stylesheets should be placed in your theme's `/_sass` folder, again, just as you would when authoring a Jekyll site. Your theme's styles can be included in the user's stylesheet using the `@import` directive. +```liquid +{% raw %} +[Link to a document]({{ site.baseurl }}{% link _collection/name-of-document.md %}) +[Link to a post]({{ site.baseurl }}{% link _posts/2016-07-26-name-of-post.md %}) +[Link to a page]({{ site.baseurl }}{% link news/index.html %}) +[Link to a file]({{ site.baseurl }}{% link /assets/files/doc.pdf %}) +{% endraw %} +``` -### Documenting your theme +Including `{% raw %}{{site.baseurl}}{% endraw %}` is optional — it depends on whether you want the link to be absolute or root-relative. -Your theme should include a `/README.md` file, which explains how site authors can install and use your theme. What layouts are included? What includes? Do they need to add anything special to their site's configuration file? +The path to the post, page, or collection is defined as the path relative to the root directory (where your config file is) to the file, not the path from your existing page to the other page. -### Adding a screenshot +For example, suppose you're creating a link `page_a.md` (stored in `pages/folder1/folder2`) to `page_b.md` (stored in `pages/folder1`). Your path in the link would not be `../page_b.html`. Instead, it would be `/pages/folder1/page_b.md`. -Themes are visual. Show users what your theme looks like by including a screenshot as `/screenshot.png` within your theme's repository where it can be retrieved programatically. You can also include this screenshot within your theme's documentation. +If you're unsure of the path, add `{% raw %}{{page.path}}{% endraw %}` to the page and it will display the path. -### Previewing your theme +One major benefit of using the `link` tag is link validation. If the link doesn't exist, Jekyll won't build your site. This is a good thing, as it will alert you to a broken link so you can fix it (rather than allowing you to build and deploy a site with broken links). -To preview your theme as you're authoring it, it may be helpful to add dummy content in, for example, `/index.html` and `/page.html` files. This will allow you to use the `jekyll build` and `jekyll serve` commands to preview your theme, just as you'd preview a Jekyll site. +Note you cannot add filters to `link` tags. For example, you cannot append a string using Liquid filters, such as `{% raw %}{% link mypage.html | append: "#section1" %} {% endraw %}`. To link to sections on a page, you will need to use regular HTML or Markdown linking techniques. -If you do preview your theme locally, be sure to add `/_site` to your theme's `.gitignore` file to prevent the compiled site from also being included when you distribute your theme. -{: .info .note} +### Linking to posts -### Publishing your theme +If you want like to include a link to a post on your site, the `post_url` tag will generate the correct permalink URL for the post you specify. -Themes are published via [RubyGems.org](https://rubygems.org). You'll need a RubyGems account, which you can [create for free](https://rubygems.org/sign_up). +```liquid +{% raw %} +{{ site.baseurl }}{% post_url 2010-07-21-name-of-post %} +{% endraw %} +``` -1. First, package your theme, by running the following command, replacing `my-awesome-jekyll-theme` with the name of your theme: +If you organize your posts in subdirectories, you need to include subdirectory path to the post: - gem build my-awesome-jekyll-theme.gemspec +```liquid +{% raw %} +{{ site.baseurl }}{% post_url /subdir/2010-07-21-name-of-post %} +{% endraw %} +``` -2. Next, push your packaged theme up to the RubyGems service, by running the following command, again replacing `my-awesome-jekyll-theme` with the name of your theme: +There is no need to include the file extension when using the `post_url` tag. - gem push my-awesome-jekyll-theme-*.gem +You can also use this tag to create a link to a post in Markdown as follows: -3. To release a new version of your theme, simply update the version number in the gemspec file, ( `my-awesome-jekyll-theme.gemspec` in this example ), and then repeat Steps 1 & 2 above. -We recommend that you follow [Semantic Versioning](http://semver.org/) while bumping your theme-version. +```liquid +{% raw %} +[Name of Link]({{ site.baseurl }}{% post_url 2010-07-21-name-of-post %}) +{% endraw %} +``` From a6d357050a33b95eb448c962d7a6a6279c9e3de6 Mon Sep 17 00:00:00 2001 From: Tom Johnson Date: Sun, 25 Dec 2016 23:03:22 -0800 Subject: [PATCH 2/6] Updated to correct content I previously had pasted in the wrong page here. Now it's fixed. --- docs/_docs/themes.md | 670 +++++++++---------------------------------- 1 file changed, 133 insertions(+), 537 deletions(-) diff --git a/docs/_docs/themes.md b/docs/_docs/themes.md index 31fdd45793e..ddcc36533ff 100644 --- a/docs/_docs/themes.md +++ b/docs/_docs/themes.md @@ -1,580 +1,176 @@ --- layout: docs -title: Templates -permalink: /docs/templates/ +title: Themes +permalink: /docs/themes/ --- -Jekyll uses the [Liquid](https://shopify.github.io/liquid/) templating language to -process templates. All of the standard Liquid [tags](https://shopify.github.io/liquid/tags/) and -[filters](https://shopify.github.io/liquid/filters/) are -supported. Jekyll even adds a few handy filters and tags of its own to make -common tasks easier. - -## Filters - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DescriptionFilter and Output
-

Relative URL

-

Prepend the baseurl value to the input. Useful if your site is hosted at a subpath rather than the root of the domain.

- 		-

- {% raw %}{{ "/assets/style.css" | relative_url }}{% endraw %} -

-

- /my-baseurl/assets/style.css -

-
-

Absolute URL

-

Prepend the url and baseurl value to the input.

- 		-

- {% raw %}{{ "/assets/style.css" | absolute_url }}{% endraw %} -

-

- http://example.com/my-baseurl/assets/style.css -

-
-

Date to XML Schema

-

Convert a Date into XML Schema (ISO 8601) format.

- 		-

- {% raw %}{{ site.time | date_to_xmlschema }}{% endraw %} -

-

- 2008-11-07T13:07:54-08:00 -

-
-

Date to RFC-822 Format

-

Convert a Date into the RFC-822 format used for RSS feeds.

- 		-

- {% raw %}{{ site.time | date_to_rfc822 }}{% endraw %} -

-

- Mon, 07 Nov 2008 13:07:54 -0800 -

-
-

Date to String

-

Convert a date to short format.

- 		-

- {% raw %}{{ site.time | date_to_string }}{% endraw %} -

-

- 07 Nov 2008 -

-
-

Date to Long String

-

Format a date to long format.

- 		-

- {% raw %}{{ site.time | date_to_long_string }}{% endraw %} -

-

- 07 November 2008 -

-
-

Where

-

Select all the objects in an array where the key has the given value.

- 		-

- {% raw %}{{ site.members | where:"graduation_year","2014" }}{% endraw %} -

-
-

Where Expression

-

Select all the objects in an array where the expression is true. Jekyll v3.2.0 & later.

- 		-

- {% raw %}{{ site.members | where_exp:"item", -"item.graduation_year == 2014" }}{% endraw %} - {% raw %}{{ site.members | where_exp:"item", -"item.graduation_year < 2014" }}{% endraw %} - {% raw %}{{ site.members | where_exp:"item", -"item.projects contains 'foo'" }}{% endraw %} -

-
-

Group By

-

Group an array's items by a given property.

- 		-

- {% raw %}{{ site.members | group_by:"graduation_year" }}{% endraw %} -

-

- [{"name"=>"2013", "items"=>[...]}, -{"name"=>"2014", "items"=>[...]}] -

-
-

Group By Expression

-

Group an array's items using a Liquid expression.

- 		-

- {% raw %}{{ site.members | group_by_exp:"item", -"item.graduation_year | truncate: 3, \"\"" }}{% endraw %} -

-

- [{"name"=>"201...", "items"=>[...]}, -{"name"=>"200...", "items"=>[...]}] -

-
-

XML Escape

-

Escape some text for use in XML.

- 		-

- {% raw %}{{ page.content | xml_escape }}{% endraw %} -

-
-

CGI Escape

-

- CGI escape a string for use in a URL. Replaces any special characters - with appropriate %XX replacements. -

- 		-

- {% raw %}{{ "foo,bar;baz?" | cgi_escape }}{% endraw %} -

-

- foo%2Cbar%3Bbaz%3F -

-
-

URI Escape

-

- URI escape a string. -

- 		-

- {% raw %}{{ "foo, bar \baz?" | uri_escape }}{% endraw %} -

-

- foo,%20bar%20%5Cbaz? -

-
-

Number of Words

-

Count the number of words in some text.

- 		-

- {% raw %}{{ page.content | number_of_words }}{% endraw %} -

-

- 1337 -

-
-

Array to Sentence

-

Convert an array into a sentence. Useful for listing tags. Optional argument for connector.

- 		-

- {% raw %}{{ page.tags | array_to_sentence_string }}{% endraw %} -

-

- foo, bar, and baz -

-

- {% raw %}{{ page.tags | array_to_sentence_string: 'or' }}{% endraw %} -

-

- foo, bar, or baz -

-
-

Markdownify

-

Convert a Markdown-formatted string into HTML.

- 		-

- {% raw %}{{ page.excerpt | markdownify }}{% endraw %} -

-
-

Smartify

-

Convert "quotes" into “smart quotes.”

- 		-

- {% raw %}{{ page.title | smartify }}{% endraw %} -

-
-

Converting Sass/SCSS

-

Convert a Sass- or SCSS-formatted string into CSS.

- 		-

- {% raw %}{{ some_scss | scssify }}{% endraw %} - {% raw %}{{ some_sass | sassify }}{% endraw %} -

-
-

Slugify

-

Convert a string into a lowercase URL "slug". See below for options.

- 		-

- {% raw %}{{ "The _config.yml file" | slugify }}{% endraw %} -

-

- the-config-yml-file -

-

- {% raw %}{{ "The _config.yml file" | slugify: 'pretty' }}{% endraw %} -

-

- the-_config.yml-file -

-
-

Data To JSON

-

Convert Hash or Array to JSON.

- 		-

- {% raw %}{{ site.data.projects | jsonify }}{% endraw %} -

-
-

Normalize Whitespace

-

Replace any occurrence of whitespace with a single space.

- 		-

- {% raw %}{{ "a \n b" | normalize_whitespace }}{% endraw %} -

-
-

Sort

-

Sort an array. Optional arguments for hashes: 1. property name 2. nils order (first or last).

- 		-

- {% raw %}{{ page.tags | sort }}{% endraw %} -

-

- {% raw %}{{ site.posts | sort: 'author' }}{% endraw %} -

-

- {% raw %}{{ site.pages | sort: 'title', 'last' }}{% endraw %} -

-
-

Sample

-

Pick a random value from an array. Optional: pick multiple values.

- 		-

- {% raw %}{{ site.pages | sample }}{% endraw %} -

-

- {% raw %}{{ site.pages | sample:2 }}{% endraw %} -

-
-

To Integer

-

Convert a string or boolean to integer.

- 		-

- {% raw %}{{ some_var | to_integer }}{% endraw %} -

-
-

Array Filters

-

Push, pop, shift, and unshift elements from an Array.

-

These are NON-DESTRUCTIVE, i.e. they do not mutate the array, but rather make a copy and mutate that.

- 		-

- {% raw %}{{ page.tags | push: 'Spokane' }}{% endraw %} -

-

- ['Seattle', 'Tacoma', 'Spokane'] -

-

- {% raw %}{{ page.tags | pop }}{% endraw %} -

-

- ['Seattle'] -

-

- {% raw %}{{ page.tags | shift }}{% endraw %} -

-

- ['Tacoma'] -

-

- {% raw %}{{ page.tags | unshift: "Olympia" }}{% endraw %} -

-

- ['Olympia', 'Seattle', 'Tacoma'] -

-
-

Inspect

-

Convert an object into its String representation for debugging.

- 		-

- {% raw %}{{ some_var | inspect }}{% endraw %} -

-
-
- -### Options for the `slugify` filter - -The `slugify` filter accepts an option, each specifying what to filter. -The default is `default`. They are as follows (with what they filter): - -- `none`: no characters -- `raw`: spaces -- `default`: spaces and non-alphanumeric characters -- `pretty`: spaces and non-alphanumeric characters except for `._~!$&'()+,;=@` - -## Tags - -### Includes - -If you have small page fragments that you want to include in multiple places on your site, you can use the `include` tag: - -```liquid -{% raw %}{% include footer.html %}{% endraw %} +Jekyll has an extensive theme system that allows you to leverage community-maintained templates and styles to customize your site's presentation. Jekyll themes package up layouts, includes, and stylesheets in a way that can be overridden by your site's content. + +## Understanding gem-based themes + +When you [create a new Jekyll site](/docs/quickstart) (by running the `jekyll new ` command), Jekyll installs a gem-based theme called [Minima](https://github.com/jekyll/minima). + +With gem-based themes, some of the theme directories and files are stored in the gem, hidden from view in your Jekyll project. As a result, the files and directories shown for your site are only part of all the theme's files. In the case of Minima, you see only the following: + +``` +├── Gemfile +├── Gemfile.lock +├── _config.yml +├── _posts +│   └── 2016-12-04-welcome-to-jekyll.markdown +├── about.md +└── index.md ``` -Jekyll expects all include files to be placed in an `_includes` directory at the root of your source directory. In the above example, this will embed the contents of `_includes/footer.html` into the calling file. +The `Gemfile` and `Gemfile.lock` files are used by Bundler to keep track of the required gems and gem versions you need to build your Jekyll site. -For more advanced information on using includes, see [Includes](../includes). +Gem-based themes make it easy for theme developers to make updates available to anyone who has the theme gem. When there's an update, theme developers push the update to RubyGems. -### Code snippet highlighting +If you have the theme gem, you can (if you desire) run `bundle update` to update all gems in your project. Or you can run `bundle update `, replacing `` with the theme name, such as `minima`, to just update the theme gem. Any new files or updates the theme developer has made (such as to stylesheets or includes) will be pulled into your project automatically. -Jekyll has built in support for syntax highlighting of over 60 languages -thanks to [Rouge](http://rouge.jneen.net). Rouge is the default highlighter -in Jekyll 3 and above. To use it in Jekyll 2, set `highlighter` to `rouge` -and ensure the `rouge` gem is installed properly. +The goal of gem-based themes is to allow you to get all the benefits of a robust, continually updated theme without having all the theme's files getting in your way and over-complicating what might be your primary focus: creating content. -Alternatively, you can use [Pygments](http://pygments.org) to highlight -your code snippets. To use Pygments, you must have Python installed on your -system, have the `pygments.rb` gem installed and set `highlighter` to -`pygments` in your site's configuration file. Pygments supports [over 100 -languages](http://pygments.org/languages/) +## Overriding theme defaults -To render a code block with syntax highlighting, surround your code as follows: +Jekyll themes set default layouts, includes, and stylesheets. However, you can override any of the theme defaults with your own site content. For example, if your selected theme has a `page` layout, you can override the theme's layout by creating your own `page` layout in the `_layouts` directory (for example, `_layouts/page.html`). -```liquid -{% raw %} -{% highlight ruby %} -def foo - puts 'foo' -end -{% endhighlight %} -{% endraw %} -``` +Jekyll will look first to your site's content before looking to the theme's defaults for any requested file in the following folders: -The argument to the `highlight` tag (`ruby` in the example above) is the -language identifier. To find the appropriate identifier to use for the language -you want to highlight, look for the “short name” on the [Rouge -wiki](https://github.com/jayferd/rouge/wiki/List-of-supported-languages-and-lexers) -or the [Pygments' Lexers page](http://pygments.org/docs/lexers/). - -#### Line numbers - -There is a second argument to `highlight` called `linenos` that is optional. -Including the `linenos` argument will force the highlighted code to include line -numbers. For instance, the following code block would include line numbers next -to each line: - -```liquid -{% raw %} -{% highlight ruby linenos %} -def foo - puts 'foo' -end -{% endhighlight %} -{% endraw %} -``` +* `/assets` +* `/_layouts` +* `/_includes` +* `/_sass` -#### Stylesheets for syntax highlighting +Refer to your selected theme's documentation and source repository for more information on what files you can override. +{: .note .info} -In order for the highlighting to show up, you’ll need to include a highlighting -stylesheet. For an example stylesheet you can look at -[syntax.css](https://github.com/mojombo/tpw/tree/master/css/syntax.css). These -are the same styles as used by GitHub and you are free to use them for your own -site. If you use `linenos`, you might want to include an additional CSS class -definition for the `.lineno` class in `syntax.css` to distinguish the line -numbers from the highlighted code. +To locate theme's files on your computer: -### Gist +1. Run `bundle show` followed by the name of the theme's gem, e.g., `bundle show minima` for default Jekyll's theme. -Use the `gist` tag to easily embed a GitHub Gist onto your site. This works -with public or secret gists: + The location of the theme gem is returned. For example, minima is located in `/usr/local/lib/ruby/gems/2.3.0/gems/minima-2.1.0` on a Mac. -```liquid -{% raw %} -{% gist parkr/931c1c8d465a04042403 %} -{% endraw %} -``` +2. Change to the directory's location and open the directory in Finder or Explorer: -You may also optionally specify the filename in the gist to display: + ``` + cd /usr/local/lib/ruby/gems/2.3.0/gems/minima-2.1.0 + open . + # for Windows, use "explorer ." + ``` -```liquid -{% raw %} -{% gist parkr/931c1c8d465a04042403 jekyll-private-gist.markdown %} -{% endraw %} -``` + A Finder or Explorer window opens showing the theme's files and directories. -To use the `gist` tag, you'll need to add the -[jekyll-gist](https://github.com/jekyll/jekyll-gist) gem to your project. + With a clear understanding of the theme's files, you can now override any theme file by creating a similarly named file in your Jekyll site directory. -## Links +If you want to get rid of the theme gem altogether, copy the files from the theme gem's directory into your Jekyll site directory (for example, copy them to `/myblog` if you created your Jekyll site at `/myblog`). -### Linking to pages {#link} +Then modify the Gemfile and configuration to remove references to the theme gem. For example, to remove Minima: +* Open `Gemfile` and remove `gem "minima", "~> 2.0"`. +* Open `_config.yml` and remove `theme: minima`. -To link to a post, a page, collection item, or file, the `link` tag will generate the correct permalink URL for the path you specify. For example, if you use the `link` tag to link to `mypage.html`, even if you change your permalink style to include the file extension or omit it, the URL formed by the `link` tag will always be valid. +Now `bundle update` will no longer get updates for the theme gem. -You must include the file's original extension when using the `link` tag. Here are some examples: +## Using themes other than the default {#installing-a-theme} -```liquid -{% raw %} -{{ site.baseurl }}{% link _collection/name-of-document.md %} -{{ site.baseurl }}{% link _posts/2016-07-26-name-of-post.md %} -{{ site.baseurl }}{% link news/index.html %} -{{ site.baseurl }}{% link /assets/files/doc.pdf %} -{% endraw %} -``` +The `jekyll new ` command isn't the only way to create a new Jekyll site with a gem-based theme. You can also find gem-based themes online and incorporate them into your Jekyll project. To install a gem-based theme: -You can also use the `link` tag to create a link in Markdown as follows: +1. Add the theme to your site's `Gemfile`: -```liquid -{% raw %} -[Link to a document]({{ site.baseurl }}{% link _collection/name-of-document.md %}) -[Link to a post]({{ site.baseurl }}{% link _posts/2016-07-26-name-of-post.md %}) -[Link to a page]({{ site.baseurl }}{% link news/index.html %}) -[Link to a file]({{ site.baseurl }}{% link /assets/files/doc.pdf %}) -{% endraw %} -``` + ``` + gem 'my-awesome-jekyll-theme' + ``` -Including `{% raw %}{{site.baseurl}}{% endraw %}` is optional — it depends on whether you want the link to be absolute or root-relative. +3. Install the theme: -The path to the post, page, or collection is defined as the path relative to the root directory (where your config file is) to the file, not the path from your existing page to the other page. + ``` + bundle install + ``` -For example, suppose you're creating a link `page_a.md` (stored in `pages/folder1/folder2`) to `page_b.md` (stored in `pages/folder1`). Your path in the link would not be `../page_b.html`. Instead, it would be `/pages/folder1/page_b.md`. +3. Add the following to your site's `_config.yml` to activate the theme: -If you're unsure of the path, add `{% raw %}{{page.path}}{% endraw %}` to the page and it will display the path. + ``` + theme: my-awesome-jekyll-theme + ``` -One major benefit of using the `link` tag is link validation. If the link doesn't exist, Jekyll won't build your site. This is a good thing, as it will alert you to a broken link so you can fix it (rather than allowing you to build and deploy a site with broken links). +5. Build your site: -Note you cannot add filters to `link` tags. For example, you cannot append a string using Liquid filters, such as `{% raw %}{% link mypage.html | append: "#section1" %} {% endraw %}`. To link to sections on a page, you will need to use regular HTML or Markdown linking techniques. + ``` + bundle exec jekyll serve + ``` -### Linking to posts +You can have multiple themes listed in your site's `Gemfile`, but only one theme can be selected in your site's `_config.yml`. +{: .note .info } -If you want like to include a link to a post on your site, the `post_url` tag will generate the correct permalink URL for the post you specify. +If you're publishing your Jekyll site on [Github Pages](https://pages.github.com/), note that Github Pages supports only some gem-based themes. See [Supported Themes](https://pages.github.com/themes/) in Github's documentation to see which themes are supported. -```liquid -{% raw %} -{{ site.baseurl }}{% post_url 2010-07-21-name-of-post %} -{% endraw %} -``` +## Creating your own gem-based theme + +If you're a Jekyll theme developer (rather than just a consumer of themes), you can package up your theme in RubyGems and allow users to install it through Bundler. -If you organize your posts in subdirectories, you need to include subdirectory path to the post: +If you're unfamiliar with distributing ruby gems, don't worry. Jekyll will help you scaffold a new theme with the `new-theme` command. Just run `jekyll new-theme` with the theme name as an argument: -```liquid -{% raw %} -{{ site.baseurl }}{% post_url /subdir/2010-07-21-name-of-post %} -{% endraw %} +```sh +jekyll new-theme my-awesome-theme + create /path/to/my-awesome-theme/_layouts + create /path/to/my-awesome-theme/_includes + create /path/to/my-awesome-theme/_sass + create /path/to/my-awesome-theme/_layouts/page.html + create /path/to/my-awesome-theme/_layouts/post.html + create /path/to/my-awesome-theme/_layouts/default.html + create /path/to/my-awesome-theme/Gemfile + create /path/to/my-awesome-theme/my-awesome-theme.gemspec + create /path/to/my-awesome-theme/README.md + create /path/to/my-awesome-theme/LICENSE.txt + initialize /path/to/my-awesome-theme/.git + create /path/to/my-awesome-theme/.gitignore +Your new Jekyll theme, my-awesome-theme, is ready for you in /path/to/my-awesome-theme! +For help getting started, read /path/to/my-awesome-theme/README.md. ``` -There is no need to include the file extension when using the `post_url` tag. +Add your template files in the corresponding folders. Then complete the `.gemspec` and the README files according to your needs. -You can also use this tag to create a link to a post in Markdown as follows: +### Layouts and includes -```liquid -{% raw %} -[Name of Link]({{ site.baseurl }}{% post_url 2010-07-21-name-of-post %}) -{% endraw %} -``` +Theme layouts and includes work just like they work in any Jekyll site. Place layouts in your theme's `/_layouts` folder, and place includes in your themes `/_includes` folder. + +For example, if your theme has a `/_layouts/page.html` file, and a page has `layout: page` in its YAML front matter, Jekyll will first look to the site's `_layouts` folder for a the `page` layout, and if none exists, will use your theme's `page` layout. + +### Assets + +Any file in `/assets` will be copied over to the user's site upon build unless they have a file with the same relative path. You can ship any kind of asset here: SCSS, an image, a webfont, etc. These files behave just like pages and static files in Jekyll: if the file has [YAML front matter](../docs/frontmatter/) at the top, then it will be rendered. If it does not have YAML front matter, it will simply be copied over into the resulting site. This allows theme creators to ship a default `/assets/styles.scss` file which their layouts can depend on as `/assets/styles.css`. + +All files in `/assets` will be output into the compiled site in the `/assets` folder just as you'd expect from using Jekyll on your sites. + +### Stylesheets + +Your theme's stylesheets should be placed in your theme's `/_sass` folder, again, just as you would when authoring a Jekyll site. Your theme's styles can be included in the user's stylesheet using the `@import` directive. + +### Documenting your theme + +Your theme should include a `/README.md` file, which explains how site authors can install and use your theme. What layouts are included? What includes? Do they need to add anything special to their site's configuration file? + +### Adding a screenshot + +Themes are visual. Show users what your theme looks like by including a screenshot as `/screenshot.png` within your theme's repository where it can be retrieved programatically. You can also include this screenshot within your theme's documentation. + +### Previewing your theme + +To preview your theme as you're authoring it, it may be helpful to add dummy content in, for example, `/index.html` and `/page.html` files. This will allow you to use the `jekyll build` and `jekyll serve` commands to preview your theme, just as you'd preview a Jekyll site. + +If you do preview your theme locally, be sure to add `/_site` to your theme's `.gitignore` file to prevent the compiled site from also being included when you distribute your theme. +{: .info .note} + +### Publishing your theme + +Themes are published via [RubyGems.org](https://rubygems.org). You'll need a RubyGems account, which you can [create for free](https://rubygems.org/sign_up). + +1. First, package your theme, by running the following command, replacing `my-awesome-jekyll-theme` with the name of your theme: + + gem build my-awesome-jekyll-theme.gemspec + +2. Next, push your packaged theme up to the RubyGems service, by running the following command, again replacing `my-awesome-jekyll-theme` with the name of your theme: + + gem push my-awesome-jekyll-theme-*.gem + +3. To release a new version of your theme, simply update the version number in the gemspec file, ( `my-awesome-jekyll-theme.gemspec` in this example ), and then repeat Steps 1 & 2 above. +We recommend that you follow [Semantic Versioning](http://semver.org/) while bumping your theme-version. From 938388a6bea57b042ed5ac60446f16fae579f7d2 Mon Sep 17 00:00:00 2001 From: Tom Johnson Date: Mon, 26 Dec 2016 20:31:54 -0800 Subject: [PATCH 3/6] Made updates requested by others in PR I made various updates as requested by the reviewers. --- docs/_docs/themes.md | 60 ++++++++++++++++++++++++++++++++------------ 1 file changed, 44 insertions(+), 16 deletions(-) diff --git a/docs/_docs/themes.md b/docs/_docs/themes.md index ddcc36533ff..011ead6e411 100644 --- a/docs/_docs/themes.md +++ b/docs/_docs/themes.md @@ -8,9 +8,11 @@ Jekyll has an extensive theme system that allows you to leverage community-maint ## Understanding gem-based themes -When you [create a new Jekyll site](/docs/quickstart) (by running the `jekyll new ` command), Jekyll installs a gem-based theme called [Minima](https://github.com/jekyll/minima). +When you [create a new Jekyll site](/docs/quickstart) (by running the `jekyll new ` command), Jekyll installs a site that uses a gem-based theme called [Minima](https://github.com/jekyll/minima). -With gem-based themes, some of the theme directories and files are stored in the gem, hidden from view in your Jekyll project. As a result, the files and directories shown for your site are only part of all the theme's files. In the case of Minima, you see only the following: +With gem-based themes, some of the site's directories (such as the `assets`, `_layouts`, `_includes`, and `_sass` directories) are stored in the theme-gem, hidden from your immediate view. Yet all of the necessary directories will be read and processed during Jekyll's build process. + +In the case of Minima, you see only the following files in your Jekyll site directory: ``` ├── Gemfile @@ -32,7 +34,9 @@ The goal of gem-based themes is to allow you to get all the benefits of a robust ## Overriding theme defaults -Jekyll themes set default layouts, includes, and stylesheets. However, you can override any of the theme defaults with your own site content. For example, if your selected theme has a `page` layout, you can override the theme's layout by creating your own `page` layout in the `_layouts` directory (for example, `_layouts/page.html`). +Jekyll themes set default layouts, includes, and stylesheets. However, you can override any of the theme defaults with your own site content. + +For example, if your selected theme has a `page` layout, you can override the theme's layout by creating your own `page` layout in the `_layouts` directory (for example, `_layouts/page.html`). Jekyll will look first to your site's content before looking to the theme's defaults for any requested file in the following folders: @@ -62,7 +66,11 @@ To locate theme's files on your computer: With a clear understanding of the theme's files, you can now override any theme file by creating a similarly named file in your Jekyll site directory. -If you want to get rid of the theme gem altogether, copy the files from the theme gem's directory into your Jekyll site directory (for example, copy them to `/myblog` if you created your Jekyll site at `/myblog`). +## Converting gem-based themes to regular themes + +Suppose you want to get rid of the gem-based theme and convert it to a regular theme, where all files are present in your Jekyll site directory, with nothing stored in the theme gem. + +To do this, copy the files from the theme gem's directory into your Jekyll site directory. (For example, copy them to `/myblog` if you created your Jekyll site at `/myblog`. See the previous section for details.) Then modify the Gemfile and configuration to remove references to the theme gem. For example, to remove Minima: * Open `Gemfile` and remove `gem "minima", "~> 2.0"`. @@ -70,31 +78,35 @@ Then modify the Gemfile and configuration to remove references to the theme gem. Now `bundle update` will no longer get updates for the theme gem. -## Using themes other than the default {#installing-a-theme} +## Installing a gem-based theme {#installing-a-theme} + +The `jekyll new ` command isn't the only way to create a new Jekyll site with a gem-based theme. You can also find gem-based themes online and incorporate them into your Jekyll project. -The `jekyll new ` command isn't the only way to create a new Jekyll site with a gem-based theme. You can also find gem-based themes online and incorporate them into your Jekyll project. To install a gem-based theme: +For example, search for [jekyll-theme on RubyGems](https://rubygems.org/search?utf8=%E2%9C%93&query=jekyll-theme) to find other gem-based themes. (Note that not all themes are using `jekyll-theme` as a convention in the theme name.) + +To install a gem-based theme: 1. Add the theme to your site's `Gemfile`: - ``` + ```sh gem 'my-awesome-jekyll-theme' ``` -3. Install the theme: +2. Install the theme: - ``` + ```sh bundle install ``` 3. Add the following to your site's `_config.yml` to activate the theme: - ``` + ```sh theme: my-awesome-jekyll-theme ``` -5. Build your site: +4. Build your site: - ``` + ```sh bundle exec jekyll serve ``` @@ -103,11 +115,11 @@ You can have multiple themes listed in your site's `Gemfile`, but only one theme If you're publishing your Jekyll site on [Github Pages](https://pages.github.com/), note that Github Pages supports only some gem-based themes. See [Supported Themes](https://pages.github.com/themes/) in Github's documentation to see which themes are supported. -## Creating your own gem-based theme +## Creating a gem-based theme If you're a Jekyll theme developer (rather than just a consumer of themes), you can package up your theme in RubyGems and allow users to install it through Bundler. -If you're unfamiliar with distributing ruby gems, don't worry. Jekyll will help you scaffold a new theme with the `new-theme` command. Just run `jekyll new-theme` with the theme name as an argument: +If you're unfamiliar with creating Ruby gems, don't worry. Jekyll will help you scaffold a new theme with the `new-theme` command. Just run `jekyll new-theme` with the theme name as an argument: ```sh jekyll new-theme my-awesome-theme @@ -137,13 +149,29 @@ For example, if your theme has a `/_layouts/page.html` file, and a page has `lay ### Assets -Any file in `/assets` will be copied over to the user's site upon build unless they have a file with the same relative path. You can ship any kind of asset here: SCSS, an image, a webfont, etc. These files behave just like pages and static files in Jekyll: if the file has [YAML front matter](../docs/frontmatter/) at the top, then it will be rendered. If it does not have YAML front matter, it will simply be copied over into the resulting site. This allows theme creators to ship a default `/assets/styles.scss` file which their layouts can depend on as `/assets/styles.css`. +Any file in `/assets` will be copied over to the user's site upon build unless they have a file with the same relative path. You can ship any kind of asset here: SCSS, an image, a webfont, etc. These files behave just like pages and static files in Jekyll: + +* If the file has [YAML front matter](../docs/frontmatter/) at the top, it will be rendered. +* If the file does not have YAML front matter, it will simply be copied over into the resulting site. + +This allows theme creators to ship a default `/assets/styles.scss` file which their layouts can depend on as `/assets/styles.css`. All files in `/assets` will be output into the compiled site in the `/assets` folder just as you'd expect from using Jekyll on your sites. ### Stylesheets -Your theme's stylesheets should be placed in your theme's `/_sass` folder, again, just as you would when authoring a Jekyll site. Your theme's styles can be included in the user's stylesheet using the `@import` directive. +Your theme's stylesheets should be placed in your theme's `_sass` folder, again, just as you would when authoring a Jekyll site. + +``` + _sass +├── jekyll-theme-my-awesome-theme.scss +``` + +Your theme's styles can be included in the user's stylesheet using the `@import` directive. + +```css +{% raw %}@import "{{ site.theme }}";{% endraw %} +``` ### Documenting your theme From c31716194277197accd8aa0798996af6f2318be8 Mon Sep 17 00:00:00 2001 From: Tom Johnson Date: Wed, 28 Dec 2016 08:15:20 -0800 Subject: [PATCH 4/6] fixed space --- docs/_docs/themes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_docs/themes.md b/docs/_docs/themes.md index 011ead6e411..0e57df9c4a1 100644 --- a/docs/_docs/themes.md +++ b/docs/_docs/themes.md @@ -98,7 +98,7 @@ To install a gem-based theme: bundle install ``` -3. Add the following to your site's `_config.yml` to activate the theme: +3. Add the following to your site's `_config.yml` to activate the theme: ```sh theme: my-awesome-jekyll-theme From 90da02b1fcde20895d6d4b881ad38eed1d1888fd Mon Sep 17 00:00:00 2001 From: Tom Johnson Date: Thu, 29 Dec 2016 00:15:52 -0800 Subject: [PATCH 5/6] made updates from Parkr's review - most prominent update is example of how to override minima default --- docs/_docs/themes.md | 42 ++++++++++++++++++++++++++++++++++++------ 1 file changed, 36 insertions(+), 6 deletions(-) diff --git a/docs/_docs/themes.md b/docs/_docs/themes.md index 0e57df9c4a1..8e937b611eb 100644 --- a/docs/_docs/themes.md +++ b/docs/_docs/themes.md @@ -36,7 +36,7 @@ The goal of gem-based themes is to allow you to get all the benefits of a robust Jekyll themes set default layouts, includes, and stylesheets. However, you can override any of the theme defaults with your own site content. -For example, if your selected theme has a `page` layout, you can override the theme's layout by creating your own `page` layout in the `_layouts` directory (for example, `_layouts/page.html`). +For example, if your selected theme has a `page` layout, you can override the theme's layout by creating your own `page` layout in the `_layouts` directory (that is, `_layouts/page.html`). Jekyll will look first to your site's content before looking to the theme's defaults for any requested file in the following folders: @@ -52,7 +52,7 @@ To locate theme's files on your computer: 1. Run `bundle show` followed by the name of the theme's gem, e.g., `bundle show minima` for default Jekyll's theme. - The location of the theme gem is returned. For example, minima is located in `/usr/local/lib/ruby/gems/2.3.0/gems/minima-2.1.0` on a Mac. + The location of the theme gem is returned. For example, minima is located in `/usr/local/lib/ruby/gems/2.3.0/gems/minima-2.1.0` when using the system Ruby installation on a Mac. 2. Change to the directory's location and open the directory in Finder or Explorer: @@ -62,9 +62,39 @@ To locate theme's files on your computer: # for Windows, use "explorer ." ``` - A Finder or Explorer window opens showing the theme's files and directories. + A Finder or Explorer window opens showing the theme's files and directories. The Minima theme gem contains these files: + + ``` + ├── LICENSE.txt + ├── README.md + ├── _includes + │   ├── disqus_comments.html + │   ├── footer.html + │   ├── google-analytics.html + │   ├── head.html + │   ├── header.html + │   ├── icon-github.html + │   ├── icon-github.svg + │   ├── icon-twitter.html + │   └── icon-twitter.svg + ├── _layouts + │   ├── default.html + │   ├── home.html + │   ├── page.html + │   └── post.html + ├── _sass + │   ├── minima + │   │   ├── _base.scss + │   │   ├── _layout.scss + │   │   └── _syntax-highlighting.scss + │   └── minima.scss + └── assets + └── main.scss + ``` With a clear understanding of the theme's files, you can now override any theme file by creating a similarly named file in your Jekyll site directory. + + Let's say you want to override Minima's footer. In your Jekyll site, create an `_includes` folder and add a file in it called `footer.html`. Jekyll will now use your site's `footer.html` file instead of the `footer.html` file from the Minima theme gem. ## Converting gem-based themes to regular themes @@ -82,7 +112,7 @@ Now `bundle update` will no longer get updates for the theme gem. The `jekyll new ` command isn't the only way to create a new Jekyll site with a gem-based theme. You can also find gem-based themes online and incorporate them into your Jekyll project. -For example, search for [jekyll-theme on RubyGems](https://rubygems.org/search?utf8=%E2%9C%93&query=jekyll-theme) to find other gem-based themes. (Note that not all themes are using `jekyll-theme` as a convention in the theme name.) +For example, search for [jekyll theme on RubyGems](https://rubygems.org/search?utf8=%E2%9C%93&query=jekyll-theme) to find other gem-based themes. (Note that not all themes are using `jekyll-theme` as a convention in the theme name.) To install a gem-based theme: @@ -98,7 +128,7 @@ To install a gem-based theme: bundle install ``` -3. Add the following to your site's `_config.yml` to activate the theme: +3. Add the following to your site's `_config.yml` to activate the theme: ```sh theme: my-awesome-jekyll-theme @@ -113,7 +143,7 @@ To install a gem-based theme: You can have multiple themes listed in your site's `Gemfile`, but only one theme can be selected in your site's `_config.yml`. {: .note .info } -If you're publishing your Jekyll site on [Github Pages](https://pages.github.com/), note that Github Pages supports only some gem-based themes. See [Supported Themes](https://pages.github.com/themes/) in Github's documentation to see which themes are supported. +If you're publishing your Jekyll site on [GitHub Pages](https://pages.github.com/), note that GitHub Pages supports only some gem-based themes. See [Supported Themes](https://pages.github.com/themes/) in GitHub's documentation to see which themes are supported. ## Creating a gem-based theme From 234ed44db69933dc9a589c89096df0ec8a175021 Mon Sep 17 00:00:00 2001 From: Frank Taillandier Date: Sun, 8 Jan 2017 14:44:59 +0100 Subject: [PATCH 6/6] Fix format, corrections --- docs/_docs/themes.md | 145 ++++++++++++++++++++++--------------------- 1 file changed, 75 insertions(+), 70 deletions(-) diff --git a/docs/_docs/themes.md b/docs/_docs/themes.md index 8e937b611eb..d4da3eeaefa 100644 --- a/docs/_docs/themes.md +++ b/docs/_docs/themes.md @@ -10,7 +10,7 @@ Jekyll has an extensive theme system that allows you to leverage community-maint When you [create a new Jekyll site](/docs/quickstart) (by running the `jekyll new ` command), Jekyll installs a site that uses a gem-based theme called [Minima](https://github.com/jekyll/minima). -With gem-based themes, some of the site's directories (such as the `assets`, `_layouts`, `_includes`, and `_sass` directories) are stored in the theme-gem, hidden from your immediate view. Yet all of the necessary directories will be read and processed during Jekyll's build process. +With gem-based themes, some of the site's directories (such as the `assets`, `_layouts`, `_includes`, and `_sass` directories) are stored in the theme's gem, hidden from your immediate view. Yet all of the necessary directories will be read and processed during Jekyll's build process. In the case of Minima, you see only the following files in your Jekyll site directory: @@ -19,7 +19,7 @@ In the case of Minima, you see only the following files in your Jekyll site dire ├── Gemfile.lock ├── _config.yml ├── _posts -│   └── 2016-12-04-welcome-to-jekyll.markdown +│ └── 2016-12-04-welcome-to-jekyll.markdown ├── about.md └── index.md ``` @@ -28,7 +28,7 @@ The `Gemfile` and `Gemfile.lock` files are used by Bundler to keep track of the Gem-based themes make it easy for theme developers to make updates available to anyone who has the theme gem. When there's an update, theme developers push the update to RubyGems. -If you have the theme gem, you can (if you desire) run `bundle update` to update all gems in your project. Or you can run `bundle update `, replacing `` with the theme name, such as `minima`, to just update the theme gem. Any new files or updates the theme developer has made (such as to stylesheets or includes) will be pulled into your project automatically. +If you have the theme gem, you can (if you desire) run `bundle update` to update all gems in your project. Or you can run `bundle update `, replacing `` with the theme name, such as `minima`, to just update the theme gem. Any new files or updates the theme developer has made (such as to stylesheets or includes) will be pulled into your project automatically. The goal of gem-based themes is to allow you to get all the benefits of a robust, continually updated theme without having all the theme's files getting in your way and over-complicating what might be your primary focus: creating content. @@ -40,30 +40,31 @@ For example, if your selected theme has a `page` layout, you can override the th Jekyll will look first to your site's content before looking to the theme's defaults for any requested file in the following folders: -* `/assets` -* `/_layouts` -* `/_includes` -* `/_sass` +- `/assets` +- `/_layouts` +- `/_includes` +- `/_sass` Refer to your selected theme's documentation and source repository for more information on what files you can override. {: .note .info} To locate theme's files on your computer: -1. Run `bundle show` followed by the name of the theme's gem, e.g., `bundle show minima` for default Jekyll's theme. +1. Run `bundle show` followed by the name of the theme's gem, e.g., `bundle show minima` for default Jekyll's theme. - The location of the theme gem is returned. For example, minima is located in `/usr/local/lib/ruby/gems/2.3.0/gems/minima-2.1.0` when using the system Ruby installation on a Mac. + This returns the location of the gem-based theme files. For example, Minima theme's files are located in `/usr/local/lib/ruby/gems/2.3.0/gems/minima-2.1.0` on macOS. -2. Change to the directory's location and open the directory in Finder or Explorer: +2. Open the theme's directory in Finder or Explorer: - ``` - cd /usr/local/lib/ruby/gems/2.3.0/gems/minima-2.1.0 - open . - # for Windows, use "explorer ." - ``` + ```shell + # On MacOS + open $(bundle show minima) + # On Windows + explorer /usr/local/lib/ruby/gems/2.3.0/gems/minima-2.1.0 + ``` + + A Finder or Explorer window opens showing the theme's files and directories. The Minima theme gem contains these files: - A Finder or Explorer window opens showing the theme's files and directories. The Minima theme gem contains these files: - ``` ├── LICENSE.txt ├── README.md @@ -92,9 +93,9 @@ To locate theme's files on your computer: └── main.scss ``` - With a clear understanding of the theme's files, you can now override any theme file by creating a similarly named file in your Jekyll site directory. - - Let's say you want to override Minima's footer. In your Jekyll site, create an `_includes` folder and add a file in it called `footer.html`. Jekyll will now use your site's `footer.html` file instead of the `footer.html` file from the Minima theme gem. + With a clear understanding of the theme's files, you can now override any theme file by creating a similarly named file in your Jekyll site directory. + + Let's say you want to override Minima's footer. In your Jekyll site, create an `_includes` folder and add a file in it called `footer.html`. Jekyll will now use your site's `footer.html` file instead of the `footer.html` file from the Minima theme gem. ## Converting gem-based themes to regular themes @@ -102,9 +103,10 @@ Suppose you want to get rid of the gem-based theme and convert it to a regular t To do this, copy the files from the theme gem's directory into your Jekyll site directory. (For example, copy them to `/myblog` if you created your Jekyll site at `/myblog`. See the previous section for details.) -Then modify the Gemfile and configuration to remove references to the theme gem. For example, to remove Minima: -* Open `Gemfile` and remove `gem "minima", "~> 2.0"`. -* Open `_config.yml` and remove `theme: minima`. +Then remove references to the theme gem in `Gemfile` and configuration. For example, to remove `minima`: + +- Open `Gemfile` and remove `gem "minima", "~> 2.0"`. +- Open `_config.yml` and remove `theme: minima`. Now `bundle update` will no longer get updates for the theme gem. @@ -116,32 +118,31 @@ For example, search for [jekyll theme on RubyGems](https://rubygems.org/search?u To install a gem-based theme: -1. Add the theme to your site's `Gemfile`: +1. Add the theme to your site's `Gemfile`: - ```sh - gem 'my-awesome-jekyll-theme' - ``` + ```sh + gem "jekyll-theme-awesome" + ``` -2. Install the theme: +2. Install the theme: - ```sh - bundle install - ``` + ```sh + bundle install + ``` 3. Add the following to your site's `_config.yml` to activate the theme: - ```sh - theme: my-awesome-jekyll-theme - ``` + ```sh + theme: jekyll-theme-awesome + ``` -4. Build your site: +4. Build your site: - ```sh - bundle exec jekyll serve - ``` + ```sh + bundle exec jekyll serve + ``` -You can have multiple themes listed in your site's `Gemfile`, but only one theme can be selected in your site's `_config.yml`. -{: .note .info } +You can have multiple themes listed in your site's `Gemfile`, but only one theme can be selected in your site's `_config.yml`. {: .note .info } If you're publishing your Jekyll site on [GitHub Pages](https://pages.github.com/), note that GitHub Pages supports only some gem-based themes. See [Supported Themes](https://pages.github.com/themes/) in GitHub's documentation to see which themes are supported. @@ -149,24 +150,26 @@ If you're publishing your Jekyll site on [GitHub Pages](https://pages.github.com If you're a Jekyll theme developer (rather than just a consumer of themes), you can package up your theme in RubyGems and allow users to install it through Bundler. -If you're unfamiliar with creating Ruby gems, don't worry. Jekyll will help you scaffold a new theme with the `new-theme` command. Just run `jekyll new-theme` with the theme name as an argument: +If you're unfamiliar with creating Ruby gems, don't worry. Jekyll will help you scaffold a new theme with the `new-theme` command. Run `jekyll new-theme` with the theme name as an argument. + +Here is an example: ```sh -jekyll new-theme my-awesome-theme - create /path/to/my-awesome-theme/_layouts - create /path/to/my-awesome-theme/_includes - create /path/to/my-awesome-theme/_sass - create /path/to/my-awesome-theme/_layouts/page.html - create /path/to/my-awesome-theme/_layouts/post.html - create /path/to/my-awesome-theme/_layouts/default.html - create /path/to/my-awesome-theme/Gemfile - create /path/to/my-awesome-theme/my-awesome-theme.gemspec - create /path/to/my-awesome-theme/README.md - create /path/to/my-awesome-theme/LICENSE.txt - initialize /path/to/my-awesome-theme/.git - create /path/to/my-awesome-theme/.gitignore -Your new Jekyll theme, my-awesome-theme, is ready for you in /path/to/my-awesome-theme! -For help getting started, read /path/to/my-awesome-theme/README.md. +jekyll new-theme jekyll-theme-awesome + create /path/to/jekyll-theme-awesome/_layouts + create /path/to/jekyll-theme-awesome/_includes + create /path/to/jekyll-theme-awesome/_sass + create /path/to/jekyll-theme-awesome/_layouts/page.html + create /path/to/jekyll-theme-awesome/_layouts/post.html + create /path/to/jekyll-theme-awesome/_layouts/default.html + create /path/to/jekyll-theme-awesome/Gemfile + create /path/to/jekyll-theme-awesome/jekyll-theme-awesome.gemspec + create /path/to/jekyll-theme-awesome/README.md + create /path/to/jekyll-theme-awesome/LICENSE.txt + initialize /path/to/jekyll-theme-awesome/.git + create /path/to/jekyll-theme-awesome/.gitignore +Your new Jekyll theme, jekyll-theme-awesome, is ready for you in /path/to/jekyll-theme-awesome! +For help getting started, read /path/to/jekyll-theme-awesome/README.md. ``` Add your template files in the corresponding folders. Then complete the `.gemspec` and the README files according to your needs. @@ -179,10 +182,10 @@ For example, if your theme has a `/_layouts/page.html` file, and a page has `lay ### Assets -Any file in `/assets` will be copied over to the user's site upon build unless they have a file with the same relative path. You can ship any kind of asset here: SCSS, an image, a webfont, etc. These files behave just like pages and static files in Jekyll: +Any file in `/assets` will be copied over to the user's site upon build unless they have a file with the same relative path. You can ship any kind of asset here: SCSS, an image, a webfont, etc. These files behave like pages and static files in Jekyll: -* If the file has [YAML front matter](../docs/frontmatter/) at the top, it will be rendered. -* If the file does not have YAML front matter, it will simply be copied over into the resulting site. +- If the file has [YAML front matter](../docs/frontmatter/) at the top, it will be rendered. +- If the file does not have YAML front matter, it will simply be copied over into the resulting site. This allows theme creators to ship a default `/assets/styles.scss` file which their layouts can depend on as `/assets/styles.css`. @@ -193,8 +196,8 @@ All files in `/assets` will be output into the compiled site in the `/assets` fo Your theme's stylesheets should be placed in your theme's `_sass` folder, again, just as you would when authoring a Jekyll site. ``` - _sass -├── jekyll-theme-my-awesome-theme.scss +_sass +├── jekyll-theme-awesome.scss ``` Your theme's styles can be included in the user's stylesheet using the `@import` directive. @@ -215,20 +218,22 @@ Themes are visual. Show users what your theme looks like by including a screensh To preview your theme as you're authoring it, it may be helpful to add dummy content in, for example, `/index.html` and `/page.html` files. This will allow you to use the `jekyll build` and `jekyll serve` commands to preview your theme, just as you'd preview a Jekyll site. -If you do preview your theme locally, be sure to add `/_site` to your theme's `.gitignore` file to prevent the compiled site from also being included when you distribute your theme. -{: .info .note} +If you do preview your theme locally, be sure to add `/_site` to your theme's `.gitignore` file to prevent the compiled site from also being included when you distribute your theme. {: .info .note} ### Publishing your theme -Themes are published via [RubyGems.org](https://rubygems.org). You'll need a RubyGems account, which you can [create for free](https://rubygems.org/sign_up). +Themes are published via [RubyGems.org](https://rubygems.org). You will need a RubyGems account, which you can [create for free](https://rubygems.org/sign_up). -1. First, package your theme, by running the following command, replacing `my-awesome-jekyll-theme` with the name of your theme: +1. First, package your theme, by running the following command, replacing `jekyll-theme-awesome` with the name of your theme: - gem build my-awesome-jekyll-theme.gemspec + ```sh + gem build jekyll-theme-awesome.gemspec + ``` -2. Next, push your packaged theme up to the RubyGems service, by running the following command, again replacing `my-awesome-jekyll-theme` with the name of your theme: +2. Next, push your packaged theme up to the RubyGems service, by running the following command, again replacing `jekyll-theme-awesome` with the name of your theme: - gem push my-awesome-jekyll-theme-*.gem + ```sh + gem push jekyll-theme-awesome-*.gem + ``` -3. To release a new version of your theme, simply update the version number in the gemspec file, ( `my-awesome-jekyll-theme.gemspec` in this example ), and then repeat Steps 1 & 2 above. -We recommend that you follow [Semantic Versioning](http://semver.org/) while bumping your theme-version. +3. To release a new version of your theme, update the version number in the gemspec file, ( `jekyll-theme-awesome.gemspec` in this example ), and then repeat Steps 1 & 2 above. We recommend that you follow [Semantic Versioning](http://semver.org/) while bumping your theme-version.