From e66fe9df08076b361777ae04ec659b4314c32e54 Mon Sep 17 00:00:00 2001 From: Thomas Heller Date: Thu, 30 Mar 2017 20:43:35 +0200 Subject: tag and blog features --- README.md | 2 ++ exampleSite/config.toml | 16 ++++++++++++++++ exampleSite/content/blog/more-blog.md | 11 +++++++++++ exampleSite/content/blog/welcome-blog.md | 19 +++++++++++++++++++ exampleSite/content/features/tags.md | 14 ++++++++++++++ exampleSite/content/home.md | 5 ++++- images/screenshot.png | Bin 113185 -> 136592 bytes images/tn.png | Bin 128012 -> 113932 bytes layouts/_default/list.html | 22 ++++++++++++++++++++++ layouts/_default/single.html | 6 ++++++ layouts/partials/pagination.html | 29 +++++++++++++++++++++++++++++ layouts/partials/tags.html | 5 +++++ static/css/crab.css | 31 ++++++++++++++++++++++++++++++- theme.toml | 2 +- 14 files changed, 159 insertions(+), 3 deletions(-) create mode 100644 exampleSite/content/blog/more-blog.md create mode 100644 exampleSite/content/blog/welcome-blog.md create mode 100644 exampleSite/content/features/tags.md create mode 100644 layouts/partials/pagination.html create mode 100644 layouts/partials/tags.html diff --git a/README.md b/README.md index 07a2825..340ed71 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,8 @@ site generator. - responsive - nested menus - two-column +- tag support +- blog articles ## Preview diff --git a/exampleSite/config.toml b/exampleSite/config.toml index a1a8f27..7ded7ce 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -6,6 +6,12 @@ baseurl = "https://example.com" [params] description = "A clean Hugo theme for websites" +[permalinks] +blog = "/blog/:year/:month/:title/" + +[taxonomies] +tags = "tags" + [[menu.main]] weight = 1 name = "Home" @@ -47,6 +53,11 @@ identifier = "features" weight = 3 name = "Two-column layout" url = "/features/two-column-layout/" + [[menu.main]] + parent = "features" + weight = 4 + name = "Tags" + url = "/features/tags/" [[menu.main]] weight = 3 @@ -76,5 +87,10 @@ identifier = "more" [[menu.main]] weight = 5 +name = "Blog" +url = "/blog/" + +[[menu.main]] +weight = 6 name = "Contact" url = "/contact/" diff --git a/exampleSite/content/blog/more-blog.md b/exampleSite/content/blog/more-blog.md new file mode 100644 index 0000000..2bc0552 --- /dev/null +++ b/exampleSite/content/blog/more-blog.md @@ -0,0 +1,11 @@ ++++ +date = "2017-02-27T21:30:00+01:00" +draft = false +title = "More blogging" +tags = ["this", "post", "also", "has", "some", "tags"] + ++++ + +This is yet another blog post to demonstrate the blog feature. It's +from a different month than other posts, to show you how the archive +feature works. diff --git a/exampleSite/content/blog/welcome-blog.md b/exampleSite/content/blog/welcome-blog.md new file mode 100644 index 0000000..08ed31e --- /dev/null +++ b/exampleSite/content/blog/welcome-blog.md @@ -0,0 +1,19 @@ ++++ +date = "2017-03-27T21:30:00+01:00" +draft = false +title = "Welcome to my blog" + ++++ + +This page is intended to give you a feeling of what a blog post looks +like. Crab supports both fixed (static) pages as well as blog posts. + +In order to make blog pages work correctly, you need proper permalinks +settings in your site's `config.toml`. + +Hugo will then treat all files in the `blog` directory (for example) +like blog posts. + +Have a look at the `config.toml` provided with this example site, as +well as [the page about Permalinks from the Hugo +docs](https://gohugo.io/extras/permalinks/). diff --git a/exampleSite/content/features/tags.md b/exampleSite/content/features/tags.md new file mode 100644 index 0000000..b8b72d8 --- /dev/null +++ b/exampleSite/content/features/tags.md @@ -0,0 +1,14 @@ ++++ +date = "2017-03-19T13:21:00+01:00" +title = "Tags" +draft = false +tags = ["this", "page", "has", "some", "tags"] + ++++ + +Crab also supports tags. This page has some tags, as you can see +below, although tags are probably more common with blog posts. + +If you click on a tag, you'll be redirected to a page that shows all +pages and posts with that tag. (For some tags, there is only this one +page.) diff --git a/exampleSite/content/home.md b/exampleSite/content/home.md index b56bcec..7f639c1 100644 --- a/exampleSite/content/home.md +++ b/exampleSite/content/home.md @@ -8,7 +8,8 @@ draft = false {{% summary %}} Summary: Crab is a clean Hugo theme for websites. Its features include -responsiveness, nested menu support and two-column layout. +responsiveness, nested menu support, two-column layout, tag and blog +article support. {{% /summary %}} Welcome to Crab! Crab is a clean Hugo theme for websites. @@ -18,6 +19,8 @@ Some of its features: - Responsive design -- view it on mobile - Nested menus -- try the menu above - Two-column layout +- Tags +- Blog articles A very popular quote: diff --git a/images/screenshot.png b/images/screenshot.png index e174fd9..cfb4b15 100644 Binary files a/images/screenshot.png and b/images/screenshot.png differ diff --git a/images/tn.png b/images/tn.png index ff9a222..07b5414 100644 Binary files a/images/tn.png and b/images/tn.png differ diff --git a/layouts/_default/list.html b/layouts/_default/list.html index e69de29..a9d34c9 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -0,0 +1,22 @@ +{{ partial "header.html" . }} + +{{ if hasPrefix .URL "/blog/" }} + + {{ range sort .Paginator.Pages }} +

