diff --git a/docs/userGuide/contentAuthoring.md b/docs/userGuide/contentAuthoring.md
index 6721c4c358..fde6e0186c 100644
--- a/docs/userGuide/contentAuthoring.md
+++ b/docs/userGuide/contentAuthoring.md
@@ -589,9 +589,9 @@ Note:
- Footers should not be nested in other components or HTML tags. If found inside, they will be shifted outside to be rendered properly.
- [MarkBind components](#use-components) and [includes](#include-contents) are not supported in footers.
-### Themes
+### Layouts
-A theme is a set of styles that can be applied to a page, or glob of pages. It consists of the following files:
+A layout is a set of styles that can be applied to a page, or glob of pages. It consists of the following files:
- `footer.md` : See [Using Footers](#using-footers)
- `head.md` : See [Inserting content into a page's head element](#inserting-content-into-a-pages-head-element)
@@ -601,27 +601,27 @@ A theme is a set of styles that can be applied to a page, or glob of pages. It c
These files will be automatically appended to a page upon generation, allowing you to quickly apply styles to a batch of pages at once.
-Themes can be found in `_markbind/themes`. Markbind will generate a default theme with blank files in `_markbind/themes/default`. The default theme is automatically applied to every single page.
+Layouts can be found in `_markbind/layouts`. Markbind will generate a default layout with blank files in `_markbind/layouts/default`. The default layout is automatically applied to every single page.
-To make a new theme, simply copy and rename the `default` folder (e.g. `_markbind/themes/myTheme`) and edit the files within.
+To make a new layout, simply copy and rename the `default` folder (e.g. `_markbind/layout/myLayout`) and edit the files within.
-A page can be assigned a theme in two ways:
+A page can be assigned a layout in two ways:
- Using `site.json`
```js
-// Theme A will be applied to all index.md files
+// Layout A will be applied to all index.md files
{
"glob": "**/index.md",
- "theme": "ThemeA"
+ "layout": "LayoutA"
},
-// Theme B will be applied to index2.md
+// Layout B will be applied to index2.md
{
"src": "index2.md",
- "theme": "ThemeB"
+ "layout": "LayoutB"
},
-// No Theme - default theme will be applied
+// No Layout - default layout will be applied
{
"src": "index3.md"
},
@@ -629,10 +629,10 @@ A page can be assigned a theme in two ways:
- Using `frontMatter`
```html
- theme: themeA
+ layout: layoutA
head: head.md
```
-Note that the `frontMatter` theme takes precedence over `site.json` and any files specified in `frontMatter` will take precedence over theme files (`head.md` for example).
+Note that the `frontMatter` layout takes precedence over `site.json` and any files specified in `frontMatter` will take precedence over layout files (`head.md` for example).
diff --git a/lib/Page.js b/lib/Page.js
index 1d47f4eea7..f2f9241d2b 100644
--- a/lib/Page.js
+++ b/lib/Page.js
@@ -15,11 +15,11 @@ const md = require('./markbind/lib/markdown-it');
const FOOTERS_FOLDER_PATH = '_markbind/footers';
const HEAD_FOLDER_PATH = '_markbind/head';
const NAVIGATION_FOLDER_PATH = '_markbind/navigation';
-const THEME_DEFAULT_NAME = 'default';
-const THEME_FOLDER_PATH = '_markbind/themes';
-const THEME_NAVIGATION = 'navigation.md';
-const THEME_HEAD = 'head.md';
-const THEME_FOOTER = 'footer.md';
+const LAYOUT_DEFAULT_NAME = 'default';
+const LAYOUT_FOLDER_PATH = '_markbind/layouts';
+const LAYOUT_NAVIGATION = 'navigation.md';
+const LAYOUT_HEAD = 'head.md';
+const LAYOUT_FOOTER = 'footer.md';
const CONTENT_WRAPPER_ID = 'content-wrapper';
const FLEX_BODY_DIV_ID = 'flex-body';
@@ -55,7 +55,7 @@ function Page(pageConfig) {
this.searchable = pageConfig.searchable;
this.src = pageConfig.src;
this.template = pageConfig.pageTemplate;
- this.theme = pageConfig.theme;
+ this.layout = pageConfig.layout;
this.title = pageConfig.title || '';
this.titlePrefix = pageConfig.titlePrefix;
this.userDefinedVariablesMap = pageConfig.userDefinedVariablesMap;
@@ -346,14 +346,14 @@ Page.prototype.collectFrontMatter = function (includedPage) {
this.frontMatter.src = this.src;
// Title specified in site.json will override title specified in front matter
this.frontMatter.title = (this.title || this.frontMatter.title || '');
- // Theme specified in front matter will override theme specified in site.json
- this.frontMatter.theme = (this.frontMatter.theme || this.theme || '');
+ // Layout specified in front matter will override layout specified in site.json
+ this.frontMatter.layout = (this.frontMatter.layout || this.layout || '');
} else {
// Page is addressable but no front matter specified
this.frontMatter = {
src: this.src,
title: this.title || '',
- theme: THEME_DEFAULT_NAME,
+ layout: LAYOUT_DEFAULT_NAME,
};
}
this.title = this.frontMatter.title;
@@ -380,7 +380,7 @@ Page.prototype.insertFooter = function (pageData) {
if (footer) {
footerFile = path.join(FOOTERS_FOLDER_PATH, footer);
} else {
- footerFile = path.join(THEME_FOLDER_PATH, this.frontMatter.theme, THEME_FOOTER);
+ footerFile = path.join(LAYOUT_FOLDER_PATH, this.frontMatter.layout, LAYOUT_FOOTER);
}
const footerPath = path.join(this.rootPath, footerFile);
if (!fs.existsSync(footerPath)) {
@@ -407,7 +407,7 @@ Page.prototype.insertSiteNav = function (pageData) {
if (siteNav) {
siteNavFile = path.join(NAVIGATION_FOLDER_PATH, siteNav);
} else {
- siteNavFile = path.join(THEME_FOLDER_PATH, this.frontMatter.theme, THEME_NAVIGATION);
+ siteNavFile = path.join(LAYOUT_FOLDER_PATH, this.frontMatter.layout, LAYOUT_NAVIGATION);
}
// Retrieve Markdown file contents
const siteNavPath = path.join(this.rootPath, siteNavFile);
@@ -450,7 +450,7 @@ Page.prototype.collectHeadFiles = function (baseUrl, hostBaseUrl) {
if (head) {
headFile = path.join(HEAD_FOLDER_PATH, head);
} else {
- headFile = path.join(THEME_FOLDER_PATH, this.frontMatter.theme, THEME_HEAD);
+ headFile = path.join(LAYOUT_FOLDER_PATH, this.frontMatter.layout, LAYOUT_HEAD);
}
const headFilePath = path.join(this.rootPath, headFile);
if (!fs.existsSync(headFilePath)) {
@@ -508,7 +508,7 @@ Page.prototype.generate = function (builtFiles) {
const baseUrl = newBaseUrl ? `${this.baseUrl}/${newBaseUrl}` : this.baseUrl;
const hostBaseUrl = this.baseUrl;
- this.addThemeFiles();
+ this.addLayoutFiles();
this.collectHeadFiles(baseUrl, hostBaseUrl);
this.content = nunjucks.renderString(this.content, { baseUrl, hostBaseUrl });
return fs.outputFileAsync(this.resultPath, this.template(this.prepareTemplateData()));
@@ -534,15 +534,15 @@ Page.prototype.generate = function (builtFiles) {
};
/**
- * Adds linked theme files to page assets
+ * Adds linked layout files to page assets
*/
-Page.prototype.addThemeFiles = function () {
- this.asset.themeScript = path.relative(path.dirname(this.resultPath),
- path.join(this.rootPath, THEME_FOLDER_PATH,
- this.frontMatter.theme, 'scripts.js'));
- this.asset.themeStyle = path.relative(path.dirname(this.resultPath),
- path.join(this.rootPath, THEME_FOLDER_PATH,
- this.frontMatter.theme, 'styles.css'));
+Page.prototype.addLayoutFiles = function () {
+ this.asset.layoutScript = path.relative(path.dirname(this.resultPath),
+ path.join(this.rootPath, LAYOUT_FOLDER_PATH,
+ this.frontMatter.layout, 'scripts.js'));
+ this.asset.layoutStyle = path.relative(path.dirname(this.resultPath),
+ path.join(this.rootPath, LAYOUT_FOLDER_PATH,
+ this.frontMatter.layout, 'styles.css'));
};
/**
diff --git a/lib/Site.js b/lib/Site.js
index bcc8b3c441..6ac93bdcca 100644
--- a/lib/Site.js
+++ b/lib/Site.js
@@ -42,9 +42,9 @@ const PAGE_TEMPLATE_NAME = 'page.ejs';
const SITE_CONFIG_NAME = 'site.json';
const SITE_DATA_NAME = 'siteData.json';
const SITE_NAV_PATH = '_markbind/navigation/site-nav.md';
-const THEME_DEFAULT_NAME = 'default';
-const THEME_FILES = ['navigation.md', 'head.md', 'footer.md', 'styles.css', 'scripts.js'];
-const THEME_FOLDER_PATH = '_markbind/themes';
+const LAYOUT_DEFAULT_NAME = 'default';
+const LAYOUT_FILES = ['navigation.md', 'head.md', 'footer.md', 'styles.css', 'scripts.js'];
+const LAYOUT_FOLDER_PATH = '_markbind/layouts';
const USER_VARIABLES_PATH = '_markbind/variables.md';
const SITE_CONFIG_DEFAULT = {
@@ -179,8 +179,8 @@ Site.initSite = function (rootPath) {
const headFolderPath = path.join(rootPath, HEAD_FOLDER_PATH);
const indexPath = path.join(rootPath, INDEX_MARKDOWN_FILE);
const siteNavPath = path.join(rootPath, SITE_NAV_PATH);
- const siteThemePath = path.join(rootPath, THEME_FOLDER_PATH);
- const siteThemeDefaultPath = path.join(siteThemePath, THEME_DEFAULT_NAME);
+ const siteLayoutPath = path.join(rootPath, LAYOUT_FOLDER_PATH);
+ const siteLayoutDefaultPath = path.join(siteLayoutPath, LAYOUT_DEFAULT_NAME);
const userDefinedVariablesPath = path.join(rootPath, USER_VARIABLES_PATH);
// TODO: log the generate info
return new Promise((resolve, reject) => {
@@ -233,28 +233,28 @@ Site.initSite = function (rootPath) {
}
return fs.outputFileAsync(siteNavPath, SITE_NAV_DEFAULT);
})
- .then(() => fs.accessAsync(siteThemePath))
+ .then(() => fs.accessAsync(siteLayoutPath))
.catch(() => {
- if (fs.existsSync(siteThemePath)) {
+ if (fs.existsSync(siteLayoutPath)) {
return Promise.resolve();
}
- return fs.mkdirp(siteThemePath);
+ return fs.mkdirp(siteLayoutPath);
})
- .then(() => fs.accessAsync(siteThemeDefaultPath))
+ .then(() => fs.accessAsync(siteLayoutDefaultPath))
.catch(() => {
- if (fs.existsSync(siteThemeDefaultPath)) {
+ if (fs.existsSync(siteLayoutDefaultPath)) {
return Promise.resolve();
}
- return fs.mkdirp(siteThemeDefaultPath);
+ return fs.mkdirp(siteLayoutDefaultPath);
})
.then(() => {
- THEME_FILES.forEach((themeFile) => {
- const themeFilePath = path.join(siteThemeDefaultPath, themeFile);
- fs.accessAsync(themeFilePath).catch(() => {
- if (fs.existsSync(themeFilePath)) {
+ LAYOUT_FILES.forEach((layoutFile) => {
+ const layoutFilePath = path.join(siteLayoutDefaultPath, layoutFile);
+ fs.accessAsync(layoutFilePath).catch(() => {
+ if (fs.existsSync(layoutFilePath)) {
return Promise.resolve();
}
- return fs.outputFileAsync(themeFilePath, '');
+ return fs.outputFileAsync(layoutFilePath, '');
});
});
})
@@ -304,7 +304,7 @@ Site.prototype.createPage = function (config) {
rootPath: this.rootPath,
searchable: config.searchable,
src: config.pageSrc,
- theme: config.theme,
+ layout: config.layout,
title: config.title || '',
titlePrefix: this.siteConfig.titlePrefix,
headingIndexingLevel: this.siteConfig.headingIndexingLevel || HEADING_INDEXING_LEVEL_DEFAULT,
@@ -357,7 +357,7 @@ Site.prototype.collectAddressablePages = function () {
}).map(globPath => ({
src: globPath,
searchable: addressableGlob.searchable,
- theme: addressableGlob.theme,
+ layout: addressableGlob.layout,
}))), []);
// Add pages collected by walkSync without duplication
this.addressablePages = _.unionWith(this.addressablePages, globPaths,
@@ -584,7 +584,7 @@ Site.prototype.generatePages = function () {
faviconUrl,
pageSrc: page.src,
title: page.title,
- theme: page.theme || THEME_DEFAULT_NAME,
+ layout: page.layout || LAYOUT_DEFAULT_NAME,
searchable: page.searchable !== 'no',
}));
const progressBar = new ProgressBar(`[:bar] :current / ${this.pages.length} pages built`,
diff --git a/lib/template/page.ejs b/lib/template/page.ejs
index 3d77336df5..1593eecb94 100644
--- a/lib/template/page.ejs
+++ b/lib/template/page.ejs
@@ -12,7 +12,7 @@
-
+
<% if (siteNav) { %><% } %>
<%- headFileBottomContent %>
<% if (faviconUrl) { %><% } %>
@@ -30,5 +30,5 @@
const baseUrl = '<%- baseUrl %>'
-
+