You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: README.md
+95
Original file line number
Diff line number
Diff line change
@@ -61,3 +61,98 @@ More information is available in the [Debugging](https://www.11ty.dev/docs/debug
61
61
## Deployment
62
62
63
63
[TBC]
64
+
65
+
## Authoring pages
66
+
67
+
### Page data
68
+
69
+
At the beginning of all pages, there's a block of data wrapped with ---. This is called frontmatter and it will follow a specific schema relative to the page you are on.
70
+
71
+
The frontmatter data is written in [YAML format](https://yaml.org/) using `key: value` pairs.
72
+
73
+
### Markdown and HTML
74
+
75
+
Pages can contain a mix of Markdown and HTML. This means we can intersperse basic content formatting with more bespoke HTML elements in the same file.
76
+
77
+
```
78
+
# Page title
79
+
80
+
A paragraph of text, Markdown style.
81
+
82
+
- Markdown list items
83
+
- Lists are great
84
+
85
+
<article class="bespoke">
86
+
<h2>Stick to HTML</h2>
87
+
</article>
88
+
```
89
+
90
+
The **caveat** here is to ensure that there is always a clear break between Markdown and HTML elements. Mixing and matching the two in a single content block will not work.
91
+
92
+
```
93
+
<!-- This won't work -->
94
+
<article>
95
+
## Trying for a Markdown heading (and failing)
96
+
</article>
97
+
98
+
<!-- This will -->
99
+
<article>
100
+
101
+
## All good here
102
+
103
+
</article>
104
+
```
105
+
106
+
To learn more about what's possible in Markdown, see [Markdown Guide](https://www.markdownguide.org).
107
+
108
+
### Adding links
109
+
110
+
Linking to pages throughout the site works in the same way as linking to pages in standard HTML sites.
111
+
112
+
We'll most likely be using Markdown's link syntax to link to pages. The links we choose can be relative or absolute.
113
+
114
+
Let's use a _blog-posts_ page (`/blog/yyyy/blog-post`) as an example. If we want to link to another blog post page it can be done in two ways:
115
+
116
+
```md
117
+
[Relative link to blog post](../blog-post/)
118
+
119
+
[Root relative link to blog post](/blog/yyyy/blog-post/)
120
+
```
121
+
122
+
If we need to link to another section/page within the site we can use either method shown above. The `../` prefix can be used to traverse further up the site tree:
123
+
124
+
```md
125
+
[Relative link to my parent](../)
126
+
[Relative link to my grandparent](../../)
127
+
[Relative link to a sibling of mine](../sibling-page/)
128
+
```
129
+
130
+
Note: these don't need filename `.md`/`.html` extensions.
131
+
132
+
Only use absolute URLs for links out of the site:
133
+
134
+
```md
135
+
[Absolute link to Ceph.io](https://ceph.io/)
136
+
```
137
+
138
+
### Dynamic values
139
+
140
+
We can interpolate these dynamic values throughout the Markdown. For example, we can save ourselves repeating the page's `title` property for our page title heading by using the `{{ }}` syntax:
0 commit comments