mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-11 08:07:26 +02:00
Add the ability to provide custom layout (#128)
* Add the ability to provide custom layout When I designed the system, I added the ability to provide a custom layout that would use arbitrary JavaScript to render some custom pages. This is why files are called "DocsLayout.js", "BlogPostLayout.js"... This ability to customize it was [ripped out](https://github.com/facebook/react-native/blob/master/website/server/convert.js#L78) during the migration to Docusaurus but I need it for the project I'm working on right now (that should remain unnamed!). This adds back the ability to do it in a way that fits the third party system. In order to provide a new layout: 1) Add a `layout` field in the header of your markdown file: ```js --- layout: mylayout --- ``` 2) In your `siteConfig`, add ```js layouts: { mylayout: function({React, Marked}) { return class extends React.Component { render() { return React.createElement('div', {}, this.props.metadata.layout); } } } } ``` I think that it's a reasonable to add and would unblock me :) * Update DocsLayout.js
This commit is contained in:
parent
5693eba5d1
commit
a26bba14c6
2 changed files with 16 additions and 2 deletions
|
@ -18,6 +18,10 @@ class DocsLayout extends React.Component {
|
||||||
const metadata = this.props.metadata;
|
const metadata = this.props.metadata;
|
||||||
const content = this.props.children;
|
const content = this.props.children;
|
||||||
const i18n = translation[this.props.metadata.language];
|
const i18n = translation[this.props.metadata.language];
|
||||||
|
let DocComponent = Doc;
|
||||||
|
if (this.props.Doc) {
|
||||||
|
DocComponent = this.props.Doc;
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<Site
|
<Site
|
||||||
config={this.props.config}
|
config={this.props.config}
|
||||||
|
@ -36,7 +40,8 @@ class DocsLayout extends React.Component {
|
||||||
<div className="docMainWrapper wrapper">
|
<div className="docMainWrapper wrapper">
|
||||||
<DocsSidebar metadata={metadata} />
|
<DocsSidebar metadata={metadata} />
|
||||||
<Container className="mainContainer">
|
<Container className="mainContainer">
|
||||||
<Doc
|
<DocComponent
|
||||||
|
metadata={metadata}
|
||||||
content={content}
|
content={content}
|
||||||
config={this.props.config}
|
config={this.props.config}
|
||||||
source={metadata.source}
|
source={metadata.source}
|
||||||
|
|
|
@ -212,8 +212,17 @@ function execute(port) {
|
||||||
|
|
||||||
removeModuleAndChildrenFromCache("../core/DocsLayout.js");
|
removeModuleAndChildrenFromCache("../core/DocsLayout.js");
|
||||||
const DocsLayout = require("../core/DocsLayout.js");
|
const DocsLayout = require("../core/DocsLayout.js");
|
||||||
|
|
||||||
|
let Doc;
|
||||||
|
if (metadata.layout && siteConfig.layouts[metadata.layout]) {
|
||||||
|
Doc = siteConfig.layouts[metadata.layout]({
|
||||||
|
React,
|
||||||
|
Marked: require("../core/Marked.js")
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
const docComp = (
|
const docComp = (
|
||||||
<DocsLayout metadata={metadata} language={language} config={siteConfig}>
|
<DocsLayout metadata={metadata} language={language} config={siteConfig} Doc={Doc}>
|
||||||
{rawContent}
|
{rawContent}
|
||||||
</DocsLayout>
|
</DocsLayout>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue