用 Docusaurus 做了导航站

之前一直都是用 docsify 做的 wiki 和导航站点，但是排版和分类还是不够好，于是就又开始再折腾一份。

Docusaurus

Docusaurus 是基于 React 开发的，而且可以提供原生的 React 编写，这样大大增强了可玩性，比如我可以把主页定制的非常华丽，

在我的定制主页里，我用了几个插件来美化：

• starback：^2.1.4
• typewriter-effect：^2.19.0

starback

用来展示炫酷的 流星效果

这个参数是我用起来感觉特别好看的：

useEffect(() => {
    const starback = new Starback("#canvas", {
        width: document.body.clientWidth,
        height: 300,
        type: 'line',
        speed: 3,
        frequency: 5,
        slope: { x: -1, y: 10 },
        directionX: 1,
        spread: -10,
        randomOpacity: true,
        backgroundColor: [],
        quantity: 30,
    });
}, []);

typewriter-effect

用来展示文字一个个敲出来的效果，非常简单好用，效果也很好

<Typewriter
    options={{
        strings: ['The best way to predict the future is to create it.', '你连圣杯一起侵泡。', '侬好'],
        autoStart: true,
        loop: true,
        wrapperClassName: 'hero__subtitle',
    }}
/>

backdrop-filter

--backdrop-filter 可以让某个区块的元素变成透明模糊质感，和 macOS 的 Safari 顶部的效果是类似的，整体看起来会很现代。

这是我仔细调整过的，可以放到custom css(src/css/custom.css)里来覆盖原始的.

/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

.navbar {
    -webkit-backdrop-filter: var(--backdrop-filter);
    backdrop-filter: var(--backdrop-filter);
    background-color: var(--backdrop-filter-color);
}


/* You can override the default Infima variables here. */
/* https://docusaurus.io/docs/styling-layout */
:root {
    --ifm-color-primary: #4498f1;
    --ifm-color-primary-dark: #2788ef;
    --ifm-color-primary-darker: #1980ee;
    --ifm-color-primary-darkest: #0f69c9;
    --ifm-color-primary-light: #61a8f3;
    --ifm-color-primary-lighter: #6fb0f4;
    --ifm-color-primary-lightest: #9ac8f7;
    --ifm-code-font-size: 95%;
    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
    --backdrop-filter: saturate(180%) blur(15px);
    --backdrop-filter-color: rgba(255, 255, 255, .5);
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
    --ifm-color-primary: #18b7ee;
    --ifm-color-primary-dark: #10a7dc;
    --ifm-color-primary-darker: #0f9ecf;
    --ifm-color-primary-darkest: #0d82ab;
    --ifm-color-primary-light: #30bff0;
    --ifm-color-primary-lighter: #3dc2f1;
    --ifm-color-primary-lightest: #61cef3;
    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
    --backdrop-filter-color: rgba(0, 0, 0, .3);
}

copy right.

官方写的太死了，可以拼接一个函数搞定

在 theme.config.js 设定。

{
    copyright: `Copyright © ${new Date().getFullYear()} Wayne, Inc. Built with Docusaurus.`
}

最后

我还把之前的 Wiki 全部迁移到 Docusaurus 上面了，而且无需进行太多转换，因为两者都是基于 markdown 的，也非常感谢 docsify 所做的一切。