文章加锁功能

2026-06-08 23:16:54 +00:00 · 2022-03-25 14:35:53 +08:00
parent 8f8bcc0b65
commit 803d4315c8
11 changed files with 432 additions and 118 deletions
--- a/themes/medium/components/ArticleDetail.js
+++ b/themes/medium/components/ArticleDetail.js
@@ -0,0 +1,102 @@
+import {
+  Code,
+  Collection,
+  CollectionRow,
+  Equation,
+  NotionRenderer
+} from 'react-notion-x'
+import Comment from '@/components/Comment'
+import Image from 'next/image'
+import Link from 'next/link'
+import ArticleAround from './ArticleAround'
+import CategoryItem from './CategoryItem'
+import TagItemMini from './TagItemMini'
+import CONFIG_MEDIUM from '../config_medium'
+import formatDate from '@/lib/formatDate'
+import { useGlobal } from '@/lib/global'
+
+import 'prismjs'
+import 'prismjs/components/prism-bash'
+import 'prismjs/components/prism-javascript'
+import 'prismjs/components/prism-markup'
+import 'prismjs/components/prism-python'
+import 'prismjs/components/prism-typescript'
+import BLOG from '@/blog.config'
+
+const mapPageUrl = id => {
+  return 'https://www.notion.so/' + id.replace(/-/g, '')
+}
+
+export const ArticleDetail = props => {
+  const { post, prev, next } = props
+  const { locale } = useGlobal()
+
+  const date = formatDate(
+    post?.date?.start_date || post.createdTime,
+    locale.LOCALE
+  )
+  return <>
+    <h1 className="text-4xl pt-12 font-sans dark:text-gray-100">{post?.title}</h1>
+    <section className="flex py-4 items-center font-sans px-1">
+      <Link href="/about" passHref>
+        <>
+          <Image
+            alt={BLOG.AUTHOR}
+            width={25}
+            height={25}
+            loading="lazy"
+            src="/avatar.jpg"
+            className="rounded-full cursor-pointer"
+          />
+          <div className="mr-3 ml-1 text-green-500 cursor-pointer">
+            {BLOG.AUTHOR}
+          </div>
+        </>
+      </Link>
+      <div className="text-gray-500">{date}</div>
+      <div className="hidden busuanzi_container_page_pv text-gray-500 font-light mr-2">
+        <i className="ml-3 mr-0.5 fas fa-eye" />
+        &nbsp;
+        <span className="mr-2 busuanzi_value_page_pv" />
+      </div>
+    </section>
+    {/* Notion文章主体 */}
+    <section id="notion-article" className="px-1 max-w-5xl">
+      {post.blockMap && (
+        <NotionRenderer
+          recordMap={post.blockMap}
+          mapPageUrl={mapPageUrl}
+          components={{
+            equation: Equation,
+            code: Code,
+            collectionRow: CollectionRow,
+            collection: Collection
+          }}
+        />
+      )}
+    </section>
+
+    <section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600  dark:text-gray-400">
+      {/* 文章内嵌广告 */}
+      <ins
+        className="adsbygoogle"
+        style={{ display: 'block', textAlign: 'center' }}
+        data-adtest="on"
+        data-ad-layout="in-article"
+        data-ad-format="fluid"
+        data-ad-client="ca-pub-2708419466378217"
+        data-ad-slot="3806269138"
+      />
+    </section>
+    <section>
+      <div className='flex justify-between'>
+      { CONFIG_MEDIUM.POST_DETAIL_CATEGORY && post.category && <CategoryItem category={post.category}/>}
+      <div>
+      { CONFIG_MEDIUM.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
+      </div>
+      </div>
+      <ArticleAround prev={prev} next={next} />
+      <Comment frontMatter={post} />
+    </section>
+    </>
+}
--- a/themes/medium/components/ArticleLock.js
+++ b/themes/medium/components/ArticleLock.js
@@ -0,0 +1,37 @@
+
+/**
+ * 加密文章校验组件
+ * @param {password, validPassword} props
+ * @param password 正确的密码
+ * @param validPassword(bool) 回调函数，校验正确回调入参为true
+ * @returns
+ */
+export const ArticleLock = props => {
+  const { password, validPassword } = props
+  const submitPassword = () => {
+    const p = document.getElementById('password')
+    if (p && p.value && p.value === password) {
+      validPassword(true)
+    } else {
+      const tips = document.getElementById('tips')
+      if (tips) {
+        tips.innerHTML = ''
+        tips.innerHTML = '<div class=\'text-red-500 animate__shakeX animate__animated\'>密码输入错误</div>'
+      }
+    }
+  }
+
+  return <div className='w-full flex justify-center items-center h-96 font-sans'>
+    <div className='text-center space-y-3'>
+      <div className='font-bold'>文章已加锁，请输入访问密码:</div>
+      <div className='flex'>
+        <input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
+        <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-green-500 hover:bg-green-400 text-white rounded-r duration-300" >
+          <i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;提交</i>
+        </div>
+      </div>
+      <div id='tips'>
+      </div>
+    </div>
+</div>
+}