mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-29 08:57:03 +02:00
Add About Slash page (#282)
It will show up in the header as "About/" :)
This commit is contained in:
parent
8481791221
commit
be1ea72237
4 changed files with 48 additions and 1 deletions
|
@ -3,7 +3,7 @@ id: custom-pages
|
|||
title: Custom Pages
|
||||
---
|
||||
|
||||
You can add pages to your site that are not part of the standard docs or blog markdown files. You can do this by adding `.js` files to the `website/pages` directory. These files are React components and the `render()` is called to create them, backed by CSS classes, etc.
|
||||
You can add pages to your site that are not part of the standard docs or blog markdown files. You can do this by adding `.js` files to the `website/pages` directory. These files are [React](https://facebook.github.io/react) components and the `render()` is called to create them, backed by CSS classes, etc.
|
||||
|
||||
## Customizing Your Home Page
|
||||
|
||||
|
@ -35,6 +35,8 @@ root-of-repo
|
|||
|
||||
Of course, you are also free to write your own pages. It is strongly suggested that you at least have an index page, but none of the pages provided are mandatory to include in your site. More information on how to use the provided components or include your own can be found [here](api-pages.md). Information on how to link to your different pages in the header navigation bar can be found [here](guides-navigation.md).
|
||||
|
||||
> If you want your page to show up in your navigation header, you will need to update `siteConfig.js` to add to the `headerLinks` element. e.g., `{ page: "about-slash", label: "About/"}`,
|
||||
|
||||
## Adding Static Pages
|
||||
|
||||
Static `.html` files can also be used, but they will not include Docusaurus's header, footer, or styles by default. These can be added to the `static` folder in the same way as other [static assets](api-pages.md#using-static-assets). Alternatively, they can be placed in the `pages` folder and would be served as-is instead of being rendered from React.
|
||||
|
|
44
website/pages/en/about-slash.js
Normal file
44
website/pages/en/about-slash.js
Normal file
|
@ -0,0 +1,44 @@
|
|||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
const React = require("react");
|
||||
|
||||
const CompLibrary = require("../../core/CompLibrary.js");
|
||||
const Container = CompLibrary.Container;
|
||||
const GridBlock = CompLibrary.GridBlock;
|
||||
|
||||
const siteConfig = require(process.cwd() + "/siteConfig.js");
|
||||
|
||||
class AboutSlash extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="pageContainer">
|
||||
<Container className="mainContainer documentContainer postContainer">
|
||||
<h1>About Slash</h1>
|
||||
<img src={`${siteConfig.baseUrl}img/docusaurus.svg`} />
|
||||
<p>
|
||||
Slash is the official mascot of Docusaurus. You will find different variations of her throughout the <a href="https://docusaurus.io">website</a>, whether she is moving fast on her scooter or writing documentation at her standing desk. At Facebook, we have actual Slash plushies -- and you never know, you may see these plushies at various events and conferences in the future.
|
||||
</p>
|
||||
</Container>
|
||||
<Container className="mainContainer">
|
||||
<h2>Birth of Slash</h2>
|
||||
<img src={`${siteConfig.baseUrl}img/slash-birth.png`} />
|
||||
<p>
|
||||
The team sat in a conference room trying to come up with a name for the project. Dinosaurs became a theme, finally landing on Docusaurus, combining documentation with those many dinosaurus that end in "saurus". Of course, we needed a logo for our new project. Eric sat down and designed a logo that was quite beyond the norm of our normal open source project logos, but yet was just so awesome, we had to use it. We needed a name for this cute Docusaur. "Marky" for markdown? "Docky" for documentation? No, "Slash" for the normal way someone starts code documentation in many programming languages <code>//</code> or <code>/*</code> or <code>///</code>. And Slash was born.
|
||||
</p>
|
||||
</Container>
|
||||
<br/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
AboutSlash.defaultProps = {
|
||||
language: "en"
|
||||
};
|
||||
|
||||
module.exports = AboutSlash;
|
|
@ -78,6 +78,7 @@ const siteConfig = {
|
|||
headerLinks: [
|
||||
{ doc: "installation", label: "Docs" },
|
||||
{ page: "help", label: "Help" },
|
||||
{ page: "about-slash", label: "About/"},
|
||||
{ blog: true, label: "Blog" },
|
||||
{
|
||||
href: "https://github.com/facebook/docusaurus",
|
||||
|
|
BIN
website/static/img/slash-birth.png
Normal file
BIN
website/static/img/slash-birth.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 12 KiB |
Loading…
Add table
Add a link
Reference in a new issue