Adds three custom includes to add HTML markup to different parts of the website.
+191
-103
Diff
round #0
+22
CHANGELOG.md
+22
CHANGELOG.md
···
···
1
+
---
2
+
layout: page
3
+
title: Changelog
4
+
permalink: /changelog/
5
+
---
6
+
7
+
## Version 1.1
8
+
9
+
**New:**
10
+
11
+
- **`archive` layout:**
12
+
Show all your posts in a single list!
13
+
- **New Setting `site.translations.byline`:**
14
+
Now you can prepend a byline for an author name in the post footer.
15
+
- **Custom includes:**
16
+
You can add HTML markup to the `<head>`, below your post and at the end of the `</body>` tag.
17
+
18
+
**Fix:**
19
+
20
+
- Hides `post.author` on single-author blogs.
21
+
- Hides excerpt on link posts in archive pages.
22
+
- Softens the shadows to increase legibility.
+73
-28
README.md
+73
-28
README.md
···
1
-
# Linus
2
3
-
A minimal Jekyll blog theme. Supports link posts, categories, tags, date archives, pagination, and dark mode out of the box.
4
-
5
## Installation
6
7
Add this line to your Jekyll site's `Gemfile`:
···
51
---
52
```
53
54
-
**Link posts** — set `title` to an empty string and provide a `source` URL. The post title renders as "↪ [fetched page title]" using `jekyll-url-metadata`:
55
56
```yaml
57
---
···
64
65
### Authors
66
67
-
Define authors in `_data/authors.yml`:
68
69
```yaml
70
-
arthur:
71
-
name: Arthur Freitas
72
-
uri: https://arthr.me/
73
```
74
75
-
Reference them in post front matter with the `author` key.
76
77
-
### Category colors
78
79
-
Assign a background color to each category pill:
80
81
```yaml
82
-
category_colors:
83
-
- name: Links
84
-
color: "#f0e68c"
85
-
- name: Notes
86
-
color: "#fa8072"
87
```
88
89
-
### Date formats
90
-
91
-
Customize how dates are displayed using strftime strings:
92
93
```yaml
94
-
date_formats:
95
-
day: "%b %d, '%y"
96
-
month: "%b, '%y"
97
-
year: "%Y"
98
```
99
100
### Navigation menus
···
126
127
```yaml
128
translations:
129
archive_date_title: "Archives from %date"
130
archive_tag_title: "Posts tagged with %tag"
131
archive_category_title: "Posts filed under %category"
···
134
blog_pagination_next_page: "Next page"
135
```
136
137
-
### Pagination
138
139
-
```yaml
140
-
paginate: 12
141
-
paginate_path: "/pg/:num/"
142
-
```
143
144
## Customization
145
146
### Custom styles
147
148
Override or extend the theme's CSS by creating `assets/css/theme.css` in your site. This file is loaded last, after all theme styles. Use it to redefine CSS custom properties or add new rules:
···
154
}
155
```
156
157
### Custom fonts
158
159
Create `assets/css/fonts.css` in your site to load your own web fonts:
···
173
--font-body: 'My Font', sans-serif;
174
}
175
```
176
177
## Development
178
···
1
+
---
2
+
layout: page
3
+
title: Using Linus
4
+
permalink: /about/
5
+
---
6
7
+
Linus is a minimal blog theme for Jekyll. Supports link posts, categories, tags, archives (using [jekyll-archives](https://github.com/jekyll/jekyll-arcihves)) and dark mode out of the box.
8
## Installation
9
10
Add this line to your Jekyll site's `Gemfile`:
···
54
---
55
```
56
57
+
**Link posts**: you can have link posts by setting a `post.source` front-matter on your post. If the title is left empty (`""`), Jekyll will try to fetch the link metadata and render the link title as your post title.
58
59
```yaml
60
---
···
67
68
### Authors
69
70
+
Authors follow the same approach as [jekyll-feed](https://github.com/jekyll-feed) and [jekyll-archives](https://github.com/jekyll/jekyll-archives). You can have an author object set in a post, or in the site `_config.yml`, or in a `authors.yml` data file.
71
+
72
+
In a post:
73
74
```yaml
75
+
---
76
+
layout: post
77
+
title: My awesome first post
78
+
author:
79
+
name: Author Name
80
+
uri: https://example.com
81
+
picture: /path/to/author-picture.jpg
82
+
---
83
```
84
85
+
In your `_config.yml`:
86
87
+
```yaml
88
+
author:
89
+
name: Author Name
90
+
uri: https://example.com
91
+
picture: /path/to/author-picture.jpg
92
+
```
93
94
+
You can also define authors in `_data/authors.yml`:
95
96
```yaml
97
+
author_name:
98
+
name: Author Name
99
+
uri: https://example.com
100
+
picture: /path/to/author-picture.jpg
101
```
102
103
+
Reference them in post front matter with the `author` key:
104
105
```yaml
106
+
author: author_name
107
```
108
109
### Navigation menus
···
135
136
```yaml
137
translations:
138
+
byline: "By"
139
archive_date_title: "Archives from %date"
140
archive_tag_title: "Posts tagged with %tag"
141
archive_category_title: "Posts filed under %category"
···
144
blog_pagination_next_page: "Next page"
145
```
146
147
+
### Further options
148
+
149
+
Linus uses the following Jekyll plugins, which you can set up as you please. Refer to the plugins docs to learn how to change the way your site will handle pagination, archiving, feeds and SEO tags:
150
151
+
- [jekyll-pagination](https://github.com/jekyll/jekyll-pagination)
152
+
- [jekyll-archives](https://github.com/jekyll/jekyll-archives)
153
+
- [jekyll-seo-tag](https://github.com/jekyll/jekyll-seo-tag)
154
+
- [jekyll-sitemap](https://github.com/jekyll/jekyll-sitemap)
155
+
- [jekyll-feed](https://github.com/jekyll/jekyll-feed)
156
+
- [jekyll-json-feed](https://github.com/lildude/jekyll-json-feed)
157
158
## Customization
159
160
+
### Date formats
161
+
162
+
Customize how dates are displayed using strftime strings:
163
+
164
+
```yaml
165
+
date_formats:
166
+
day: "%b %d, '%y"
167
+
month: "%b, '%y"
168
+
year: "%Y"
169
+
```
170
+
171
### Custom styles
172
173
Override or extend the theme's CSS by creating `assets/css/theme.css` in your site. This file is loaded last, after all theme styles. Use it to redefine CSS custom properties or add new rules:
···
179
}
180
```
181
182
+
#### Category colors
183
+
184
+
Assign a background color to each category pill:
185
+
186
+
```yaml
187
+
category_colors:
188
+
- name: Links
189
+
color: "#f0e68c"
190
+
- name: Notes
191
+
color: "#fa8072"
192
+
```
193
+
194
### Custom fonts
195
196
Create `assets/css/fonts.css` in your site to load your own web fonts:
···
210
--font-body: 'My Font', sans-serif;
211
}
212
```
213
+
214
+
## Custom includes
215
+
216
+
Linus offers three custom includes to add markup to different parts of your website:
217
+
218
+
- `head.html`: right before the closing `</head>` tag.
219
+
- `below-post.html`: after the post footer in post pages.
220
+
- `end.html`: right before the closing `</body>` tag.
221
222
## Development
223
+1
_config.yml
+1
_config.yml
+3
_includes/below-post.html
+3
_includes/below-post.html
+8
-7
_includes/blog/post.html
+8
-7
_includes/blog/post.html
···
71
{%- assign author = site.data.authors[include.post.author] -%}
72
{%- endif -%}
73
74
-
{%- if author.uri -%}
75
-
<p class="post-author p-author h-card">
76
<a class="p-name u-url" href="{{- author.uri -}}">
77
{{ author.name }}
78
</a>
79
-
</p>
80
-
{%- else -%}
81
-
<p class="post-author p-author h-card">
82
<span class="p-name">
83
{{- author -}}
84
</span>
85
-
</p>
86
-
{%- endif -%}
87
</footer>
88
{%- endif -%}
89
</article>
···
71
{%- assign author = site.data.authors[include.post.author] -%}
72
{%- endif -%}
73
74
+
<p class="post-author p-author h-card">
75
+
<span class="post-byline">
76
+
{{ site.translations.byline }}
77
+
</span>
78
+
{% if author.uri -%}
79
<a class="p-name u-url" href="{{- author.uri -}}">
80
{{ author.name }}
81
</a>
82
+
{%- else -%}
83
<span class="p-name">
84
{{- author -}}
85
</span>
86
+
{%- endif -%}
87
+
</p>
88
</footer>
89
{%- endif -%}
90
</article>
+3
_includes/end.html
+3
_includes/end.html
+3
_includes/head.html
+3
_includes/head.html
-44
_includes/header.html
-44
_includes/header.html
···
1
-
{%- assign is_personal_website = false -%}
2
-
3
-
{%- if site.author or site.data.authors == 1 -%}
4
-
{%- assign is_personal_website = true -%}
5
-
{%- endif -%}
6
-
7
-
{%- capture site_branding -%}
8
-
<a class="site-branding h-card u-url" href="{{ '/' | absolute_url }}">
9
-
{% if site.logo %}
10
-
<img
11
-
class="site-logo u-photo"
12
-
src="{{ site.logo }}"
13
-
alt=""
14
-
/>
15
-
{% endif %}
16
-
17
-
<span class="site-name p-name {%- unless is_personal_website %} p-org {%- endunless -%}">
18
-
{{ site.title }}
19
-
</span>
20
-
</a>
21
-
{%- endcapture -%}
22
-
23
-
24
-
<header class="site-header">
25
-
{% if page.title and page.title != "" %}
26
-
<span class="site-title">
27
-
{{ site_branding }}
28
-
</span>
29
-
{% else %}
30
-
<h1 class="site-title">
31
-
{{ site_branding }}
32
-
</h1>
33
-
{% endif %}
34
-
35
-
{% if site.main_menu %}
36
-
<nav class="site-menu" aria-label="{{ site.main_menu.title }}">
37
-
{% for item in site.main_menu.items %}
38
-
<a class="menu-item" href="{{ item.url }}" {% if item.external %}target="_blank"{% endif %}>
39
-
{{- item.label -}}
40
-
</a>
41
-
{% endfor %}
42
-
</nav>
43
-
{% endif %}
44
-
</header>
···
+44
_includes/site/header.html
+44
_includes/site/header.html
···
···
1
+
{%- assign is_personal_website = false -%}
2
+
3
+
{%- if site.author or site.data.authors == 1 -%}
4
+
{%- assign is_personal_website = true -%}
5
+
{%- endif -%}
6
+
7
+
{%- capture site_branding -%}
8
+
<a class="site-branding h-card u-url" href="{{ '/' | absolute_url }}">
9
+
{% if site.logo %}
10
+
<img
11
+
class="site-logo u-photo"
12
+
src="{{ site.logo }}"
13
+
alt=""
14
+
/>
15
+
{% endif %}
16
+
17
+
<span class="site-name p-name {%- unless is_personal_website %} p-org {%- endunless -%}">
18
+
{{ site.title }}
19
+
</span>
20
+
</a>
21
+
{%- endcapture -%}
22
+
23
+
24
+
<header class="site-header">
25
+
{% if page.title and page.title != "" %}
26
+
<span class="site-title">
27
+
{{ site_branding }}
28
+
</span>
29
+
{% else %}
30
+
<h1 class="site-title">
31
+
{{ site_branding }}
32
+
</h1>
33
+
{% endif %}
34
+
35
+
{% if site.main_menu %}
36
+
<nav class="site-menu" aria-label="{{ site.main_menu.title }}">
37
+
{% for item in site.main_menu.items %}
38
+
<a class="menu-item" href="{{ item.url }}" {% if item.external %}target="_blank"{% endif %}>
39
+
{{- item.label -}}
40
+
</a>
41
+
{% endfor %}
42
+
</nav>
43
+
{% endif %}
44
+
</header>
+6
-2
_layouts/default.html
+6
-2
_layouts/default.html
···
33
<link rel="stylesheet" href="{%- link assets/css/syntax.css -%}" />
34
<link rel="stylesheet" href="{%- link assets/css/theme.css -%}" />
35
<link rel="stylesheet" href="{%- link assets/css/fonts.css -%}" />
36
</head>
37
<body>
38
<div class="site">
39
-
{% include header.html %}
40
41
<main class="site-content">
42
{{ content }}
43
</main>
44
45
46
-
{% include footer.html %}
47
</div>
48
</body>
49
</html>
···
33
<link rel="stylesheet" href="{%- link assets/css/syntax.css -%}" />
34
<link rel="stylesheet" href="{%- link assets/css/theme.css -%}" />
35
<link rel="stylesheet" href="{%- link assets/css/fonts.css -%}" />
36
+
37
+
{%- include head.html -%}
38
</head>
39
<body>
40
<div class="site">
41
+
{% include site/header.html %}
42
43
<main class="site-content">
44
{{ content }}
45
</main>
46
47
48
+
{% include site/footer.html %}
49
</div>
50
+
51
+
{%- include end.html -%}
52
</body>
53
</html>
+6
_layouts/post.html
+6
_layouts/post.html
···
68
{%- endif -%}
69
70
<p class="post-author p-author h-card" {% if site.author or site.data.authors.size == 1 -%}hidden{%- endif %}>
71
{%- if author.uri -%}
72
<a class="p-name u-url" href="{{- author.uri -}}">
73
{{ author.name }}
···
95
{%- endif -%}
96
</footer>
97
{%- endif -%}
98
</article>
99
···
68
{%- endif -%}
69
70
<p class="post-author p-author h-card" {% if site.author or site.data.authors.size == 1 -%}hidden{%- endif %}>
71
+
<span class="post-byline">
72
+
{{ site.translations.byline }}
73
+
</span>
74
+
75
{%- if author.uri -%}
76
<a class="p-name u-url" href="{{- author.uri -}}">
77
{{ author.name }}
···
99
{%- endif -%}
100
</footer>
101
{%- endif -%}
102
+
103
+
{%- include below-post.html -%}
104
</article>
105
+2
-2
assets/css/layout.css
+2
-2
assets/css/layout.css
···
24
--color-link: #2D5438;
25
--color-link-hover: #1E3826;
26
--color-support: #D9634E;
27
-
--color-shadows: color-mix(in srgb, var(--color-text), transparent 75%);
28
-
--color-shadows-hover: color-mix(in srgb, var(--color-text), transparent 50%);
29
--color-border: color-mix(in srgb, currentcolor, transparent 50%);
30
}
31
···
24
--color-link: #2D5438;
25
--color-link-hover: #1E3826;
26
--color-support: #D9634E;
27
+
--color-shadows: color-mix(in srgb, var(--color-text), transparent 85%);
28
+
--color-shadows-hover: color-mix(in srgb, var(--color-text), transparent 75%);
29
--color-border: color-mix(in srgb, currentcolor, transparent 50%);
30
}
31
History
1 round
0 comments
arthr.me
submitted
#0
6 commits
expand
collapse
feat(post): adds author byline setting
docs: update theme docs
fix(layout): softens some shadow colors to increase legibility
feat(layout): move site-related includes to
site dir
feat(layout): adds new custom includes
docs: update dogs with new custom includes
expand 0 comments
pull request successfully merged