| [notion-next.tangly1024.com](https://notion-next.tangly1024.com) |
+| 
| [notion-medium.tangly1024.com](https://notion-medium.tangly1024.com/) |
+| 
| [notion-hexo.tangly1024.com](http://notion-hexo.tangly1024.com/) |
+| 
| [notion-fukasawa.tangly1024.com](https://notion-fukasawa.tangly1024.com/) |
+
+
## 更新日志
请移步 [更新文档](https://docs.tangly1024.com/zh/changelog)查看
@@ -66,13 +87,9 @@
```bash
yarn # 安装依赖
-
yarn run dev # 本地开发
-
yarn run build # 本地打包编译
-
yarn run start # 本地启动NextJS服务
-
```
## 引用技术
@@ -83,9 +100,6 @@ yarn run start # 本地启动NextJS服务
- **评论**: Gitalk, Cusdis, Utterances
- **图标**：[fontawesome](https://fontawesome.com/v5.15/icons?d=gallery)
-## 页面样式主题
-正在开发中..将支持配置文件切换主题
-
## License
The MIT License.
diff --git a/blog.config.js b/blog.config.js
index a6f06c4f..6c22adf3 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -11,7 +11,7 @@ const BLOG = {
LANG: 'zh-CN', // e.g 'zh-CN','en-US' see /lib/lang.js for more.
SINCE: 2021, // e.g if leave this empty, current year will be used.
- BEI_AN: '', // 备案号 闽ICP备XXXXXXX
+ BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX
APPEARANCE: 'auto', // ['light', 'dark', 'auto'],
FONT: 'font-serif tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family
BACKGROUND_LIGHT: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc
diff --git a/components/Comment.js b/components/Comment.js
index 9b47d752..772a3776 100644
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -23,7 +23,7 @@ const Comment = ({ frontMatter }) => {
const router = useRouter()
const { locale } = useGlobal()
return (
-
- {showInfoCard &&
-
+
- Category - {category}
+ const slotTop =
+
}
diff --git a/themes/Medium/LayoutIndex.js b/themes/Medium/LayoutIndex.js
index 3d336bd7..884b825a 100644
--- a/themes/Medium/LayoutIndex.js
+++ b/themes/Medium/LayoutIndex.js
@@ -2,7 +2,6 @@ import BlogPostListPage from './components/BlogPostListPage'
import LayoutBase from './LayoutBase'
export const LayoutIndex = (props) => {
- // const { posts, tags, meta, categories, postCount, latestPosts } = props
return
diff --git a/themes/Medium/LayoutPage.js b/themes/Medium/LayoutPage.js
index 0c6640c8..cec493ce 100644
--- a/themes/Medium/LayoutPage.js
+++ b/themes/Medium/LayoutPage.js
@@ -2,8 +2,7 @@ import LayoutBase from './LayoutBase'
import BlogPostListPage from './components/BlogPostListPage'
export const LayoutPage = (props) => {
- const { page, posts, postCount } = props
return
-
}
diff --git a/themes/Medium/LayoutSearch.js b/themes/Medium/LayoutSearch.js
index c7469a60..4fcbfee6 100644
--- a/themes/Medium/LayoutSearch.js
+++ b/themes/Medium/LayoutSearch.js
@@ -1,31 +1,25 @@
-import { useRouter } from 'next/router'
import LayoutBase from './LayoutBase'
+import BlogPostListPage from './components/BlogPostListPage'
+import SearchInput from './components/SearchInput'
+import { useGlobal } from '@/lib/global'
+import TagGroups from './components/TagGroups'
+import CategoryGroup from './components/CategoryGroup'
+import BlogPostListScroll from './components/BlogPostListScroll'
export const LayoutSearch = (props) => {
- const { posts } = props
- let filteredPosts
- const searchKey = getSearchKey()
- if (searchKey) {
- filteredPosts = posts.filter(post => {
- const tagContent = post.tags ? post.tags.join(' ') : ''
- const searchContent = post.title + post.summary + tagContent
- return searchContent.toLowerCase().includes(searchKey.toLowerCase())
- })
- } else {
- filteredPosts = posts
- }
-
- console.log(filteredPosts)
-
+ const { locale } = useGlobal()
return
- Search {searchKey}
+
+
}
-
-function getSearchKey () {
- const router = useRouter()
- if (router.query && router.query.s) {
- return router.query.s
- }
- return null
-}
diff --git a/themes/Medium/LayoutSlug.js b/themes/Medium/LayoutSlug.js
index cd2a349d..8c5a441d 100644
--- a/themes/Medium/LayoutSlug.js
+++ b/themes/Medium/LayoutSlug.js
@@ -6,20 +6,35 @@ import 'prismjs/components/prism-javascript'
import 'prismjs/components/prism-markup'
import 'prismjs/components/prism-python'
import 'prismjs/components/prism-typescript'
-import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
+import {
+ Code,
+ Collection,
+ CollectionRow,
+ Equation,
+ NotionRenderer
+} from 'react-notion-x'
import LayoutBase from './LayoutBase'
import Comment from '@/components/Comment'
import Image from 'next/image'
import { useGlobal } from '@/lib/global'
import formatDate from '@/lib/formatDate'
import Link from 'next/link'
+import mediumZoom from 'medium-zoom'
+import React, { useEffect, useRef } from 'react'
+import ArticleAround from './components/ArticleAround'
+import Catalog from './components/Catalog'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faEye } from '@fortawesome/free-solid-svg-icons'
+import CategoryItem from './components/CategoryItem'
+import TagItemMini from './components/TagItemMini'
+import CONFIG_MEDIUM from './config_medium'
const mapPageUrl = id => {
return 'https://www.notion.so/' + id.replace(/-/g, '')
}
-export const LayoutSlug = (props) => {
- const { post } = props
+export const LayoutSlug = props => {
+ const { post, prev, next } = props
const meta = {
title: `${post.title} | ${BLOG.TITLE}`,
description: post.summary,
@@ -32,42 +47,124 @@ export const LayoutSlug = (props) => {
post.toc = getPageTableOfContents(post, post.blockMap)
}
const { locale } = useGlobal()
- const date = formatDate(post?.date?.start_date || post.createdTime, locale.LOCALE)
+ const date = formatDate(
+ post?.date?.start_date || post.createdTime,
+ locale.LOCALE
+ )
- return
-
- {post.blockMap && (
-
-
+
+ {/* 桌面端左侧菜单 */}
+ {/*
-
+
+ {/* 移动端底部 */}
+
+
)
}
diff --git a/themes/Medium/LayoutCategory.js b/themes/Medium/LayoutCategory.js
index 3a4bb0e9..34d76d23 100644
--- a/themes/Medium/LayoutCategory.js
+++ b/themes/Medium/LayoutCategory.js
@@ -1,8 +1,13 @@
import LayoutBase from './LayoutBase'
+import BlogPostListScroll from './components/BlogPostListScroll'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTh } from '@fortawesome/free-solid-svg-icons'
export const LayoutCategory = (props) => {
const { category } = props
- return
+ {/* 移动端顶部菜单 */}
+
+
+ {/* 桌面端右侧 */}
+
+ {slotTop}
{children}
+
+
+
+ {slotRight}
+
+
+
+
+
+
+ {locale.NAV.SEARCH}
+
+ {post?.title}
- -
-
-
- {/* Notion文章主体 */}
- {BLOG.AUTHOR}
- {date}
-
-
+ const zoom =
+ typeof window !== 'undefined' &&
+ mediumZoom({
+ container: '.notion-viewport',
+ background: 'rgba(0, 0, 0, 0.2)',
+ margin: getMediumZoomMargin()
+ })
+ const zoomRef = useRef(zoom ? zoom.clone() : null)
+ useEffect(() => {
+ // 将所有container下的所有图片添加medium-zoom
+ const container = document.getElementById('notion-article')
+ const imgList = container?.getElementsByTagName('img')
+ if (imgList && zoomRef.current) {
+ for (let i = 0; i < imgList.length; i++) {
+ zoomRef.current.attach(imgList[i])
+ }
+ }
+ })
+
+ const slotRight = post?.toc && post?.toc?.length > 3 && (
+
+
+
+ <>
+
+ {/* Notion文章主体 */}
+
+ {post.blockMap && (
+
+
+
+ {/* 文章内嵌广告 */}
+
+
+
+
+
+ )
+}
+
+function getMediumZoomMargin () {
+ const width = window.innerWidth
+
+ if (width < 500) {
+ return 8
+ } else if (width < 800) {
+ return 20
+ } else if (width < 1280) {
+ return 30
+ } else if (width < 1600) {
+ return 40
+ } else if (width < 1920) {
+ return 48
+ } else {
+ return 72
+ }
}
diff --git a/themes/Medium/LayoutTag.js b/themes/Medium/LayoutTag.js
index 5cfacb20..042daf1c 100644
--- a/themes/Medium/LayoutTag.js
+++ b/themes/Medium/LayoutTag.js
@@ -1,8 +1,13 @@
import LayoutBase from './LayoutBase'
+import BlogPostListScroll from './components/BlogPostListScroll'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTag } from '@fortawesome/free-solid-svg-icons'
export const LayoutTag = (props) => {
const { tag } = props
- return
- Tag - {tag}
+ const slotTop =
+
}
diff --git a/themes/Medium/components/ArticleAround.js b/themes/Medium/components/ArticleAround.js
new file mode 100644
index 00000000..577198cc
--- /dev/null
+++ b/themes/Medium/components/ArticleAround.js
@@ -0,0 +1,26 @@
+import Link from 'next/link'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faAngleDoubleLeft, faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons'
+
+/**
+ * 上一篇，下一篇文章
+ * @param {prev,next} param0
+ * @returns
+ */
+export default function ArticleAround ({ prev, next }) {
+ if (!prev || !next) {
+ return <>
+ }
+ return
+
+
+
+}
diff --git a/themes/Medium/components/BlogPostCard.js b/themes/Medium/components/BlogPostCard.js
index a9e1ee5c..f2c93a7c 100644
--- a/themes/Medium/components/BlogPostCard.js
+++ b/themes/Medium/components/BlogPostCard.js
@@ -4,8 +4,10 @@ import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Link from 'next/link'
import React from 'react'
-import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
+import { Code, Collection, Equation, NotionRenderer } from 'react-notion-x'
import CONFIG_MEDIUM from '../config_medium'
+import CategoryItem from './CategoryItem'
+import TagItemMini from './TagItemMini'
const BlogPostCard = ({ post, showSummary }) => {
const showPreview = CONFIG_MEDIUM.POST_LIST_PREVIEW && post.blockMap
@@ -15,13 +17,19 @@ const BlogPostCard = ({ post, showSummary }) => {
+
-
+ )
+
+ return (
+ {post?.title}
+
+ {BLOG.AUTHOR}
+
+
+
+ {date}
+
+
+
+ { CONFIG_MEDIUM.POST_DETAIL_CATEGORY && }
+
+
+ { CONFIG_MEDIUM.POST_DETAIL_TAG && post?.tagItems?.map(tag =>
+
-
+
{post.title}
-
- {post.date.start_date}
+
+ }
+ { CONFIG_MEDIUM.POST_LIST_TAG && post?.tagItems?.map(tag =>
+
+ {post.date.start_date}
+ { CONFIG_MEDIUM.POST_LIST_CATEGORY &&
+
{(!showPreview || showSummary) &&
@@ -36,7 +44,6 @@ const BlogPostCard = ({ post, showSummary }) => {
components={{
equation: Equation,
code: Code,
- collectionRow: CollectionRow,
collection: Collection
}}
/>
diff --git a/themes/Medium/components/BlogPostListPage.js b/themes/Medium/components/BlogPostListPage.js
index fe91b9b0..bac8ab88 100644
--- a/themes/Medium/components/BlogPostListPage.js
+++ b/themes/Medium/components/BlogPostListPage.js
@@ -2,6 +2,7 @@ import BlogPostCard from './BlogPostCard'
import BLOG from '@/blog.config'
import BlogPostListEmpty from './BlogPostListEmpty'
import PaginationSimple from './PaginationSimple'
+import { useRouter } from 'next/router'
/**
* 文章列表分页表格
diff --git a/themes/Medium/components/BlogPostListScroll.js b/themes/Medium/components/BlogPostListScroll.js
new file mode 100644
index 00000000..1b2334cc
--- /dev/null
+++ b/themes/Medium/components/BlogPostListScroll.js
@@ -0,0 +1,106 @@
+import BLOG from '@/blog.config'
+import BlogPostCard from './BlogPostCard'
+import BlogPostListEmpty from './BlogPostListEmpty'
+import { useGlobal } from '@/lib/global'
+import throttle from 'lodash.throttle'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { useRouter } from 'next/router'
+
+/**
+ * 博客列表滚动分页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListScroll = ({ posts = [], currentSearch }) => {
+ const postsPerPage = BLOG.POSTS_PER_PAGE
+ const [page, updatePage] = useState(1)
+ let filteredPosts = Object.assign(posts)
+ const searchKey = getSearchKey()
+ if (searchKey) {
+ filteredPosts = posts.filter(post => {
+ const tagContent = post.tags ? post.tags.join(' ') : ''
+ const searchContent = post.title + post.summary + tagContent
+ return searchContent.toLowerCase().includes(searchKey.toLowerCase())
+ })
+ }
+ const postsToShow = getPostByPage(page, filteredPosts, postsPerPage)
+
+ let hasMore = false
+ if (filteredPosts) {
+ const totalCount = filteredPosts.length
+ hasMore = page * postsPerPage < totalCount
+ }
+
+ const handleGetMore = () => {
+ if (!hasMore) return
+ updatePage(page + 1)
+ }
+
+ // 监听滚动自动分页加载
+ const scrollTrigger = useCallback(throttle(() => {
+ const scrollS = window.scrollY + window.outerHeight
+ const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0
+ if (scrollS > clientHeight + 100) {
+ handleGetMore()
+ }
+ }, 500))
+
+ // 监听滚动
+ useEffect(() => {
+ window.addEventListener('scroll', scrollTrigger)
+ return () => {
+ window.removeEventListener('scroll', scrollTrigger)
+ }
+ })
+
+ const targetRef = useRef(null)
+ const { locale } = useGlobal()
+
+ if (!postsToShow || postsToShow.length === 0) {
+ return
+
+ {/* 文章列表 */}
+
+ }
+}
+
+/**
+ * 获取从第1页到指定页码的文章
+ * @param page 第几页
+ * @param totalPosts 所有文章
+ * @param postsPerPage 每页文章数量
+ * @returns {*}
+ */
+const getPostByPage = function (page, totalPosts, postsPerPage) {
+ return totalPosts.slice(
+ 0,
+ postsPerPage * page
+ )
+}
+
+function getSearchKey () {
+ const router = useRouter()
+ if (router.query && router.query.s) {
+ return router.query.s
+ }
+ return null
+}
+
+export default BlogPostListScroll
diff --git a/themes/Medium/components/BottomMenuBar.js b/themes/Medium/components/BottomMenuBar.js
new file mode 100644
index 00000000..f81af654
--- /dev/null
+++ b/themes/Medium/components/BottomMenuBar.js
@@ -0,0 +1,27 @@
+import { faHome, faSearch } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Link from 'next/link'
+import React from 'react'
+import JumpToTopButton from '@/themes/Medium/components/JumpToTopButton'
+
+export default function BottomMenuBar ({ className }) {
+ return (
+
+ {postsToShow.map(post => (
+
+ ))}
+
+
+
+
+ {
+ handleGetMore()
+ }}
+ 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} 😰`}
+
+
+ )
+}
diff --git a/themes/Medium/components/Catalog.js b/themes/Medium/components/Catalog.js
new file mode 100644
index 00000000..b1dc71ba
--- /dev/null
+++ b/themes/Medium/components/Catalog.js
@@ -0,0 +1,85 @@
+import React from 'react'
+import throttle from 'lodash.throttle'
+import { uuidToId } from 'notion-utils'
+import Progress from './Progress'
+import JumpToTopButton from './JumpToTopButton'
+/**
+ * 目录导航组件
+ * @param toc
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Catalog = ({ toc }) => {
+ // 无目录就直接返回空
+ if (!toc || toc.length < 1) {
+ return <>
+ }
+ // 监听滚动事件
+ React.useEffect(() => {
+ window.addEventListener('scroll', actionSectionScrollSpy)
+ actionSectionScrollSpy()
+ return () => {
+ window.removeEventListener('scroll', actionSectionScrollSpy)
+ }
+ }, [])
+
+ // 同步选中目录事件
+ const [activeSection, setActiveSection] = React.useState(null)
+ const throttleMs = 100
+ const actionSectionScrollSpy = React.useCallback(throttle(() => {
+ const sections = document.getElementsByClassName('notion-h')
+ let prevBBox = null
+ let currentSectionId = activeSection
+ for (let i = 0; i < sections.length; ++i) {
+ const section = sections[i]
+ if (!section || !(section instanceof Element)) continue
+ if (!currentSectionId) {
+ currentSectionId = section.getAttribute('data-id')
+ }
+ const bbox = section.getBoundingClientRect()
+ const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
+ const offset = Math.max(150, prevHeight / 4)
+ // GetBoundingClientRect returns values relative to viewport
+ if (bbox.top - offset < 0) {
+ currentSectionId = section.getAttribute('data-id')
+ prevBBox = bbox
+ continue
+ }
+ // No need to continue loop, if last element has been detected
+ break
+ }
+ setActiveSection(currentSectionId)
+ }, throttleMs))
+
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+
+}
+
+export default Catalog
diff --git a/themes/Medium/components/CategoryGroup.js b/themes/Medium/components/CategoryGroup.js
new file mode 100644
index 00000000..276577c1
--- /dev/null
+++ b/themes/Medium/components/CategoryGroup.js
@@ -0,0 +1,22 @@
+import { faTh } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React from 'react'
+import CategoryItem from './CategoryItem'
+
+const CategoryGroup = ({ currentCategory, categories }) => {
+ if (!categories) {
+ return <>
+ }
+ return
+
+
+
+
+
+}
+
+export default CategoryGroup
diff --git a/themes/Medium/components/CategoryItem.js b/themes/Medium/components/CategoryItem.js
new file mode 100644
index 00000000..5af5cee7
--- /dev/null
+++ b/themes/Medium/components/CategoryItem.js
@@ -0,0 +1,16 @@
+import Link from 'next/link'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faFolderOpen, faFolder } from '@fortawesome/free-solid-svg-icons'
+
+export default function CategoryItem ({ selected, category, categoryCount }) {
+ return
+
+
+ {Object.keys(categories).map(category => {
+ const selected = currentCategory === category
+ const categoryCount = +categories[category]
+ return
+ })}
+
+
-
{ Router.push('/about') }}>
+ return
+
}
export default InfoCard
diff --git a/themes/Medium/components/JumpToTopButton.js b/themes/Medium/components/JumpToTopButton.js
new file mode 100644
index 00000000..6eab4596
--- /dev/null
+++ b/themes/Medium/components/JumpToTopButton.js
@@ -0,0 +1,28 @@
+import { useGlobal } from '@/lib/global'
+import { faArrowUp } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React from 'react'
+import CONFIG_MEDIUM from '../config_medium'
+
+/**
+ * 跳转到网页顶部
+ * 当屏幕下滑500像素后会出现该控件
+ * @param targetRef 关联高度的目标html标签
+ * @param showPercent 是否显示百分比
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const JumpToTopButton = ({ showPercent = false, percent, className }) => {
+ if (!CONFIG_MEDIUM.WIDGET_TO_TOP) {
+ return <>
+ }
+ const { locale } = useGlobal()
+ return (
+
-
+ { Router.push('/about') }}>
{
className='rounded-full'
/>
- {BLOG.AUTHOR}
- {BLOG.BIO}
+ {BLOG.AUTHOR}
+ {BLOG.BIO}
window.scrollTo({ top: 0, behavior: 'smooth' })} >
+
)
+}
+
+export default JumpToTopButton
diff --git a/themes/Medium/components/LeftMenuBar.js b/themes/Medium/components/LeftMenuBar.js
new file mode 100644
index 00000000..680855c2
--- /dev/null
+++ b/themes/Medium/components/LeftMenuBar.js
@@ -0,0 +1,16 @@
+import Link from 'next/link'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faHome } from '@fortawesome/free-solid-svg-icons'
+import React from 'react'
+
+export default function LeftMenuBar () {
+ return
+
+ {showPercent && ({percent}%
)}
+
+
+
+
+
+}
diff --git a/themes/Medium/components/LogoBar.js b/themes/Medium/components/LogoBar.js
index 75a23aec..c4fb5b1d 100644
--- a/themes/Medium/components/LogoBar.js
+++ b/themes/Medium/components/LogoBar.js
@@ -1,25 +1,14 @@
import BLOG from '@/blog.config'
-import { useGlobal } from '@/lib/global'
-import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Link from 'next/link'
export default function LogoBar () {
- const { locale } = useGlobal()
-
return
+
+
+
-
+
}
diff --git a/themes/Medium/components/PaginationSimple.js b/themes/Medium/components/PaginationSimple.js
index 5eb30af8..8006421d 100644
--- a/themes/Medium/components/PaginationSimple.js
+++ b/themes/Medium/components/PaginationSimple.js
@@ -6,14 +6,15 @@ import { useGlobal } from '@/lib/global'
/**
* 简易翻页插件
* @param page 当前页码
- * @param showNext 是否有下一页
+ * @param totalPage 是否有下一页
* @returns {JSX.Element}
* @constructor
*/
-const PaginationSimple = ({ page, showNext }) => {
+const PaginationSimple = ({ page, totalPage }) => {
const { locale } = useGlobal()
const router = useRouter()
const currentPage = +page
+ const showNext = currentPage <= totalPage
return (
+
+
+
+ {BLOG.TITLE}
+
+
{
+ const currentRef = targetRef?.current || targetRef
+ const [percent, changePercent] = useState(0)
+ const scrollListener = () => {
+ const target = currentRef || document.getElementById('container')
+ if (target) {
+ const clientHeight = target.clientHeight
+ const scrollY = window.pageYOffset
+ const fullHeight = clientHeight - window.outerHeight
+ let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
+ if (per > 100) per = 100
+ if (per < 0) per = 0
+ changePercent(per)
+ }
+ }
+
+ useEffect(() => {
+ document.addEventListener('scroll', scrollListener)
+ return () => document.removeEventListener('scroll', scrollListener)
+ }, [percent])
+
+ return (
+
+
+ )
+}
+
+export default Progress
diff --git a/themes/Medium/components/RevolverMaps.js b/themes/Medium/components/RevolverMaps.js
new file mode 100644
index 00000000..d839d85d
--- /dev/null
+++ b/themes/Medium/components/RevolverMaps.js
@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react'
+
+export default function RevolverMaps () {
+ const [load, changeLoad] = useState(false)
+ useEffect(() => {
+ if (!load) {
+ initRevolverMaps()
+ changeLoad(true)
+ }
+ })
+ return
+}
+
+function initRevolverMaps () {
+ if (screen.width >= 768) {
+ Promise.all([
+ loadExternalResource('https://rf.revolvermaps.com/0/0/8.js?i=5jnp1havmh9&m=0&c=ff0000&cr1=ffffff&f=arial&l=33')
+ ]).then(() => {
+ console.log('地图加载完成')
+ })
+ }
+}
+
+// 封装异步加载资源的方法
+function loadExternalResource (url) {
+ return new Promise((resolve, reject) => {
+ const container = document.getElementById('revolvermaps')
+ const tag = document.createElement('script')
+ tag.src = url
+ if (tag) {
+ tag.onload = () => resolve(url)
+ tag.onerror = () => reject(url)
+ container.appendChild(tag)
+ }
+ })
+}
diff --git a/themes/Medium/components/SearchInput.js b/themes/Medium/components/SearchInput.js
new file mode 100644
index 00000000..53dc6637
--- /dev/null
+++ b/themes/Medium/components/SearchInput.js
@@ -0,0 +1,77 @@
+import { useRouter } from 'next/router'
+import { useImperativeHandle, useRef, useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSearch, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons'
+
+const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
+ const [searchKey, setSearchKey] = useState(currentSearch || getSearchKey() || '')
+ const [onLoading, setLoadingState] = useState(false)
+ const router = useRouter()
+ const searchInputRef = useRef()
+ useImperativeHandle(cRef, () => {
+ return {
+ focus: () => {
+ searchInputRef?.current?.focus()
+ }
+ }
+ })
+
+ const handleSearch = (key) => {
+ if (key && key !== '') {
+ setLoadingState(true)
+ router.push({ pathname: '/search', query: { s: key } }).then(r => {
+ setLoadingState(false)
+ })
+ } 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 = ''
+ setSearchKey('')
+ }
+
+ const updateSearchKey = (val) => {
+ setSearchKey(val)
+ }
+
+ return
+ {showPercent && (
+
+ {percent}%
+ )}
+
+ updateSearchKey(e.target.value)}
+ defaultValue={searchKey}
+ />
+
+
+}
+
+function getSearchKey () {
+ const router = useRouter()
+ if (router.query && router.query.s) {
+ return router.query.s
+ }
+ return null
+}
+
+export default SearchInput
diff --git a/themes/Medium/components/SocialButton.js b/themes/Medium/components/SocialButton.js
index c50f5984..54b31158 100644
--- a/themes/Medium/components/SocialButton.js
+++ b/themes/Medium/components/SocialButton.js
@@ -10,8 +10,7 @@ import React from 'react'
* @constructor
*/
const SocialButton = () => {
- return { handleSearch(searchKey) }}>
+
+
+ {(searchKey && searchKey.length &&
+
+
+ )}
+
-
}
export default SocialButton
diff --git a/themes/Medium/components/TagGroups.js b/themes/Medium/components/TagGroups.js
new file mode 100644
index 00000000..17da94b4
--- /dev/null
+++ b/themes/Medium/components/TagGroups.js
@@ -0,0 +1,29 @@
+import { faTag } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import TagItemMini from './TagItemMini'
+
+/**
+ * 标签组
+ * @param tags
+ * @param currentTag
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const TagGroups = ({ tags, currentTag }) => {
+ if (!tags) return <>
+ return (
+
+ )
+}
+
+export default TagGroups
diff --git a/themes/Medium/components/TagItemMini.js b/themes/Medium/components/TagItemMini.js
index 9fec9e35..fb7e3013 100644
--- a/themes/Medium/components/TagItemMini.js
+++ b/themes/Medium/components/TagItemMini.js
@@ -5,7 +5,7 @@ import Link from 'next/link'
const TagItemMini = ({ tag, selected = false }) => {
return
diff --git a/themes/Medium/components/TopNavBar.js b/themes/Medium/components/TopNavBar.js
new file mode 100644
index 00000000..b08dc88b
--- /dev/null
+++ b/themes/Medium/components/TopNavBar.js
@@ -0,0 +1,9 @@
+import LogoBar from '@/themes/Medium/components/LogoBar'
+
+export default function TopNavBar ({ className }) {
+ return
+}
diff --git a/themes/Medium/config_medium.js b/themes/Medium/config_medium.js
index 9cb83c84..23d6ac52 100644
--- a/themes/Medium/config_medium.js
+++ b/themes/Medium/config_medium.js
@@ -1,13 +1,22 @@
const CONFIG_MEDIUM = {
POST_LIST_COVER: true, // 文章列表显示图片封面
- POST_LIST_PREVIEW: true, // 显示文章预览
+ POST_LIST_PREVIEW: true, // 列表显示文章预览
+ POST_LIST_CATEGORY: true, // 列表显示文章分类
+ POST_LIST_TAG: true, // 列表显示文章标签
+
+ POST_DETAIL_CATEGORY: true, // 文章显示分类
+ POST_DETAIL_TAG: true, // 文章显示标签
// 菜单
MENU_ABOUT: true, // 显示关于
MENU_CATEGORY: true, // 显示分类
MENU_TAG: true, // 显示标签
MENU_ARCHIVE: true, // 显示归档
- MENU_SEARCH: true // 显示搜索
+ MENU_SEARCH: true, // 显示搜索
+
+ // Widget
+ WIDGET_REVOLVER_MAPS: process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件
+ WIDGET_TO_TOP: true // 跳回顶部
}
export default CONFIG_MEDIUM