Add facebook Open Graph Url and image. Fix PATH env conflict with Vercel environment

This commit is contained in:
txs
2022-04-04 08:13:18 +08:00
parent 305a476f6f
commit ebdaf4273f
33 changed files with 901 additions and 469 deletions

View File

@@ -44,7 +44,10 @@ export const LayoutArchive = props => {
{post.date.start_date}
</span>{' '}
&nbsp;
<Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
<Link
href={`${BLOG.SUB_PATH}/article/${post.slug}`}
passHref
>
<a className="dark:text-gray-400 dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
{post.title}
</a>

View File

@@ -12,41 +12,63 @@ export const LayoutIndex = props => {
const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
const page = 1
const showNext = page < totalPage && posts.length === BLOG.POSTS_PER_PAGE && posts.length < postCount
const showNext =
page < totalPage &&
posts.length === BLOG.POSTS_PER_PAGE &&
posts.length < postCount
const currentPage = +page
return (
<LayoutBase {...props}>
{posts.map(p => (
<div key={p.id} className='border dark:border-hexo-black-gray p-4 my-12'>
<div
key={p.id}
className="border dark:border-hexo-black-gray p-4 my-12"
>
<Link href={`/article/${p.slug}`}>
<a className='underline cursor-pointer'>{p.title}</a>
<a className="underline cursor-pointer">{p.title}</a>
</Link>
<div>{p.summary}</div>
</div>
))}
<div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>
<Link
href={ {
pathname: (currentPage === 2 ? `${BLOG.PATH || '/'}` : `/page/${currentPage - 1}`), query: router.query.s ? { s: router.query.s } : {}
} } passHref >
<a
rel='prev'
className={`${currentPage === 1 ? 'invisible' : 'visible'} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
<div className="my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2">
<Link
href={{
pathname:
currentPage === 2
? `${BLOG.SUB_PATH || '/'}`
: `/page/${currentPage - 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
>
{locale.PAGINATION.PREV}
</a>
</Link>
<Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
<a
rel='next'
className={`${showNext ? 'visible' : 'invisible'} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
<a
rel="prev"
className={`${
currentPage === 1 ? 'invisible' : 'visible'
} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
>
{locale.PAGINATION.PREV}
</a>
</Link>
<Link
href={{
pathname: `/page/${currentPage + 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
>
{locale.PAGINATION.NEXT}
</a>
</Link>
</div>
<a
rel="next"
className={`${
showNext ? 'visible' : 'invisible'
} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
>
{locale.PAGINATION.NEXT}
</a>
</Link>
</div>
</LayoutBase>
)
}

View File

@@ -4,7 +4,7 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import LayoutBase from './LayoutBase'
export const LayoutPage = (props) => {
export const LayoutPage = props => {
const { page } = props
const { posts, postCount } = props
@@ -12,41 +12,60 @@ export const LayoutPage = (props) => {
const router = useRouter()
const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
const showNext = page < totalPage && posts.length === BLOG.POSTS_PER_PAGE && posts.length < postCount
const showNext =
page < totalPage &&
posts.length === BLOG.POSTS_PER_PAGE &&
posts.length < postCount
const currentPage = +page
return (
<LayoutBase {...props}>
{posts.map(p => (
<div key={p.id} className='border my-12'>
<div key={p.id} className="border my-12">
<Link href={`/article/${p.slug}`}>
<a className='underline cursor-pointer'>{p.title}</a>
<a className="underline cursor-pointer">{p.title}</a>
</Link>
<div>{p.summary}</div>
</div>
))}
<div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>
<Link
href={ {
pathname: (currentPage === 2 ? `${BLOG.PATH || '/'}` : `/page/${currentPage - 1}`), query: router.query.s ? { s: router.query.s } : {}
} } passHref >
<a
rel='prev'
className={`${currentPage === 1 ? 'invisible' : 'visible'} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
<div className="my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2">
<Link
href={{
pathname:
currentPage === 2
? `${BLOG.SUB_PATH || '/'}`
: `/page/${currentPage - 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
>
{locale.PAGINATION.PREV}
</a>
</Link>
<Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
<a
rel='next'
className={`${showNext ? 'visible' : 'invisible'} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
<a
rel="prev"
className={`${
currentPage === 1 ? 'invisible' : 'visible'
} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
>
{locale.PAGINATION.PREV}
</a>
</Link>
<Link
href={{
pathname: `/page/${currentPage + 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
>
{locale.PAGINATION.NEXT}
</a>
</Link>
</div>
<a
rel="next"
className={`${
showNext ? 'visible' : 'invisible'
} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
>
{locale.PAGINATION.NEXT}
</a>
</Link>
</div>
</LayoutBase>
)
}