This commit is contained in:
tangly1024
2022-04-13 14:54:58 +08:00
parent 67506c4644
commit a23810fa59
7 changed files with 20 additions and 21 deletions

View File

@@ -38,7 +38,7 @@ export const LayoutSearch = props => {
<LayoutBase {...props}> <LayoutBase {...props}>
<h2>Search - {keyword}</h2> <h2>Search - {keyword}</h2>
<SearchInput {...props} /> <SearchInput {...props} />
{postsToShow.map(p => ( {postsToShow?.map(p => (
<div key={p.id} className="border my-12"> <div key={p.id} className="border my-12">
<Link href={`/article/${p.slug}`}> <Link href={`/article/${p.slug}`}>
<a className="underline cursor-pointer">{p.title}</a> <a className="underline cursor-pointer">{p.title}</a>

View File

@@ -14,10 +14,9 @@ export const LayoutSearch = (props) => {
const re = new RegExp(`${currentSearch}`, 'gim') const re = new RegExp(`${currentSearch}`, 'gim')
container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${currentSearch}</span>`) container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${currentSearch}</span>`)
} }
}, }, 100)
100)
}) })
return <LayoutBase {...props} currentSearch={currentSearch}> return <LayoutBase {...props} currentSearch={currentSearch}>
<BlogListPage {...props}/> <BlogListPage {...props} />
</LayoutBase> </LayoutBase>
} }

View File

@@ -17,7 +17,7 @@ const BlogListPage = ({ page = 1, posts = [], postCount }) => {
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 [colCount, changeCol] = useState(1) const [colCount, changeCol] = useState(1)
function updateCol () { function updateCol() {
if (window.outerWidth > 1200) { if (window.outerWidth > 1200) {
changeCol(3) changeCol(3)
} else { } else {
@@ -40,7 +40,7 @@ const BlogListPage = ({ page = 1, posts = [], postCount }) => {
<div id="container"> <div id="container">
{/* 文章列表 */} {/* 文章列表 */}
<div style={{ columnCount: colCount }}> <div style={{ columnCount: colCount }}>
{posts.map(post => ( {posts?.map(post => (
<div key={post.id} className='justify-center flex' style={{ breakInside: 'avoid' }}> <div key={post.id} className='justify-center flex' style={{ breakInside: 'avoid' }}>
<BlogCard key={post.id} post={post} /> <BlogCard key={post.id} post={post} />
</div> </div>

View File

@@ -27,7 +27,7 @@ export const LayoutSearch = props => {
const re = new RegExp(`${currentSearch}`, 'gim') const re = new RegExp(`${currentSearch}`, 'gim')
container.innerHTML = container.innerHTML.replace( container.innerHTML = container.innerHTML.replace(
re, re,
`<span class='text-red-500 border-b border-dashed'>${currentSearch}</span>` `<span class='text-red-500 border-b border-dashed'>${currentSearch}</span>`
) )
handleTextColor = true handleTextColor = true
} }
@@ -46,7 +46,7 @@ export const LayoutSearch = props => {
{locale.COMMON.CATEGORY}: {locale.COMMON.CATEGORY}:
</div> </div>
<div id="category-list" className="duration-200 flex flex-wrap mx-8"> <div id="category-list" className="duration-200 flex flex-wrap mx-8">
{categories.map(category => { {categories?.map(category => {
return ( return (
<Link <Link
key={category.name} key={category.name}
@@ -73,7 +73,7 @@ export const LayoutSearch = props => {
{locale.COMMON.TAGS}: {locale.COMMON.TAGS}:
</div> </div>
<div id="tags-list" className="duration-200 flex flex-wrap ml-8"> <div id="tags-list" className="duration-200 flex flex-wrap ml-8">
{tags.map(tag => { {tags?.map(tag => {
return ( return (
<div key={tag.name} className="p-2"> <div key={tag.name} className="p-2">
<TagItemMini key={tag.name} tag={tag} /> <TagItemMini key={tag.name} tag={tag} />

View File

@@ -65,8 +65,8 @@ const BlogPostListScroll = ({ posts = [], currentSearch }) => {
{/* 文章列表 */} {/* 文章列表 */}
<div className='space-y-1 lg:space-y-4'> <div className='space-y-1 lg:space-y-4'>
{postsToShow.map(post => ( {postsToShow?.map(post => (
<BlogPostCard key={post.id} post={post} showSummary={true}/> <BlogPostCard key={post.id} post={post} showSummary={true} />
))} ))}
</div> </div>
@@ -74,7 +74,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch }) => {
<div onClick={() => { <div onClick={() => {
handleGetMore() handleGetMore()
}} }}
className='w-full my-4 py-4 text-center cursor-pointer glassmorphism shadow-xl rounded-xl dark:text-gray-200' className='w-full my-4 py-4 text-center cursor-pointer glassmorphism shadow-xl rounded-xl dark:text-gray-200'
> {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`} </div> > {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`} </div>
</div> </div>
</div> </div>
@@ -95,7 +95,7 @@ const getPostByPage = function (page, totalPosts, postsPerPage) {
) )
} }
function getSearchKey () { function getSearchKey() {
const router = useRouter() const router = useRouter()
if (router.query && router.query.s) { if (router.query && router.query.s) {
return router.query.s return router.query.s

View File

@@ -8,9 +8,9 @@ const CategoryGroup = ({ currentCategory, categories }) => {
return <div id='category-list' className='pt-4'> return <div id='category-list' className='pt-4'>
<div className='mb-2'><i className='mr-2 fas fa-th' />分类</div> <div className='mb-2'><i className='mr-2 fas fa-th' />分类</div>
<div className='flex flex-wrap'> <div className='flex flex-wrap'>
{categories.map(category => { {categories?.map(category => {
const selected = currentCategory === category.name const selected = currentCategory === category.name
return <CategoryItem key={category.name} selected={selected} category={category.name} categoryCount={category.count}/> return <CategoryItem key={category.name} selected={selected} category={category.name} categoryCount={category.count} />
})} })}
</div> </div>
</div> </div>

View File

@@ -13,12 +13,12 @@ const TagGroups = ({ tags, currentTag }) => {
<div id='tags-group' className='dark:border-gray-600 py-4'> <div id='tags-group' className='dark:border-gray-600 py-4'>
<div className='mb-2'><i className='mr-2 fas fa-tag' />标签</div> <div className='mb-2'><i className='mr-2 fas fa-tag' />标签</div>
<div className='space-y-2'> <div className='space-y-2'>
{ {
tags.map(tag => { tags?.map(tag => {
const selected = tag.name === currentTag const selected = tag.name === currentTag
return <TagItemMini key={tag.name} tag={tag} selected={selected} /> return <TagItemMini key={tag.name} tag={tag} selected={selected} />
}) })
} }
</div> </div>
</div> </div>
) )