add 'home' layout and use it in index file
This commit is contained in:
Dean Attali
parent
8f786f17e1
commit
c2e655f7e8
14
README.md
14
README.md
@ -7,11 +7,11 @@
|
||||
|
||||
**Beautiful Jekyll** is a ready-to-use template to help you create an awesome website quickly. Perfect for personal sites, blogs, or simple project websites. [Check out a demo](https://deanattali.com/beautiful-jekyll) of what you'll get after just two minutes. You can also look at [my personal website](https://deanattali.com) to see it in use, or see examples of websites other people created using this theme [here](#showcased-users-success-stories).
|
||||
|
||||
**If you enjoy this theme, please consider [supporting me](https://github.com/sponsors/daattali) for developing and maintaining this template.**
|
||||
**If you enjoy this theme, please consider [supporting me](https://github.com/sponsors/daattali) for developing and maintaining it for over 5 years.**
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/sponsors/daattali">
|
||||
<img src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" />
|
||||
<a href="https://paypal.me/daattali">
|
||||
<img src="https://camo.githubusercontent.com/0e9e5cac101f7093336b4589c380ab5dcfdcbab0/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f67682f74776f6c66736f6e2f70617970616c2d6769746875622d627574746f6e40312e302e302f646973742f627574746f6e2e737667" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@ -68,8 +68,6 @@ In contrast, look at [`index.html`](./index.html). That's how your write HTML -
|
||||
|
||||
Any file that you add inside the [`_posts`](./_posts) directory will be treated as a blog entry. You can look at the existing files there to get an idea of how to write blog posts. After you successfully add your own post, you can delete the existing files inside [`_posts`](./_posts) to remove the sample posts, as those are just demo posts to help you learn.
|
||||
|
||||
As mentioned previously, you can use [prose.io](https://prose.io/) to add or edit files instead of doing it directly on GitHub, it can be a little easier that way.
|
||||
|
||||
## Last important thing: YAML front matter ("parameters" for a page)
|
||||
|
||||
In order to have your new pages use this template and not just be plain pages, you need to add [YAML front matter](https://jekyllrb.com/docs/front-matter/) to the top of each page. This is where you'll give each page some parameters that I made available, such as a title and subtitle. I'll go into more detail about what parameters are available later. If you don't want to use any parameters on your new page (this also means having no title), then use the empty YAML front matter:
|
||||
@ -96,6 +94,7 @@ If you don't include YAML then your file will not use the template.
|
||||
## Features
|
||||
|
||||
### Mobile-first
|
||||
|
||||
**Beautiful Jekyll** is designed to look great on both large-screen and small-screen (mobile) devices. Load up your site on your phone or your gigantic iMac, and the site will work well on both, though it will look slightly different.
|
||||
|
||||
### Customizable
|
||||
@ -104,7 +103,7 @@ Many personalization settings in `_config.yml`, such as setting your name and si
|
||||
|
||||
### Allowing users to leave comments
|
||||
|
||||
If you want to enable comments on your site, Beautiful Jekyll supports either the [Disqus](https://disqus.com/) comments plugin, [Facebook](https://developers.facebook.com/docs/plugins/comments) comments, or [Staticman](https://staticman.net). If any of these are set in the configuration file, then all blog posts will have comments turned on by default. To turn off comments on a particular blog post, add `comments: false` to the YAML front matter. If you want to add comments on the bottom of a non-blog page, add `comments: true` to the YAML front matter.
|
||||
If you want to enable comments on your site, Beautiful Jekyll supports several different commenting platforms you can choose from: [Disqus](https://disqus.com/), [Facebook](https://developers.facebook.com/docs/plugins/comments), [Utterances](https://utteranc.es/), and [Staticman](https://staticman.net). If any of these are set in the configuration file, then all blog posts will have comments turned on by default. To turn off comments on a particular blog post, add `comments: false` to the YAML front matter. If you want to add comments on the bottom of a non-blog page, add `comments: true` to the YAML front matter.
|
||||
|
||||
#### Disqus comments
|
||||
|
||||
@ -141,6 +140,7 @@ Beautiful Jekyll automatically generates a simple RSS feed of your blog posts, t
|
||||
|
||||
- **post** - To write a blog post, add a markdown or HTML file in the `_posts` folder. As long as you give it YAML front matter (the two lines of three dashes), it will automatically be rendered like a blog post. Look at the existing blog post files to see examples of how to use YAML parameters in blog posts.
|
||||
- **page** - Any page outside the `_posts` folder that uses YAML front matter will have a very similar style to blog posts.
|
||||
- **home** - You should only have one page that uses the home layout. The home layout is meant to act as the homepage of the blog posts - it will show all the previous blog posts, sorted from newest to oldest. A page using the home layout must be named `index.html`.
|
||||
- **minimal** - If you want to create a page with minimal styling (ie. without the bulky navigation bar and footer), assign `layout: minimal` to the YAML front matter.
|
||||
- If you want to completely bypass the template engine and just write your own HTML page, simply omit the YAML front matter. Only do this if you know how to write HTML!
|
||||
|
||||
@ -162,7 +162,7 @@ share-img | If you want to specify an image to use when sharing the page on Fa
|
||||
social-share | If you don't want to show buttons to share a blog post on social media, use `social-share: false` (this feature is turned on by default).
|
||||
use-site-title | If you want to use the site title rather than page title as HTML document title (ie. browser tab title), use `use-site-title: true`. When set, the document title will take the format `Site Title - Site Description` (eg. `My website - A virtual proof that name is awesome!`). By default, it will use `Page Title` if it exists, or `Site Title` otherwise.
|
||||
language | HTML language code to be set on <html> element (see [W3Schools website](https://www.w3schools.com/tags/ref_language_codes.asp) for more info on this topic). Language can also be set site-wide in `_config.yml`.
|
||||
layout | What type of page this is (default is `post` for blog posts and `page` for other pages. You can use `minimal` if you don't want a header and footer)
|
||||
layout | What type of page this is (default is `post` for blog posts and `page` for other pages. You can use `minimal` if you don't want a header and footer). One of your pages should have `home` layout to show all the blog posts, this page must be named `index.html`.
|
||||
js | List of local JavaScript files to include in the page (eg. `/js/mypage.js`)
|
||||
ext-js | List of external JavaScript files to include in the page (eg. `//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js`). External JavaScript files that support [Subresource Integrity (SRI)](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) can be specified using the `href` and `sri` parameters eg.<br/>`href: "//code.jquery.com/jquery-3.1.1.min.js"`<br/>`sri: "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="`
|
||||
css | List of local CSS files to include in the page
|
||||
|
||||
75
_layouts/home.html
Normal file
75
_layouts/home.html
Normal file
@ -0,0 +1,75 @@
|
||||
---
|
||||
layout: page
|
||||
---
|
||||
|
||||
{{ content }}
|
||||
|
||||
{% assign posts = paginator.posts | default: site.posts %}
|
||||
|
||||
<div class="posts-list">
|
||||
{% for post in posts %}
|
||||
<article class="post-preview">
|
||||
<a href="{{ post.url | relative_url }}">
|
||||
<h2 class="post-title">{{ post.title }}</h2>
|
||||
|
||||
{% if post.subtitle %}
|
||||
<h3 class="post-subtitle">
|
||||
{{ post.subtitle }}
|
||||
</h3>
|
||||
{% endif %}
|
||||
</a>
|
||||
|
||||
<p class="post-meta">
|
||||
{% assign date_format = site.date_format | default: "%B %-d, %Y" %}
|
||||
Posted on {{ post.date | date: date_format }}
|
||||
</p>
|
||||
|
||||
<div class="post-entry-container">
|
||||
{% if post.image %}
|
||||
<div class="post-image">
|
||||
<a href="{{ post.url | relative_url }}">
|
||||
<img src="{{ post.image | relative_url }}">
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="post-entry">
|
||||
{% assign excerpt_length = site.excerpt_length | default: 50 %}
|
||||
{{ post.excerpt | strip_html | xml_escape | truncatewords: excerpt_length }}
|
||||
{% assign excerpt_word_count = post.excerpt | number_of_words %}
|
||||
{% if post.content != post.excerpt or excerpt_word_count > excerpt_length %}
|
||||
<a href="{{ post.url | relative_url }}" class="post-read-more">[Read More]</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if post.tags.size > 0 %}
|
||||
<div class="blog-tags">
|
||||
Tags:
|
||||
{% if site.link-tags %}
|
||||
{% for tag in post.tags %}
|
||||
<a href="{{ '/tags' | relative_url }}#{{- tag -}}">{{- tag -}}</a>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{{ post.tags | join: ", " }}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if paginator.total_pages > 1 %}
|
||||
<ul class="pager main-pager">
|
||||
{% if paginator.previous_page %}
|
||||
<li class="previous">
|
||||
<a href="{{ paginator.previous_page_path | relative_url }}">← Newer Posts</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if paginator.next_page %}
|
||||
<li class="next">
|
||||
<a href="{{ paginator.next_page_path | relative_url }}">Older Posts →</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
@ -8,7 +8,7 @@ layout: base
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
|
||||
{{ content }}
|
||||
{% include comments.html %}
|
||||
{% include comments.html %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
70
index.html
70
index.html
@ -1,74 +1,6 @@
|
||||
---
|
||||
layout: page
|
||||
layout: home
|
||||
title: My website
|
||||
subtitle: This is where I will tell my friends way too much about me
|
||||
use-site-title: true
|
||||
---
|
||||
|
||||
<div class="posts-list">
|
||||
{% for post in paginator.posts %}
|
||||
<article class="post-preview">
|
||||
<a href="{{ post.url | relative_url }}">
|
||||
<h2 class="post-title">{{ post.title }}</h2>
|
||||
|
||||
{% if post.subtitle %}
|
||||
<h3 class="post-subtitle">
|
||||
{{ post.subtitle }}
|
||||
</h3>
|
||||
{% endif %}
|
||||
</a>
|
||||
|
||||
<p class="post-meta">
|
||||
{% assign date_format = site.date_format | default: "%B %-d, %Y" %}
|
||||
Posted on {{ post.date | date: date_format }}
|
||||
</p>
|
||||
|
||||
<div class="post-entry-container">
|
||||
{% if post.image %}
|
||||
<div class="post-image">
|
||||
<a href="{{ post.url | relative_url }}">
|
||||
<img src="{{ post.image | relative_url }}">
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="post-entry">
|
||||
{% assign excerpt_length = site.excerpt_length | default: 50 %}
|
||||
{{ post.excerpt | strip_html | xml_escape | truncatewords: excerpt_length }}
|
||||
{% assign excerpt_word_count = post.excerpt | number_of_words %}
|
||||
{% if post.content != post.excerpt or excerpt_word_count > excerpt_length %}
|
||||
<a href="{{ post.url | relative_url }}" class="post-read-more">[Read More]</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if post.tags.size > 0 %}
|
||||
<div class="blog-tags">
|
||||
Tags:
|
||||
{% if site.link-tags %}
|
||||
{% for tag in post.tags %}
|
||||
<a href="{{ '/tags' | relative_url }}#{{- tag -}}">{{- tag -}}</a>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{{ post.tags | join: ", " }}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if paginator.total_pages > 1 %}
|
||||
<ul class="pager main-pager">
|
||||
{% if paginator.previous_page %}
|
||||
<li class="previous">
|
||||
<a href="{{ paginator.previous_page_path | relative_url }}">← Newer Posts</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if paginator.next_page %}
|
||||
<li class="next">
|
||||
<a href="{{ paginator.next_page_path | relative_url }}">Older Posts →</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user