{children}
-
-
- Category - {category}
-
+export const LayoutCategory = props => {
+ const { category, posts } = props
+ const { locale } = useGlobal()
+
+ const [page, updatePage] = useState(1)
+ let hasMore = false
+ const postsToShow = posts
+ ? Object.assign(posts).slice(0, BLOG.POSTS_PER_PAGE * page)
+ : []
+
+ if (posts) {
+ const totalCount = posts.length
+ hasMore = page * BLOG.POSTS_PER_PAGE < totalCount
+ }
+ const handleGetMore = () => {
+ if (!hasMore) return
+ updatePage(page + 1)
+ }
+
+ return (
+
+ Category - {category}
+ {postsToShow.map(p => (
+
+ )
}
diff --git a/themes/empty/LayoutCategoryIndex.js b/themes/empty/LayoutCategoryIndex.js
index fcde0a08..b748b140 100644
--- a/themes/empty/LayoutCategoryIndex.js
+++ b/themes/empty/LayoutCategoryIndex.js
@@ -1,8 +1,25 @@
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
import LayoutBase from './LayoutBase'
export const LayoutCategoryIndex = (props) => {
- // const { tags, allPosts, categories, postCount, latestPosts } = props
+ const { categories } = props
+ const { locale } = useGlobal()
return
- CategoryIndex
+
}
diff --git a/themes/empty/LayoutSearch.js b/themes/empty/LayoutSearch.js
index 52b61ba2..d24024a5 100644
--- a/themes/empty/LayoutSearch.js
+++ b/themes/empty/LayoutSearch.js
@@ -1,41 +1,59 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
+import SearchInput from './components/SearchInput'
import LayoutBase from './LayoutBase'
export const LayoutSearch = props => {
const { keyword, posts } = props
- const router = useRouter()
- const currentSearch = keyword || router?.query?.s
- let handleTextColor = false
useEffect(() => {
setTimeout(() => {
- if (currentSearch && !handleTextColor) {
- const container = document.getElementById('container')
- if (container && container.innerHTML) {
- const re = new RegExp(`${currentSearch}`, 'gim')
- container.innerHTML = container.innerHTML.replace(
- re,
- `${currentSearch}`
- )
- handleTextColor = true
- }
+ const container = document.getElementById('container')
+ if (container && container.innerHTML) {
+ const re = new RegExp(`${keyword}`, 'gim')
+ container.innerHTML = container.innerHTML.replace(re, `${keyword}`)
}
}, 100)
})
+ const { locale } = useGlobal()
+
+ const [page, updatePage] = useState(1)
+ let hasMore = false
+ const postsToShow = posts
+ ? Object.assign(posts).slice(0, BLOG.POSTS_PER_PAGE * page)
+ : []
+
+ if (posts) {
+ const totalCount = posts.length
+ hasMore = page * BLOG.POSTS_PER_PAGE < totalCount
+ }
+ const handleGetMore = () => {
+ if (!hasMore) return
+ updatePage(page + 1)
+ }
+
return (
-
+
-
)
}
diff --git a/themes/empty/LayoutCategory.js b/themes/empty/LayoutCategory.js
index 3a4bb0e9..85d399f6 100644
--- a/themes/empty/LayoutCategory.js
+++ b/themes/empty/LayoutCategory.js
@@ -1,8 +1,48 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useState } from 'react'
import LayoutBase from './LayoutBase'
-export const LayoutCategory = (props) => {
- const { category } = props
- return {children}
+
+
-
+
+
+ {p.title}
+
+
+ ))}
+ {p.summary}
+
+
+
+ {' '}
+ {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
+
+
+
+ {locale.COMMON.CATEGORY}:
+
+
+ {categories && categories.map(category => {
+ return
+
+
+ {category.name}({category.count})
+
+
+ })}
+ Search
-
- {posts.map(p => (
-
- Tag - {tag}
-
+export const LayoutTag = props => {
+ const { tag, posts } = props
+ const { locale } = useGlobal()
+
+ const [page, updatePage] = useState(1)
+
+ let hasMore = false
+ const postsToShow = posts
+ ? Object.assign(posts).slice(0, BLOG.POSTS_PER_PAGE * page)
+ : []
+
+ if (posts) {
+ const totalCount = posts.length
+ hasMore = page * BLOG.POSTS_PER_PAGE < totalCount
+ }
+ const handleGetMore = () => {
+ if (!hasMore) return
+ updatePage(page + 1)
+ }
+
+ return (
+
+ Tag - {tag}
+ {postsToShow.map(p => (
+
+ )
}
diff --git a/themes/empty/LayoutTagIndex.js b/themes/empty/LayoutTagIndex.js
index 01a16e62..3fb41c9f 100644
--- a/themes/empty/LayoutTagIndex.js
+++ b/themes/empty/LayoutTagIndex.js
@@ -1,8 +1,24 @@
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
import LayoutBase from './LayoutBase'
export const LayoutTagIndex = (props) => {
- // const { tags, categories, postCount, latestPosts } = props
+ const { tags } = props
+ const { locale } = useGlobal()
return
- TagIndex
-
+
+ updateSearchKey(e.target.value)}
+ defaultValue={currentSearch || ''}
+ />
+
+
+}
+
+export default SearchInput
diff --git a/themes/fukasawa/LayoutCategoryIndex.js b/themes/fukasawa/LayoutCategoryIndex.js
index f7c8196e..2c9f2298 100644
--- a/themes/fukasawa/LayoutCategoryIndex.js
+++ b/themes/fukasawa/LayoutCategoryIndex.js
@@ -26,5 +26,6 @@ export const LayoutCategoryIndex = (props) => {
})}
-
-
- {p.title}
-
-
- ))}
+ {p.summary}
- Search - {keyword}
+
+
+ {p.title}
+
+
+ ))}
+ {p.summary}
+
+
)
diff --git a/themes/empty/LayoutTag.js b/themes/empty/LayoutTag.js
index 5cfacb20..e1a549f4 100644
--- a/themes/empty/LayoutTag.js
+++ b/themes/empty/LayoutTag.js
@@ -1,8 +1,49 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useState } from 'react'
import LayoutBase from './LayoutBase'
-export const LayoutTag = (props) => {
- const { tag } = props
- return
+ {' '}
+ {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
+
+
+ {p.title}
+
+
+ ))}
+ {p.summary}
+
+
+
+ {' '}
+ {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
+
+
+
}
diff --git a/themes/empty/components/SearchInput.js b/themes/empty/components/SearchInput.js
new file mode 100644
index 00000000..6a95ba01
--- /dev/null
+++ b/themes/empty/components/SearchInput.js
@@ -0,0 +1,87 @@
+import { useRouter } from 'next/router'
+import { useGlobal } from '@/lib/global'
+import { useImperativeHandle, useRef, useState } from 'react'
+
+let lock = false
+
+const SearchInput = ({ currentTag, currentSearch, cRef }) => {
+ const { locale } = useGlobal()
+ const router = useRouter()
+ const searchInputRef = useRef(null)
+ useImperativeHandle(cRef, () => {
+ return {
+ focus: () => {
+ searchInputRef?.current?.focus()
+ }
+ }
+ })
+ const handleSearch = () => {
+ const key = searchInputRef.current.value
+ if (key && key !== '') {
+ router.push({ pathname: '/search/' + key }).then(r => {
+ console.log('搜索', key)
+ })
+ } else {
+ router.push({ pathname: '/' }).then(r => {
+ })
+ }
+ }
+ const handleKeyUp = (e) => {
+ if (e.keyCode === 13) { // 回车
+ handleSearch(searchInputRef.current.value)
+ } else if (e.keyCode === 27) { // ESC
+ cleanSearch()
+ }
+ }
+ const cleanSearch = () => {
+ searchInputRef.current.value = ''
+ setShowClean(false)
+ }
+ function lockSearchInput () {
+ lock = true
+ }
+
+ function unLockSearchInput () {
+ lock = false
+ }
+ const [showClean, setShowClean] = useState(false)
+ const updateSearchKey = (val) => {
+ if (lock) {
+ return
+ }
+ searchInputRef.current.value = val
+ if (val) {
+ setShowClean(true)
+ } else {
+ setShowClean(false)
+ }
+ }
+
+ return {locale.COMMON.TAGS}:
+
+
+
+
+
+ {(showClean &&
+
+
+
+ )}
+