[置頂] 目前全站設定檔案
· 閱讀時間約 8 分鐘
前端小白
目前全站所有設定
- sidebars.js
- docusaurus.config.js
- custom.css
sidebars.js
/**
* Creating a sidebar enables you to:
- create an ordered group of docs
- render a sidebar for each doc of that group
- provide next/previous navigation
The sidebars can be generated from the filesystem, or explicitly defined here.
Create as many sidebars as you want.
*/
// @ts-check
/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
const sidebars = {
// By default, Docusaurus generates a sidebar from the docs folder structure
tutorialSidebar: [{ type: "autogenerated", dirName: "."}],
// But you can create a sidebar manually
// tutorialSidebar: [
// {
// type:'category',
// label:'test',
// items:['Javascript核心/hello']
// },
// 'Readme',
// 'hello',
// {
// type: 'category',
// label: 'Tutorial',
// items: ['tutorial-basics/create-a-document'],
// },
// ],
};
module.exports = sidebars;
docusaurus.config.js
// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion
const {themes} = require('prism-react-renderer');
const lightTheme = themes.github;
const darkTheme = themes.dracula;
/** @type {import('@docusaurus/types').Config} */
const config = {
themes: ["@docusaurus/theme-live-codeblock"],
title: "Wei的筆記",
tagline: "WeiWei",
favicon: "img/favicon.ico",
// Set the production url of your site here
url: "https://blog.weisite.xyz",
// Set the /<baseUrl>/ pathname under which your site is served
// For GitHub pages deployment, it is often '/<projectName>/'
baseUrl: "/",
// GitHub pages deployment config.
// If you aren't using GitHub pages, you don't need these.
organizationName: "cieliscute", // Usually your GitHub org/user name.
projectName: "blog-docusaurus", // Usually your repo name.
onBrokenLinks: "throw",
onBrokenMarkdownLinks: "warn",
// Even if you don't use internalization, you can use this field to set useful
// metadata like html lang. For example, if your site is Chinese, you may want
// to replace "en" with "zh-Hans".
i18n: {
defaultLocale: "zh-Hant",
locales: ["zh-Hant"],
},
presets: [
[
"@docusaurus/preset-classic",
// "classic",
// /** @type {import('@docusaurus/preset-classic').Options} */
{
docs: {
// 要記得在docs/intro.md內加上slug: / 才會正常運作
routeBasePath: "/note",
path: "note",
sidebarPath: require.resolve("./sidebars.js"),
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
// editUrl:
// "https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/",
showLastUpdateTime: true,
},
blog: {
showReadingTime: true,
// 路由設定的base
routeBasePath: "/article",
// 關於資料夾要參考哪一個的，這邊要設定article，才可以正確抓取到article資料夾下面的文章
path: "article",
blogSidebarTitle: "所有文章",
blogSidebarCount: "ALL",
showLastUpdateAuthor: true,
showLastUpdateTime: true,
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
// editUrl:
// 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
},
// 將上面的blog給註解，並且將下方blog給停用（同時要設定文件下navbar的顯示）
// blog: false,
theme: {
customCss: require.resolve("./src/css/custom.css"),
},
},
],
],
themeConfig:
// /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
{
algolia: {
// The application ID provided by Algolia
appId: "7LIKRKZJSO",
// Public API key: it is safe to commit it
apiKey: "a006d25e9d9c72e3b3bfee8771d4c810",
indexName: "weixyz",
// Optional: see doc section below
contextualSearch: true,
// Optional: Specify domains where the navigation should occur through window.location instead on history.push. Useful when our Algolia config crawls multiple documentation sites and we want to navigate with window.location.href to them.
externalUrlRegex: "external\\.com|domain\\.com",
// Optional: Replace parts of the item URLs from Algolia. Useful when using the same search index for multiple deployments using a different baseUrl. You can use regexp or string in the `from` param. For example: localhost:3000 vs myCompany.com/docs
replaceSearchResultPathname: {
from: "/",
to: "/",
},
// GPT所提供的建議，為了可以搜尋到正確的索引
// Optional: Algolia search parameters
searchParameters: {},
// Optional: path for search page that enabled by default (`false` to disable it)
searchPagePath: "search",
//... other Algolia params
},
tableOfContents: {
minHeadingLevel: 2,
maxHeadingLevel: 5,
},
colorMode: {
defaultMode: "dark",
disableSwitch: false,
respectPrefersColorScheme: false,
},
docs: {
sidebar: {
hideable: true,
autoCollapseCategories: true,
},
},
// Replace with your project's social card
image: "img/docusaurus-social-card.jpg",
navbar: {
title: "This is WEI",
logo: {
alt: "Site Logo",
src: "img/logo.svg",
},
items: [
// 因為前 面parents已經將首頁設定為筆記，所以不需要再額外有一個筆記的list item
// {
// type: "docSidebar",
// sidebarId: "tutorialSidebar",
// position: "left",
// label: "筆記",
// },
// { to: "/blog", label: "Blog", position: "left" },
{
to: "/note",
label: "Note",
position: "left",
},
{
to: "/article",
label: "Article",
position: "left",
},
{
to: "/changelog",
label: "Changelog",
position: "right",
},
// {
// to: "/tags",
// label: "Tags",
// position: "right",
// },
{
href: "https://github.com/cieliscute",
label: "GitHub",
position: "left",
},
],
},
footer: {
style: "light",
links: [
{
title: "關於本站",
items: [
{
label: "Readme",
to: "/note/",
},
// {
// label: "Tags",
// to: "/tags",
// },
],
},
{
title: "聯絡我",
items: [
// {
// label: "Stack Overflow",
// href: "https://stackoverflow.com/questions/tagged/docusaurus",
// },
// {
// label: "Discord",
// href: "https://discordapp.com/users/550602222480785408",
// },
// {
// label: "Twitter",
// href: "https://twitter.com/docusaurus",
// },
{
label: "GitHub",
href: "https://github.com/cieliscute",
},
{
label: "Mail",
to: "mailto:weisite324@gmail.com",
},
],
},
{
title: "More",
items: [
// {
// label: "Blog",
// to: "/blog",
// },
{
label: "Markdown官方文檔",
to: "https://docusaurus.io/zh-CN/docs/markdown-features",
},
],
},
{
title: "參考網站",
items: [
{
label: "另一個Wei的Docusaurus",
to: "https://weiyun0912.github.io/Wei-Docusaurus/",
},
{
label: "PJ大",
to: "https://pjchender.dev/",
},
{
label: "六角RAY助教",
to: "https://israynotarray.com/",
},
{
label: "fooish",
to: "https://www.fooish.com",
},
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} Kaiwei. Built with Docusaurus.`,
},
prism: {
additionalLanguages: ["bash", "diff", "json"],
},
},
plugins: [
// 第二個blog的需求，使用plugins另開一個
[
"@docusaurus/plugin-content-blog",
{
/**
* Required for any multi-instance plugin
*/
id: "changelog",
/**
* URL route for the blog section of your site.
* *DO NOT* include a trailing slash.
*/
routeBasePath: "/changelog",
/**
* Path to data on filesystem relative to site dir.
*/
path: "changelog",
blogSidebarTitle: "所有紀錄",
blogSidebarCount: "ALL",
showLastUpdateAuthor: true,
showLastUpdateTime: true,
// 如果要取消掉側邊欄位的話可以改成0
// blogSidebarCount: 0,
},
],
],
};
module.exports = config;
./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.
*/
[data-theme='dark']{
/* --custom--heading-color:rgb(233, 114, 114);
--ifm-heading-color:var(--custom--heading-color);
--ifm-menu-color-active:var(--custom--heading-color); */
}
:root{
--ifm-heading-color:var(--ifm-menu-color-active);
/* --ifm-link-hover-decoration:none; */
}
.menu__link--active{
font-weight: bolder;
}
/* article a{
position: relative;
}
article a::after{
content: "";
height: 2px;
width: 0%;
background-color: var(--ifm-color-primary-darker);
position: absolute;
top:100%;
left: 0%;
transition: width ease-in-out .5s .3s;
}
article a:hover{
color:var(--ifm-color-primary-darker);
}
article a:hover::after{
width: 100%;
} */
/* ------------------------------------------------ */
/* You can override the default Infima variables here. */
:root {
--ifm-color-primary: #315f7c;
--ifm-color-primary-dark: #2c5570;
--ifm-color-primary-darker: #2a5169;
--ifm-color-primary-darkest: #224257;
--ifm-color-primary-light: #366888;
--ifm-color-primary-lighter: #386d8f;
--ifm-color-primary-lightest: #407ba1;
--ifm-code-font-size: 95%;
/* --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); */
--docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.3); /*custom*/
}
:root[data-theme='dark']{
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); /*custom*/
}
/* For readability concerns, you should choose a lighter palette in dark mode. */
/* dark mode settings1 */
[data-theme='dark'] {
--ifm-color-primary: #ffc677;
--ifm-color-primary-dark: #ffbe64;
--ifm-color-primary-darker: #ffb652;
--ifm-color-primary-darkest: #ff9f1a;
--ifm-color-primary-light: #ffce8a;
--ifm-color-primary-lighter: #ffd69c;
--ifm-color-primary-lightest: #ffedd5;
}
/* dark mode settings2 */
/* [data-theme='dark'] {
--ifm-color-primary: #f2a6da;
--ifm-color-primary-dark: #ed82cb;
--ifm-color-primary-darker: #ea71c4;
--ifm-color-primary-darkest: #e23bae;
--ifm-color-primary-light: #f5b8e1;
--ifm-color-primary-lighter: #f7cae9;
--ifm-color-primary-lightest: #fadbf0;
} */
/* dark mode settings3 */
[data-theme='dark'] {
--ifm-color-primary: #f88282;
--ifm-color-primary-dark: #f77070;
--ifm-color-primary-darker: #f65e5e;
--ifm-color-primary-darkest: #f54c4c;
--ifm-color-primary-light: #f99494;
--ifm-color-primary-lighter: #faa6a6;
--ifm-color-primary-lightest: #fbb8b8;
}
html[data-theme='dark'] {
/* 高量程式碼區塊 */
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
.alert--success{
--ifm-alert-background-color-highlight: rgba(0,164,0,0.30);
}
.alert--warning{
--ifm-alert-background-color-highlight: rgba(255,186,0,0.30);
}
.alert--danger{
--ifm-alert-background-color-highlight: rgba(250,56,62,0.30);
}
.alert--secondary{
--ifm-alert-background-color-highlight: rgba(235,237,240,0.30);
}
.alert--info{
--ifm-alert-background-color-highlight: rgba(84,199,236,0.30);
}
html {
scroll-behavior: smooth;
}
.docs-wrapper h2{
border:solid var(--ifm-color-primary);
border-width: 0px 0px 0px 5px;
padding: .1em 0em .1em .3em;
line-height: 1;
}
iframe.codepen{
margin: 16px 0 16px 0;
}
/* ================================================================== */