docusaurus

我没有前端经验,但1天就搞定了开源项目主页

强颜欢笑 提交于 2020-10-16 08:44:26
前言 前段时间打算为自己的开源项目做一个主页,一方面有个好的门面能提升项目的关注度,一方面也能对项目所涉及的资源做一个整合。 其实原先项目已经有一个文档主页,比较简洁,大致长这样: 其实看起来也还可以是不? 这是用docsify做的,docsify是一款优秀的文档生成工具,使用起来比较简单,只需要写内容的markdown文件就可以了,支持markdown的大部分语法,并且自己也扩展了部分语法显示效果。 但是我觉得docsify虽然建文档还不错,但用来建项目主页就有点寒酸了。首先它的定位就是文档工具,其次主题样式不够丰富,页面的定制性也比较差,就这么一个套路。我对于静态建站工具有这么几点要求 主题丰富,美观简洁。毕竟项目首页是一个项目的门面,好看是很重要的。 搭建简单,尽可能的只让我关注内容部分,因为毕竟我对前端并不精通,不想为了建主页而去学一大堆前端知识。 首页需要层次分明,有那种大项目首页的既视感。 页面定制化强,不能千篇一律。 能够最大化整合资源,多级目录。 静态网站生成工具 我带着这些要求去比较了当下常见的静态站点生成工具。最终决定在Hexo,VuePress,Docusaurus这3个当中选。 仔细比较了功能点之后,最终我选择了Docusaurus,原因是....颜值好看。 当然,颜值是重要的一部分,其次的原因是,Hexo烂大街了,而且个人觉得不太适合做开源项目主页

How to add or remove the “open” attribute from all details tags in a react component?

狂风中的少年 提交于 2020-01-25 08:54:09
问题 I have a page with a React component that uses multiple detail/summary tags: const React = require("react"); class samplePage extends React.Component { render() { const siteConfig = this.props.config; return ( <div> <details> <summary> First text detail. </summary> </details> <details> <summary> Second text detail. </summary> </details> <details> <summary> Third text detail. </summary> </details> <button onClick="OpenAll()">Open All Details.</button> <button onClick="CloseAll()">Close All

Custom Search Bar in Docusaurus 2

痞子三分冷 提交于 2020-01-25 03:56:05
问题 I'm just experimenting with Docusaurus V2, i want o enable offline search witth LUNR(https://lunrjs.com/) Search, like described, in this blog. https://v2.docusaurus.io/feedback/p/offline-search i also searched the docs for that. https://v2.docusaurus.io/docs/search/#__docusaurus I installed the with the "yarn swizzle @docusaurus/theme-classic SearchBar" command, but no search bar appeared, when running with "npm start". Besides, a document was created with this content in src/theme/SearchBar

How to create buttons that will show / hide the state of all detail tags in a Docusaurus project?

不羁的心 提交于 2019-12-24 00:52:20
问题 Following from the discussion here and here, I'd like to create two buttons that will show / hide the state of all detail tags in a Docusaurus project. Currently, the best candidate code I have for this is the following: const React = require('react') const {useState} = React; const SamplePage = (props) => { const [isOpen, setIsOpen] = useState(false); const siteConfig = props.config return ( <div> <details open={isOpen}> <summary> First text detail. </summary> <p>testing</p> </details>

How can I add custom scripts in index.html's head part in Docusaurus V2?

两盒软妹~` 提交于 2019-12-21 09:28:13
问题 We are making a website with Docusaurus V2. In Docusaurus V1, there is a scripts setting in siteConfig.js to cusutimize html's head content. But, I cannot find the corresponding setting in Docusaurus V2. According to https://docusaurus.io/blog/2018/09/11/Towards-Docusaurus-2#layout, it seems possible to customize html's <head> part in V2. Layout The current state of Docusaurus is that it is in charge of the entire layout and styling, unintentionally making it very hard for users to customize

How to use the useState() hook to open / close all detail tags In ReactJS? [duplicate]

元气小坏坏 提交于 2019-12-12 03:18:17
问题 This question already has answers here : How to create buttons that will show / hide the state of all detail tags in a Docusaurus project? (2 answers) Closed last month . I have a useState() hook to assert or deny the open ( isOpen ) attribute of 3 detail tags and also 2 button (s) to control the hook, all wrapped in a div : const {useState} = React; const SamplePage = () => { const [isOpen, setIsOpen] = React.useState(false); return ( <div> <details open={isOpen}> <summary> First text detail

How to employ the useState() hook with config props in a Docusaurus project?

╄→гoц情女王★ 提交于 2019-12-11 16:26:33
问题 I'm working with Docusaurus, which provides a siteConfig.js as a config props. As such, I have to use this props to build my site components. Working code is formatted like this: const React = require("react"); class SamplePage extends React.Component { render() { const siteConfig = this.props.config; return <div>{siteConfig.title}</div>; } } module.exports = SamplePage; I have another segment of working code shown in this question, but it uses a different set-up where const {useState} =

Docusaurus fails with IE: Object doesn't support property or method 'assign'

蓝咒 提交于 2019-12-07 20:14:51
问题 We are making a V2 Docusaurus website: https://www.10studio.tech. We have just realized that it does not work well in IE, for instance, IE11. The error message is: Object doesn't support property or method 'assign' . There are some packages to provide with IE compatibility such as core-js , but we don't know how to properly add it to Docusaurus v2. Does anyone know how to amend this? 回答1: The error message is telling you that object doesn't have an assign function . assign is a function which

How can I add custom scripts in index.html's head part in Docusaurus V2?

我们两清 提交于 2019-12-04 04:04:10
We are making a website with Docusaurus V2. In Docusaurus V1, there is a scripts setting in siteConfig.js to cusutimize html's head content. But, I cannot find the corresponding setting in Docusaurus V2. According to https://docusaurus.io/blog/2018/09/11/Towards-Docusaurus-2#layout , it seems possible to customize html's <head> part in V2. Layout The current state of Docusaurus is that it is in charge of the entire layout and styling, unintentionally making it very hard for users to customize their site's appearance to their wishes. For Docusaurus 2, layout and styling should be controlled by