Uh oh!
There was an error while loading. Please reload this page.
Support content insertion into <head> of a Page - #361
Conversation
<head> of a PageUpdate
|
| const userDefinedVariables = this.userDefinedVariablesMap[path.join(this.rootPath, newBaseUrl)]; | ||
| const headFileMappedData = nunjucks.renderString(headFileContent, userDefinedVariables); | ||
| this.headFileReferences = headFileMappedData.trim(); | ||
| return pageData; |
There was a problem hiding this comment.
Seems like the pageData is not used at all in this method, so it is not necessary.
Therefore, we can call this method before the line this.headFileReferences = nunjucks.renderString(this.headFileReferences, { baseUrl, hostBaseUrl }); instead of doing .then(result => this.collectHeadFiles(result)).
| // Map variables | ||
| const newBaseUrl = calculateNewBaseUrl(this.sourcePath, this.rootPath, this.baseUrlMap) || ''; | ||
| const userDefinedVariables = this.userDefinedVariablesMap[path.join(this.rootPath, newBaseUrl)]; | ||
| const headFileMappedData = nunjucks.renderString(headFileContent, userDefinedVariables); |
There was a problem hiding this comment.
Is this rendering necessary? Seems to still work for me when I commented it out. Also the render method seems to be called again below.
There was a problem hiding this comment.
It is useful if the user predefined a <style> or <link> variable and used it in headFile.md.
The render method below is specifically for resolving {{baseUrl}}.
| ### Inserting content into a page's head element | ||
| While authoring your website, you may want to have your own CSS or Javascript file to be included in a page. |
| - More than one head file can be created for different pages. | ||
| - Author your `<style>` elements for CSS files and `<link>` elements for Javascript files using HTML as shown below. | ||
| - Ensure that any url starts from the root directory <code>{<span></span>{baseUrl}}/</code> when you are referencing your files. |
There was a problem hiding this comment.
Ensure that any url starts... -> Ensure that your URLs start...... from the root directory {{baseUrl}} ... -> ... from the root directory, by using {{baseUrl}} ...
| <script src="{{baseUrl}}/yourScriptFolder/myCustomScript.js"></script> | ||
| ``` | ||
| - Specify the head file in pages that you want it, within the [front matter](#front-matter) `head` attribute. |
There was a problem hiding this comment.
...that you want it, within the... -> ...that uses it, by specifying the...
| ``` | ||
| The head file contents will be placed near the end of the page's head tag. | ||
| It will override existing Bootstrap and MarkBind CSS styles if there is an overlap. |
There was a problem hiding this comment.
It will... -> Your head file will...there is an overlap -> there is an overlap of classes.
There was a problem hiding this comment.
... overlap of classes -> ... overlap of selectors
yamgent
commented
Jul 24, 2018
Also by any chance, is it possible to support live preview for changes to the |
Chng-Zhi-Xuan
commented
Jul 24, 2018
Update
|
| ```html | ||
| <!-- In _markbind/head/compiledRef.md --> | ||
| <link rel="stylesheet" href="{{baseUrl}}/yourCSSFolder/subfolder/myCustomStyle.css"> |
There was a problem hiding this comment.
{{baseUrl}} is not getting rendered (see Netlify preview).
yamgent
commented
Jul 25, 2018
@Chng-Zhi-Xuan the commits need to be squashed. As discussed with Prof, we can live with the Will merge it as soon as it is squashed. |
d8830c8 to
7c7600fCompareChng-Zhi-Xuan
commented
Jul 25, 2018
Update
|
damithc
commented
Jul 25, 2018
@Chng-Zhi-Xuan I'm having trouble getting this to work in website-base. Can you try it out?
I got the feature to work in other places. In fact I can include |
damithc
commented
Jul 25, 2018
To add to the above, full code available in the |
Chng-Zhi-Xuan
commented
Jul 25, 2018
Findings:
This is intended behaviour as A quick fix is to specify |
damithc
commented
Jul 25, 2018
Indeed that should be the problem. My bad. Sorry. Thanks for the help. |
What is the purpose of this pull request? (put "X" next to an item, remove the rest)
• [x] New feature
Resolves#355
What is the rationale for this request?
User would like to easily insert their own script or css files into the
<head>of a page.What changes did you make? (Give an overview)
headfolder within the_markbindfolder.head fileinfront-matterpage.ejstemplate to insert content fromhead filetest_siteIs there anything you'd like reviewers to focus on?
nunjucks.renderStringwithincollectHeadFilesTesting instructions:
test_sitefolder.markbind serveand check console for the success message from inserted scriptmyCustomHead.mdmarkbind serveand you should see the<head>having your newly authored content frommyCustomHead.mdalong with the files inSourcestab (in Chrome).