{{ .Title }}

+

{{ .Date.Format "January 2, 2006" }}

+
+ {{ .Summary | plainify | safeHTML }} + {{ if .Truncated }} + ... Read more … + {{ end }} +
+ {{ if .Params.tags }} + {{ partial "tags" .Params.tags }} + {{ end }} + {{ end }} + {{ partial "pagination.html" . }} + +{{ end }} + +{{ partial "footer.html" . }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 16f6ffc..b3a2383 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,3 +1,9 @@ {{ partial "header.html" . }} +{{ if hasPrefix .URL "/blog/" }} +

{{ .Date.Format "January 2, 2006" }}

+{{ end }} {{ .Content }} +{{ if .Params.tags }} + {{ partial "tags" .Params.tags }} +{{ end }} {{ partial "footer.html" . }} diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html new file mode 100644 index 0000000..d587427 --- /dev/null +++ b/layouts/partials/pagination.html @@ -0,0 +1,29 @@ +{{ $pag := .Paginator }} +{{ if gt $pag.TotalPages 1 }} + +{{ end }} diff --git a/layouts/partials/tags.html b/layouts/partials/tags.html new file mode 100644 index 0000000..908c55e --- /dev/null +++ b/layouts/partials/tags.html @@ -0,0 +1,5 @@ +

+ Tags: {{ range . }} + {{ . }} + {{ end }} +

diff --git a/static/css/crab.css b/static/css/crab.css index f15f534..44d4a2d 100644 --- a/static/css/crab.css +++ b/static/css/crab.css @@ -128,6 +128,15 @@ h6 { font-weight: normal; } +#article .timestamp, +#article .tags, +#article .tags a:link, +#article .tags a:active, +#article .tags a:visited, +#article .tags a:hover { + color: #555; +} + hr { border-bottom: 0; border-left: 0; @@ -155,6 +164,27 @@ img.left { font-size: 90%; } +ul.pagination { + padding: 0; + list-style-type: none; +} + +.pagination li { + display: inline-block; +} + +.pagination .active a:link, +.pagination .active a:active, +.pagination .active a:visited, +.pagination .active a:hover, +.pagination .disabled a:link, +.pagination .disabled a:active, +.pagination .disabled a:visited, +.pagination .disabled a:hover { + color: #555; + text-decoration: none; +} + @media (min-width: 768px) { } @@ -223,4 +253,3 @@ img.left { width: 342px; } } - diff --git a/theme.toml b/theme.toml index 547cc91..9cc7d6e 100644 --- a/theme.toml +++ b/theme.toml @@ -4,7 +4,7 @@ licenselink = "https://github.com/thomasheller/crab/blob/master/LICENSE.md" description = "A clean Hugo theme for websites" homepage = "https://github.com/thomasheller/crab" tags = ["clean"] -features = ["responsive", "404"] +features = ["responsive", "404", "blog", "tags"] min_version = 0.18 [author] -- cgit v1.2.3