Skip to content

Commit de8a41e

Browse files
tangly1024tangly1024
committed
样式调整
1 parent 2822175 commit de8a41e

18 files changed

+562
-97
lines changed

‎blog.config.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,9 @@ const BLOG = {
4141
CONTACT_TELEGRAM: '',
4242

4343
// 悬浮挂件
44-
WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || false, // 是否显示宠物挂件
44+
WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件
4545
WIDGET_PET_LINK: 'https://cdn.jsdelivr.net/npm/[email protected]/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
46+
WIDGET_PET_SWITCH_THEME: true, // 点击宠物挂件切换博客主题
4647

4748
// 评论互动 可同时开启 CUSDIS UTTERRANCES GITALK
4849
COMMENT_CUSDIS_APP_ID: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_APP_ID || '', // data-app-id 36位 see https://cusdis.com/
@@ -78,7 +79,7 @@ const BLOG = {
7879
ADSENSE_GOOGLE_ID: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_ID || '', // 谷歌广告ID e.g ca-pub-xxxxxxxxxxxxxxxx
7980

8081
isProd: process.env.VERCEL_ENV === 'production', // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables) isProd: process.env.VERCEL_ENV === 'production' // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)
81-
VERSION: '2.7.1' // 版本号
82+
VERSION: '2.8.1' // 版本号
8283
}
8384

8485
module.exports = BLOG

‎components/Live2D.js

+6-5
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,11 @@ export default function Live2D () {
1111
const [init, setInit] = useState()
1212
const { switchTheme } = useGlobal()
1313

14-
// if (typeof window !== 'undefined' && !hasLoad) {
15-
// initLive2D()
16-
// hasLoad = true
17-
// }
14+
function handleClick () {
15+
if (BLOG.WIDGET_PET_SWITCH_THEME) {
16+
switchTheme()
17+
}
18+
}
1819

1920
useEffect(() => {
2021
if (!init) {
@@ -23,7 +24,7 @@ export default function Live2D () {
2324
}
2425
}, [init])
2526

26-
return <canvas id="live2d" className='cursor-pointer' width="280" height="250" onClick={switchTheme} alt='切换主题' title='切换主题'/>
27+
return <canvas id="live2d" className='cursor-pointer' width="280" height="250" onClick={handleClick} alt='切换主题' title='切换主题'/>
2728
}
2829

2930
function initLive2D () {

‎lib/theme.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import cookie from 'react-cookies'
22
import BLOG from '@/blog.config'
33

4-
export const ALL_THEME = ['next', 'fukasawa', 'hexo', 'empty', 'medium']
4+
export const ALL_THEME = ['hexo', 'next', 'medium', 'fukasawa', 'empty']
55
/**
66
* 初始化主题
77
* @param isDarkMode

‎themes/empty/LayoutArchive.js

+68-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,69 @@
1-
export const LayoutArchive = (props) => {
2-
// const { posts, tags, categories, postCount } = props
3-
return <div {...props}>
4-
Archive Page
5-
</div>
1+
import BLOG from '@/blog.config'
2+
import { useGlobal } from '@/lib/global'
3+
import Link from 'next/link'
4+
import LayoutBase from './LayoutBase'
5+
6+
export const LayoutArchive = props => {
7+
const { posts } = props
8+
const { locale } = useGlobal()
9+
const postsSortByDate = Object.create(posts)
10+
11+
postsSortByDate.sort((a, b) => {
12+
const dateA = new Date(a?.date.start_date || a.createdTime)
13+
const dateB = new Date(b?.date.start_date || b.createdTime)
14+
return dateB - dateA
15+
})
16+
17+
const meta = {
18+
title: `${locale.NAV.ARCHIVE} | ${BLOG.TITLE}`,
19+
description: BLOG.DESCRIPTION,
20+
type: 'website'
21+
}
22+
23+
const archivePosts = {}
24+
25+
postsSortByDate.forEach(post => {
26+
const date = post.date.start_date.slice(0, 7)
27+
if (archivePosts[date]) {
28+
archivePosts[date].push(post)
29+
} else {
30+
archivePosts[date] = [post]
31+
}
32+
})
33+
return (
34+
<LayoutBase {...props} meta={meta}>
35+
<div className="mb-10 pb-20 md:p-12 p-3 min-h-full">
36+
{Object.keys(archivePosts).map(archiveTitle => (
37+
<div key={archiveTitle}>
38+
<div
39+
className="pt-16 pb-4 text-3xl dark:text-gray-300"
40+
id={archiveTitle}
41+
>
42+
{archiveTitle}
43+
</div>
44+
<ul>
45+
{archivePosts[archiveTitle].map(post => (
46+
<li
47+
key={post.id}
48+
className="border-l-2 p-1 text-xs md:text-base items-center hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
49+
>
50+
<div id={post?.date?.start_date}>
51+
<span className="text-gray-400">
52+
{post.date.start_date}
53+
</span>{' '}
54+
&nbsp;
55+
<Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
56+
<a className="dark:text-gray-400 dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
57+
{post.title}
58+
</a>
59+
</Link>
60+
</div>
61+
</li>
62+
))}
63+
</ul>
64+
</div>
65+
))}
66+
</div>
67+
</LayoutBase>
68+
)
669
}

‎themes/empty/LayoutBase.js

+102-25
Original file line numberDiff line numberDiff line change
@@ -3,54 +3,131 @@ import Live2D from '@/components/Live2D'
33
import Link from 'next/link'
44
import React from 'react'
55
import BLOG from '@/blog.config'
6+
import { useGlobal } from '@/lib/global'
67
/**
78
* 基础布局 采用左右两侧布局，移动端使用顶部导航栏
89
910
* @returns {JSX.Element}
1011
* @constructor
1112
*/
1213
const LayoutBase = props => {
13-
const { children, meta } = props
14+
const { children, meta, customNav } = props
15+
const { locale } = useGlobal()
1416
const d = new Date()
1517
const currentYear = d.getFullYear()
1618
const startYear = BLOG.SINCE && BLOG.SINCE !== currentYear && BLOG.SINCE + '-'
19+
20+
let links = [
21+
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search' },
22+
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive' },
23+
{ icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category' },
24+
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag' }
25+
]
26+
27+
if (customNav) {
28+
links = links.concat(customNav)
29+
}
30+
1731
return (
1832
<div>
1933
<CommonHead meta={meta} />
2034
{/* 导航菜单 */}
2135
<div className="w-full flex justify-center my-2">
22-
<nav className="max-w-6xl space-x-3 underline">
23-
<Link href="/">
24-
<a>首页</a>
25-
</Link>
26-
</nav>
36+
<div className=" max-w-6xl justify-between w-full flex">
37+
<section>
38+
<Link title={BLOG.TITLE} href={'/'}>
39+
<a className={'cursor-pointer flex items-center hover:underline'}>
40+
<i className={'fas fa-home mr-1'} />
41+
<div className="text-center">{BLOG.TITLE} </div>
42+
</a>
43+
</Link>
44+
</section>
45+
<nav className="space-x-3 flex">
46+
{links.map(link => {
47+
if (link) {
48+
return (
49+
<Link key={`${link.to}`} title={link.to} href={link.to}>
50+
<a
51+
className={
52+
'cursor-pointer flex items-center hover:underline'
53+
}
54+
>
55+
<i className={`${link.icon} mr-1`} />
56+
<div className="text-center">{link.name}</div>
57+
</a>
58+
</Link>
59+
)
60+
} else {
61+
return null
62+
}
63+
})}
64+
</nav>
65+
</div>
2766
</div>
67+
2868
{/* 内容主体 */}
2969
<main id="wrapper" className="flex justify-center flex-1 pb-12">
30-
<div className="max-w-4xl px-3">{children}</div>
31-
<div >
32-
<div className='sticky top-0 z-40'>
33-
<Live2D/>
70+
<div className="max-w-4xl w-full px-3">{children}</div>
71+
<div>
72+
<div className="sticky top-0 z-40">
73+
<Live2D />
3474
</div>
3575
</div>
3676
</main>
37-
<footer
38-
className='font-sans dark:bg-gray-900 flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-sm p-6'
39-
>
40-
<i className='fas fa-copyright' /> {`${startYear}${currentYear}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold dark:text-gray-300 '>{BLOG.AUTHOR}</a>.
41-
<br/>
42-
43-
<span>Powered by <a href='https://notion.so' className='underline font-bold dark:text-gray-300'>Notion</a> & <a href='https://github.com/tangly1024/NotionNext' className='underline font-bold dark:text-gray-300'>NotionNext {BLOG.VERSION}</a>.</span></span>
4477

45-
{BLOG.BEI_AN && <><br /><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br/></>}
46-
<br/>
47-
<span className='hidden busuanzi_container_site_pv'>
48-
<i className='fas fa-eye'/><span className='px-1 busuanzi_value_site_pv'> </span> </span>
49-
<span className='pl-2 hidden busuanzi_container_site_uv'>
50-
<i className='fas fa-users'/> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
51-
<br/>
78+
{/* 页脚 */}
79+
<footer className="font-sans dark:bg-gray-900 flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-sm p-6">
80+
<i className="fas fa-copyright" /> {`${startYear}${currentYear}`}{' '}
81+
<span>
82+
<i className="mx-1 animate-pulse fas fa-heart" />{' '}
83+
<a
84+
href={BLOG.LINK}
85+
className="underline font-bold dark:text-gray-300 "
86+
>
87+
{BLOG.AUTHOR}
88+
</a>
89+
.
90+
<br />
91+
<span>
92+
Powered by{' '}
93+
<a
94+
href="https://notion.so"
95+
className="underline font-bold dark:text-gray-300"
96+
>
97+
Notion
98+
</a>{' '}
99+
&{' '}
100+
<a
101+
href="https://github.com/tangly1024/NotionNext"
102+
className="underline font-bold dark:text-gray-300"
103+
>
104+
NotionNext {BLOG.VERSION}
105+
</a>
106+
.
107+
</span>
108+
</span>
109+
{BLOG.BEI_AN && (
110+
<>
111+
<br />
112+
<i className="fas fa-shield-alt" />{' '}
113+
<a href="https://beian.miit.gov.cn/" className="mr-2">
114+
{BLOG.BEI_AN}
115+
</a>
116+
<br />
117+
</>
118+
)}
119+
<br />
120+
<span className="hidden busuanzi_container_site_pv">
121+
<i className="fas fa-eye" />
122+
<span className="px-1 busuanzi_value_site_pv"> </span>{' '}
123+
</span>
124+
<span className="pl-2 hidden busuanzi_container_site_uv">
125+
<i className="fas fa-users" />{' '}
126+
<span className="px-1 busuanzi_value_site_uv"> </span>{' '}
127+
</span>
128+
<br />
52129
<h1>{meta?.title || BLOG.TITLE}</h1>
53-
</footer>
130+
</footer>
54131
</div>
55132
)
56133
}

‎themes/empty/LayoutCategory.js

+45-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,48 @@
1+
import BLOG from '@/blog.config'
2+
import { useGlobal } from '@/lib/global'
3+
import Link from 'next/link'
4+
import { useState } from 'react'
15
import LayoutBase from './LayoutBase'
26

3-
export const LayoutCategory = (props) => {
4-
const { category } = props
5-
return <LayoutBase {...props}>
6-
Category - {category}
7-
</LayoutBase>
7+
export const LayoutCategory = props => {
8+
const { category, posts } = props
9+
const { locale } = useGlobal()
10+
11+
const [page, updatePage] = useState(1)
12+
let hasMore = false
13+
const postsToShow = posts
14+
? Object.assign(posts).slice(0, BLOG.POSTS_PER_PAGE * page)
15+
: []
16+
17+
if (posts) {
18+
const totalCount = posts.length
19+
hasMore = page * BLOG.POSTS_PER_PAGE < totalCount
20+
}
21+
const handleGetMore = () => {
22+
if (!hasMore) return
23+
updatePage(page + 1)
24+
}
25+
26+
return (
27+
<LayoutBase {...props}>
28+
Category - {category}
29+
{postsToShow.map(p => (
30+
<div key={p.id} className="border my-12">
31+
<Link href={`/article/${p.slug}`}>
32+
<a className="underline cursor-pointer">{p.title}</a>
33+
</Link>
34+
<div>{p.summary}</div>
35+
</div>
36+
))}
37+
<div>
38+
<div
39+
onClick={handleGetMore}
40+
className="w-full my-4 py-4 text-center cursor-pointer "
41+
>
42+
{' '}
43+
{hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
44+
</div>
45+
</div>
46+
</LayoutBase>
47+
)
848
}

‎themes/empty/LayoutCategoryIndex.js

+19-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,25 @@
1+
import { useGlobal } from '@/lib/global'
2+
import Link from 'next/link'
13
import LayoutBase from './LayoutBase'
24

35
export const LayoutCategoryIndex = (props) => {
4-
// const { tags, allPosts, categories, postCount, latestPosts } = props
6+
const { categories } = props
7+
const { locale } = useGlobal()
58
return <LayoutBase {...props}>
6-
CategoryIndex
9+
<div className=' p-10'>
10+
<div className='dark:text-gray-200 mb-5'>
11+
<i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
12+
</div>
13+
<div id='category-list' className='duration-200 flex flex-wrap'>
14+
{categories && categories.map(category => {
15+
return <Link key={category.name} href={`/category/${category.name}`} passHref>
16+
<div
17+
className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
18+
<i className='mr-4 fas fa-folder' />{category.name}({category.count})
19+
</div>
20+
</Link>
21+
})}
22+
</div>
23+
</div>
724
</LayoutBase>
825
}

0 commit comments

Comments
 (0)