kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-04-29 04:35:32 +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 />