設計

這是我網站的設計。

Color

Callout

💡
Sphinx of black quartz, judge my vow.

Info

ℹ️
Sphinx of black quartz, judge my vow.

Warning

⚠️
Sphinx of black quartz, judge my vow.

Error

🚫
Sphinx of black quartz, judge my vow.

Custom icon

🤪
Sphinx of black quartz, judge my vow.

Inline code

const fn = () => console.log('Hello world!')const fn = () => console.log('Hello world!')

Code block

Basic

const MyComponent = () => {
  const [mounted, setMounted] = React.useState(false)
 
  React.useEffect(() => setMounted(true), [])
 
  if (!mounted) return 'Loading ...'
 
  return <div> ... </div>
}
 
export default MyComponent
const MyComponent = () => {
  const [mounted, setMounted] = React.useState(false)
 
  React.useEffect(() => setMounted(true), [])
 
  if (!mounted) return 'Loading ...'
 
  return <div> ... </div>
}
 
export default MyComponent

With line numbers, line and word highlighting

const MyComponent = () => {
  const [mounted, setMounted] = React.useState(false)
 
  React.useEffect(() => setMounted(true), [])
 
  if (!mounted) return 'Loading ...'
 
  return <div> ... </div>
}
 
export default MyComponent
const MyComponent = () => {
  const [mounted, setMounted] = React.useState(false)
 
  React.useEffect(() => setMounted(true), [])
 
  if (!mounted) return 'Loading ...'
 
  return <div> ... </div>
}
 
export default MyComponent

With title

app/components/MyComponent.tsx
const MyComponent = () => {
  const [mounted, setMounted] = React.useState(false)
 
  React.useEffect(() => setMounted(true), [])
 
  if (!mounted) return 'Loading ...'
 
  return <div> ... </div>
}
 
export default MyComponent
app/components/MyComponent.tsx
const MyComponent = () => {
  const [mounted, setMounted] = React.useState(false)
 
  React.useEffect(() => setMounted(true), [])
 
  if (!mounted) return 'Loading ...'
 
  return <div> ... </div>
}
 
export default MyComponent

Tree

app
layout.tsx
not-found.tsx
page.tsx
providers.tsx
config
colors.ts
giscus.ts
site.ts
hooks
useFormattedDate.ts
useHeadings.ts
useScrollspy.ts