| 1 |
efrain |
1 |
---
|
|
|
2 |
layout: docs
|
|
|
3 |
title: "Adding pages"
|
|
|
4 |
date: 2020-03-02T10:13:29+01:00
|
|
|
5 |
draft: false
|
|
|
6 |
weight: 2
|
|
|
7 |
---
|
|
|
8 |
|
|
|
9 |
## Adding or editing a page in the component library
|
|
|
10 |
|
|
|
11 |
In this step-by-step guide you will create a new page called Breadcrumb navigation and compile it from a markdown text file to a HTML page in the component library.
|
|
|
12 |
|
|
|
13 |
To add a page to the component library on your local machine navigate open your editor or file manager and create a new markdown text file in folder /content/moodle/components/breadcrumbs.md
|
|
|
14 |
|
|
|
15 |
|
|
|
16 |
```
|
|
|
17 |
└── content
|
|
|
18 |
└── moodle
|
|
|
19 |
└── components
|
|
|
20 |
└── breadcrumbs.md
|
|
|
21 |
```
|
|
|
22 |
|
|
|
23 |
Open the file in your favourite editor and start it with some metadata, we call this syntax [frontmatter](https://gohugo.io/content-management/front-matter/).
|
|
|
24 |
|
|
|
25 |
```
|
|
|
26 |
---
|
|
|
27 |
layout: docs
|
|
|
28 |
title: "Breadcrumb navigation"
|
|
|
29 |
date: 2020-03-02T10:13:29+01:00
|
|
|
30 |
draft: false
|
|
|
31 |
---
|
|
|
32 |
```
|
|
|
33 |
|
|
|
34 |
Make sure you add these characters `---` before and after your metadata. You can change the title and date to match your document.
|
|
|
35 |
|
|
|
36 |
## Run the component library Grunt task.
|
|
|
37 |
|
|
|
38 |
In your terminal run the command `npm install` and then `grunt componentlibrary` in your Moodle root folder. This will install all required resources and compile the componentlibrary pages. If you do not have npm installed on your system please visit [npmjs.com](https://www.npmjs.com/get-npm) to learn how to get a working setup.
|
|
|
39 |
|
|
|
40 |
|
|
|
41 |
The output should be similar to this:
|
|
|
42 |
|
|
|
43 |
```
|
|
|
44 |
Running "componentlibrary:docsBuild" task
|
|
|
45 |
Building sites …
|
|
|
46 |
| EN
|
|
|
47 |
+------------------+-----+
|
|
|
48 |
Pages | 113
|
|
|
49 |
Paginator pages | 0
|
|
|
50 |
Non-page files | 18
|
|
|
51 |
Static files | 18
|
|
|
52 |
Processed images | 0
|
|
|
53 |
Aliases | 7
|
|
|
54 |
Sitemaps | 1
|
|
|
55 |
Cleaned | 0
|
|
|
56 |
|
|
|
57 |
Total in 913 ms
|
|
|
58 |
Running "componentlibrary:cssBuild" task
|
|
|
59 |
Rendering Complete, saving .css file...
|
|
|
60 |
Wrote CSS to /var/www/repositories/cl_master/moodle/admin/tool/componentlibrary/hugo/dist/css/docs.css
|
|
|
61 |
Wrote Source Map to /var/www/repositories/cl_master/moodle/admin/tool/componentlibrary/hugo/dist/css/docs.css.map
|
|
|
62 |
Running "componentlibrary:indexBuild" task
|
|
|
63 |
|
|
|
64 |
Done.
|
|
|
65 |
|
|
|
66 |
```
|
|
|
67 |
|
|
|
68 |
The grunt watch task will pick up changes in the componentlibrary Markdown files and Scss files. So run `grunt watch` if you want to edit the pages.
|