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: index.md
+16-16Lines changed: 16 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ summary: These brief instructions will help you get started quickly with the the
10
10
11
11
## Download or clone the theme
12
12
13
-
First download or clone the theme from the [Github repo](https://github.com/tomjohnson1492/documentation-theme-jekyll). Most likely you won't be pulling in updates once you start customizing the theme, so downloading theme probably makes the most sense.
13
+
First download or clone the theme from the [Github repo](https://github.com/tomjohnson1492/documentation-theme-jekyll). Most likely you won't be pulling in updates once you start customizing the theme, so downloading the theme (instead of cloning it) probably makes the most sense.
14
14
15
15
## Build this theme
16
16
@@ -21,7 +21,9 @@ If you're used to running Jekyll sites, you can type the normal jekyll command,
21
21
22
22
## Customize the Gemfile
23
23
24
-
Open the Gemfile (in any text editor) in the Jekyll doc theme project:
24
+
The Gemfile is how project dependencies are managed. This project doesn't have any dependencies beyond core Jekyll.
25
+
26
+
Open the Gemfile (in any text editor) in the Jekyll doc theme project with the following command:
25
27
26
28
```
27
29
open Gemfile
@@ -58,7 +60,7 @@ There are several products in this theme. Each product uses a different sidebar.
58
60
59
61
The top navigation remains the same, because it allows users to navigate across products. But the sidebar navigation adapts to the product.
60
62
61
-
Because each product uses a different sidebar, you'll need to set up your sidebars. There's a file inside \_includes/custom called "sidebarconfigs.html". This file controls which sidebar gets associated with which product. Open up this file to see its contents.
63
+
Because each product uses a different sidebar, you'll need to set up your sidebars. There's a file inside \_includes/custom called "sidebarconfigs.html." This file controls which sidebar gets associated with which product. Open up this file to see its contents.
62
64
63
65
The sidebarconfigs.html file uses simple `if elsif` logic to set a variable that the sidebar.html file uses to read the sidebar data file. The code in sidebarconfigs.html looks like this:
64
66
@@ -84,25 +86,25 @@ The sidebarconfigs.html file uses simple `if elsif` logic to set a variable that
84
86
85
87
In each page's frontmatter, you must specify the sidebar you want that page to use. Here's an example of the page frontmatter showing the sidebar property:
summary: "You can insert notes, tips, warnings, and important alerts in your content. These notes are stored as shortcodes made available through the linksrefs.hmtl include."
94
-
sidebar: mydoc_sidebar
96
+
<spanclass="red">sidebar: mydoc_sidebar</span>
95
97
permalink: mydoc_alerts
96
98
---
97
-
```
99
+
</pre>
98
100
99
101
The `sidebar: mydoc_sidebar` refers to the \_data/sidebars/mydoc_sidebar.yml file (meaning, the mydoc_sidebar.yml file inside the sidebars subfolder inside the \data folder).
100
102
101
103
If no sidebar assignment is found in the page frontmatter, the default sidebar (specified by the `else` statement) will be shown: `site.data.sidebars.home_sidebar.entries`.
102
104
103
105
Note that your sidebar can only have 2 levels. Given that each product has its own sidebar, this depth should be sufficient (it's really like 3 levels). Deeper nesting goes against usability recommendations.
104
106
105
-
Additionally, each level must have at least one topic before the next level starts. You can't have a second level that contains multiple third levels without having at least one standalone topic in the second level.
107
+
{% include note.html content="Note that each level must have at least one topic before the next level starts. You can't have a second level that contains multiple third levels without having at least one standalone topic in the second level." %}
106
108
107
109
For more detail on the sidebar, see [Sidebar navigation][mydoc_sidebar_navigation].
108
110
@@ -186,9 +188,7 @@ For more detail on the sidebar, see [Sidebar navigation][mydoc_sidebar_navigatio
186
188
187
189
This theme uses relative links throughout so that you can view the site offline and not worry about which server or directory you're hosting it. It's common with tech docs to push content to an internal server for review prior to pushing the content to an external server for publication. Because of the need for seamless transferrence from one host to another, the site has to use relative links.
188
190
189
-
To view pages locally on your machine, they need to have the `.html` extension. However, if you prefer not to have this extension, you can simply remove the `.html` from the sidebar entries, and the pages will still work when you view content on a preview server or web server.
190
-
191
-
The `permalink` property in the page's frontmatter combined with the `include: ['pages']` property in the configuration file is what pushes the files into the root directory when the site builds.
191
+
To view pages locally on your machine (without the Jekyll preview server), they need to have the `.html` extension. The `permalink` property in the page's frontmatter (without surrounding slashes) is what pushes the files into the root directory when the site builds.
192
192
193
193
## Page frontmatter
194
194
@@ -201,22 +201,22 @@ tags: [sample1, sample2]
201
201
keywords: keyword1, keyword2, keyword3
202
202
last_updated: Month day, year
203
203
summary: "optional summary here"
204
-
sidebar: sidebar name
205
-
permalink: filename
204
+
sidebar: sidebarname
205
+
permalink: filename.html
206
206
---
207
207
```
208
208
209
209
(You will customize the values for each of these properties, of course.)
210
210
211
-
For titles, surrounding the title in quotes is optional, but if you have a colon in the title, you must surround the title with quotation marks. If you have a quotation mark within the title, escape it first with a backlash `\`.
211
+
For titles, surrounding the title in quotes is optional, but if you have a colon in the title, you must surround the title with quotation marks. If you have a quotation mark inside the title, escape it first with a backlash `\`.
212
212
213
213
Values for `keywords` get populated into the metadata of the page for SEO.
214
214
215
-
Values for `tags` must be defined in your \_data/tags.yml list. You also need a corresponding tag file inside the tags folder that follows the same pattern as the other tag files shown in the tags folder. (Jekyll wont auto-create these tag files.)
215
+
Values for `tags` must be defined in your \_data/tags.yml list. You also need a corresponding tag file inside the tags folder that follows the same pattern as the other tag files shown in the tags folder. (Jekyll won't auto-create these tag files.)
216
216
217
217
If you don't want the mini-TOC to show on a page (such as for the homepage or landing pages), add `toc: false` in the frontmatter.
218
218
219
-
The `permalink` value should be the same as your filename but without the file extension.
219
+
The `permalink` value should be the same as your filename and include the ".html" file extension.
220
220
221
221
For more detail, see [Pages][mydoc_pages].
222
222
@@ -232,7 +232,7 @@ For more information, see [Pages][mydoc_pages] and [Posts][mydoc_posts].
232
232
233
233
The top navigation bar's menu items are set through the \_data/topnav.yml file. Use the top navigation bar to provide links for navigating from one product to another, or to navigate to external resources.
234
234
235
-
For external URLs, use `external_url` in the item property, as shown in the example topnav.yml file. For internal links, use `url` as usual.
235
+
For external URLs, use `external_url` in the item property, as shown in the example topnav.yml file. For internal links, use `url` the same was you do in the sidebar data files.
236
236
237
237
Note that the topnav has two sections: `topnav`and `topnav_dropdowns`. The topnav section contains single links, while the `topnav_dropdowns` section contains dropdown menus. The two sections are independent of each other.
Copy file name to clipboardExpand all lines: pages/mydoc/mydoc_help_api.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,9 +13,9 @@ folder: mydoc
13
13
14
14
You can create a help API that developers can use to pull in content.
15
15
16
-
For the full code demo, see the notes in the <a target="_blank" href="{{ "/tooltips" | prepend: site.baseurl}}" class="noCrossRef">tooltip demo</a>.
16
+
For the full code demo, see the notes in the [Tooltips file](tooltips.html).
17
17
18
-
In this demo, the popovers pull in and display content from the information in a <a target="_blank" href="{{ "/tooltips.json" | prepend: site.baseurl}}">tooltips.json</a> file located in the same directory.
18
+
In this demo, the popovers pull in and display content from the information in a <atarget="_blank"href="tooltips.json">tooltips.json</a> file located in the same directory.
19
19
20
20
Instead of placing the JSON source in the same directory, you could also host the JSON file on another site.
21
21
@@ -25,7 +25,7 @@ Additionally, instead of tooltip popovers, you could also print content directly
25
25
26
26
Here's a diagram showing the basic idea of the help API:
Is this really an API? Well, sort of. The help content is pushed out into a JSON file that other websites and applications can easily consume. The endpoints don't deliver different data based on parameters added to a URL. But the overall concept is similar to an API: you have a client requesting resources from a server.
31
31
@@ -136,7 +136,7 @@ This code will loop through all pages in the tooltips collection and insert the
136
136
}
137
137
```
138
138
139
-
You can also view the same JSON file here: <a target="_blank" href="{{ "/tooltips.json" | prepend: site.baseurl}}">tooltips.json</a>.
139
+
You can also view the same JSON file here: <atarget="_blank"href="tooltips.json">tooltips.json</a>.
140
140
141
141
You can add different fields depending on how you want the JSON to be structured. Here we just have to fields: `id` and `body`. And the JSON is looking just in the tooltips collection that we created.
142
142
@@ -230,7 +230,7 @@ $.get( url, function( data ) {
230
230
</script>{% endraw %}
231
231
```
232
232
233
-
View the <a target="_blank" href="{{ "/tooltips" | prepend: site.baseurl}}" class="noCrossRef">tooltip demo</a> for a demo.
233
+
View the <atarget="_blank"href="tooltips.html"class="noCrossRef">tooltip demo</a> for a demonstration.
234
234
235
235
The `url` in the demo is relative, but you could equally point it to an absolute path on a remote host assuming CORS is enabled on the host.
236
236
@@ -268,7 +268,7 @@ Again, see the <a class="noCrossRef" href="/tooltips">Tooltip Demo</a> for a dem
268
268
269
269
Note that even though you reference a Bootstrap JS script, Bootstrap's popovers require you to initialize them using the above code as well — they aren't turned on by default.
270
270
271
-
View the source code of the <a target="_blank" href="{{ "/tooltips" | prepend: site.baseurl}}" class="noCrossRef">tooltip demo</a> for the full comments.
271
+
View the source code of the <a target="_blank" href="tooltips.html" class="noCrossRef">tooltip demo</a> for the full comments.
272
272
273
273
## 8. Create easy links to embed the help in your help site
0 commit comments