kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-03-27 06:55:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(page): show document title on page head

Browse Source
This commit is contained in:
unix
2020-05-26 15:07:29 +08:00
parent 13c42f8082
commit 1da2bd5466
4 changed files with 34 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
lib/components/header.tsx Normal file
View File

@@ -0,0 +1,19 @@
import React from 'react'
import Head from 'next/head'
export interface Meta {
title: string
}
const toCapitalize = (name: string) => {
const [first, ...rest] = name
return `${first.toUpperCase()}${rest.join('')}`
}
const PageHeader: React.FC<{ meta: Meta }> = ({ meta }) => (
<Head>
<title>{meta.title ? `${toCapitalize(meta.title)} | ` : ''}React - ZEIT UI</title>
</Head>
)
export default PageHeader

7
lib/components/layout.tsx
View File

@@ -1,6 +1,7 @@
import React, { useEffect, useState } from 'react'
import { useTheme } from 'components'
import Sidebar from './sidebar'
import PageHeader from './header'
import { useTheme } from 'components'
import TabbarMobile from './sidebar/tabbar-mobile'
import useBodyScroll from 'components/utils/use-body-scroll'
import { useConfigs } from '../config-context'
@@ -14,7 +15,7 @@ export interface Props {
getStaticProps?: any
}
export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(({ children }) => {
export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(({ children, meta }) => {
const theme = useTheme()
const [showAfterRender, setShowAfterRender] = useState<boolean>(false)
const { tabbarFixed } = useConfigs()
@@ -30,6 +31,7 @@ export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(({ ch
if (!showAfterRender)
return (
<section>
<PageHeader meta={meta} />
{children}
<style jsx>{`
section {
@@ -41,6 +43,7 @@ export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(({ ch
)
return (
<div className="layout">
<PageHeader meta={meta} />
<TabbarMobile onClick={mobileTabbarClickHandler} />
<aside className="sidebar">
<Sidebar />

5
pages/en-us/customization/index.tsx
View File

@@ -2,10 +2,15 @@ import React from 'react'
import { Text, Spacer } from 'components'
import CustomizationLayout from 'lib/components/customization/layout'
import CustomizationEditor from 'lib/components/customization/editor'
import PageHeader from 'lib/components/header'
const meta = {
title: 'Customization',
}
const Customization = () => {
return (
<CustomizationLayout>
<PageHeader meta={meta} />
<Spacer y={1.2} />
<Text h2>Customization</Text>
<Text>Custom themes is a very simple thing in ZEIT UI, click change, copy or share.</Text>

5
pages/zh-cn/customization/index.tsx
View File

@@ -2,10 +2,15 @@ import React from 'react'
import { Text, Spacer } from 'components'
import CustomizationLayout from 'lib/components/customization/layout'
import CustomizationEditor from 'lib/components/customization/editor'
import PageHeader from 'lib/components/header'
const meta = {
title: '定制化',
}
const Customization = () => {
return (
<CustomizationLayout>
<PageHeader meta={meta} />
<Spacer y={1.2} />
<Text h2>定制化</Text>
<Text>在 ZEIT UI 中自定义主题非常简单，点击更改，然后拷贝或是分享。</Text>