Skip to content

Commit

Permalink
Add post list
Browse files Browse the repository at this point in the history
Other minor changes: vestigial pagination buttons (no links atm, need upstream
feature) and a centralized date format in config.json.
  • Loading branch information
tummychow committed Mar 14, 2014
1 parent 5a57507 commit dffb0b5
Show file tree
Hide file tree
Showing 8 changed files with 46 additions and 7 deletions.
11 changes: 8 additions & 3 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,18 @@ I'm not a designer, nor do I know CSS or HTML. Most of those things are coming s
Hugo's docs are a bit lacking in the "big picture" of how things fit together (I might submit a PR when I'm more familiar with the tool), but they're quite complete. I recommend you read them first.

## Layouts
Lanyon-Hugo uses two content types, `fixed` and `post`. These are analogous to Lanyon's `page` and `post` layouts, respectively. Right now, I only have single views for these content types. I will probably add a list view for `post` in the future.
Lanyon-Hugo uses two content types, `fixed` and `post`. These are analogous to Lanyon's `page` and `post` layouts, respectively. The `fixed` type is meant to be very simple, for pages that don't need any of the support structure provided by a blog (no tags, no dates, etc). The `post` type is more detailed; it has a list view and stuff like that.

The two types are quite similar. In fact, the only difference is that `post` shows a date, where as `fixed` does not. [This](http://golang.org/pkg/time/#Time.Format) documentation explains how to change the date formatting.
They both have single views, which are quite similar. In fact, the only difference is that `post` shows a date, where as `fixed` does not. [This](http://golang.org/pkg/time/#Time.Format) documentation explains how to change the date formatting. This format is set in the `config.json` under `.Site.Params.DateForm`, so you can affect the entire site at once.

Both content types call out to a set of general HTML files which provide the universal bits and pieces. These are stored in `layouts/chrome`, which is a Hugo convention, and they are analogous to Lanyon's `_includes`.

In Jekyll, you can nest layouts. Lanyon's `page` and `post` layouts are both based on a `default` layout. The `default` layout is the one that provides things like the header and the sidebar. But Hugo doesn't have this functionality, so I took the `default` layout, and I split it into two files: `default_head.html` and `default_foot.html`. These two are meant to be included at the top and bottom, respectively, of any other content views. You can see this in `fixed/single.html` and `post/single.html`.

## Sidebar
The most interesting layout is probably `layouts/chrome/sidebar.html`. This is mostly based on Lanyon's `_includes/sidebar.html`, but ported to Go templates instead of Liquid. We identify the homepage via `.Url`. Any pages whose front matter sets the `sidebar` flag are also added to the sidebar. We match the active page (if any) using its `.Permalink`. The sidebar also retains the GitHub integration from the original Lanyon, where it lists a repository of your choice.
The most interesting chrome is probably `layouts/chrome/sidebar.html`. This is mostly based on Lanyon's `_includes/sidebar.html`, but ported to Go templates instead of Liquid. We identify the homepage and postlist via `.Url`. Rendered pages (with a content type) do not implement the `.Url` variable, so it comes back as the blank string.

Any pages whose front matter sets the `sidebar` flag are also added to the sidebar (sorted by weight). We match the active page (if any) using its `.Permalink`. Both nodes and pages provide the `.Permalink` variable, so this lets you pin any content to the sidebar. The sidebar also retains the GitHub integration from the original Lanyon, where it lists a repository of your choice.

## Homepage
Hugo implements homepages as a special layout, which does not correspond to any content type. This gets generated into a page called a node. You can see this in `layouts/index.html`. If you want to change the number of posts listed on the homepage, just change the `pagination` variable. One inconvenience of Hugo's system is that you can't include front matter for nodes (as far as I know).
Expand All @@ -25,6 +27,9 @@ The index implements a full view of each item whose content type is `post`. This

You may notice that the pagination buttons from the original Lanyon are conspicuously missing. Jekyll has a pagination feature which generates extra HTML in the output site, so that you can go through pages of past posts easily. This isn't available in Hugo yet. Hugo provides indexes, which can list stuff, but breaking those lists into paginated pieces is another matter. I am probably going to wait until Hugo provides support for this feature. Then I'll add the pagination buttons back.

## Post List
The post list is implemented using a Hugo section index, which can list pages under a certain content type (in this case, the `post` type). This index is defined at `layouts/indexes/post.html`. It renders posts using the `layouts/post/li.html` view, which just shows the post's time and date as a list item. Hugo indexes are also nodes, like the homepage (a node is any page in the output, that doesn't have a content type).

## Statics
Jekyll will take every file in its source directory and mirror it in the destination, unless the file's name begins with an underscore. Hugo is not quite so inclusive. The contents of the `static` directory are mirrored into the root of the destination exactly as they are. This is where the Lanyon/Poole CSS files are placed. I have not changed those files at all (literally nothing).

Expand Down
5 changes: 3 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ Sidebar content is ordered by weight, specified in the front matter. The lowest

Note for Jekyll users: In the original Lanyon, any content that had the `page` layout would be added to the sidebar. However, in Lanyon-Hugo, content with the `fixed` type will not be added to the sidebar automatically. You must specify the `sidebar` flag in the front matter.

Lanyon-Hugo generates a post list at `/post/`. By default, Lanyon doesn't actually have a post list, so there is no link for it anywhere in the theme. In my opinion, there are two sensible places to put it: in between the pagination buttons, and on the sidebar. You could conceivably do both. I've added a sidebar entry for it. If you want to add a button between the pagination buttons, take a look at my Lanyon fork; it has an example of how to do such a thing.

### Look and Feel

The CSS from the original Lanyon is unchanged, and you can find it in [`static/css`](static/css). Any of the modifications suggested for Lanyon can also be applied to Lanyon-Hugo, by changing the CSS here.
Expand All @@ -37,8 +39,7 @@ You can use syntax highlighting, if you have [Pygments](http://pygments.org/). S
## To Do

While Lanyon-Hugo is aiming for functional compatibility with Lanyon (ie all the old functionality is available and looks similar), there are still some things I'm missing:
- pagination. Lanyon-Hugo does not have next/previous buttons. Jekyll's pagination feature is quite good, but Hugo's pagination is still on the roadmap for now. I may implement a hackish solution in the meantime, but ideally I'd rather wait until Hugo has a solid solution for this problem.
- post lists. Lanyon didn't have a feature for listing posts (my fork of Lanyon implemented one). Hugo has a feature called indexes, which can probably provide this functionality. I intend to make use of it.
- pagination. Lanyon-Hugo does not have next/previous buttons (well they're there, but as you can see, they don't have any links). Jekyll's pagination feature is quite good, but Hugo's pagination is still on the roadmap for now. I may implement a hackish solution in the meantime, but ideally I'd rather wait until Hugo has a solid solution for this problem.

## Contributing

Expand Down
1 change: 1 addition & 0 deletions config.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"Title": "Lanyon",
"Tagline": "A Jekyll theme",
"Author": "Mark Otto",
"DateForm": "Jan 2 2006",
"Github": {
"Url": "http://github.com/tummychow/lanyon-hugo",
"Head": "master"
Expand Down
1 change: 1 addition & 0 deletions layouts/chrome/sidebar.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@

<nav class="sidebar-nav">
<a class="sidebar-nav-item {{ if eq .Url "/" }} active {{ end }}" href="/">Home</a>
<a class="sidebar-nav-item {{ if eq .Url "post" }} active {{ end }}" href="/post">Posts</a>

{{ $thisperma := .Permalink }}
{{ range .Site.Recent.ByWeight }}
Expand Down
20 changes: 19 additions & 1 deletion layouts/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,29 @@
{{ if eq .Type "post"}}
<div class="post">
<h1 class="post-title"><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
<span class="post-date">{{ .Date.Format "Jan 2 2006" }}</span>
<span class="post-date">{{ .Date.Format .Site.Params.DateForm }}</span>
{{ .Content }}
</div>
{{ end }}
{{ end }}
</div>

<div class="pagination">
{{ if false }}
<a class="pagination-item older" href="/page2">Older</a>
{{ else }}
<span class="pagination-item older">Older</span>
{{ end }}

{{ if false }}
{{ if false }}
<a class="pagination-item newer" href="/">Newer</a>
{{ else }}
<a class="pagination-item newer" href="/page1">Newer</a>
{{ end }}
{{ else }}
<span class="pagination-item newer">Newer</span>
{{ end }}
</div>

{{ template "chrome/default_foot.html" . }}
12 changes: 12 additions & 0 deletions layouts/indexes/post.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{{ template "chrome/default_head.html" . }}

<div class="post">
<h1 class="post-title">{{ .Title }}</h1>
<ul id="list">
{{ range .Data.Pages }}
{{ .Render "li"}}
{{ end }}
</ul>
</div>

{{ template "chrome/default_foot.html" . }}
1 change: 1 addition & 0 deletions layouts/post/li.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<li>{{ .Date.Format .Site.Params.DateForm }} - <a href="{{ .Permalink }}">{{ .Title }}</a></li>
2 changes: 1 addition & 1 deletion layouts/post/single.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<div class="post">
<h1 class="post-title">{{ .Title }}</h1>
<span class="post-date">{{ .Date.Format "Jan 2 2006" }}</span>
<span class="post-date">{{ .Date.Format .Site.Params.DateForm }}</span>
{{ .Content }}
</div>

Expand Down

0 comments on commit dffb0b5

Please sign in to comment.