Skip to content

Commit b9ae27d

Browse files
fecommunityfecommunity
authored
feat: knowledge page perfect (#16)
* docs: release reactpress v1.5.0 * refactor: tag style perfect * feat: knowledge page perfect * refactor: update header page icons
1 parent 68b1a5b commit b9ae27d

File tree

19 files changed

+250
-97
lines changed

19 files changed

+250
-97
lines changed

‎CHANGELOG.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,24 @@
1+
# [1.5.0](https://github.com/fecommunity/easy-blog/compare/v1.4.0...v1.5.0) (2024-12-21)
2+
3+
4+
### Bug Fixes
5+
6+
* adapt small screen content display issue ([84895c8](https://github.com/fecommunity/easy-blog/commit/84895c8341d34285068806d5908b2af358719f80))
7+
* add key for tex loop item ([e8a2e36](https://github.com/fecommunity/easy-blog/commit/e8a2e36f13d5031d845c3c3055374e5ff0446bc2))
8+
* nav config build error ([66acf46](https://github.com/fecommunity/easy-blog/commit/66acf46485f902aa0647b4886beb0701372b95c2))
9+
* nav query id undefined ([2d0bbd7](https://github.com/fecommunity/easy-blog/commit/2d0bbd78f4d73579039b3a9bf7c846fe2d976073))
10+
* route level default value ([4aae64e](https://github.com/fecommunity/easy-blog/commit/4aae64e86346052cb51e63e7c149853a6d8d8ae6))
11+
12+
13+
### Features
14+
15+
* add animation tags cloud ([68b1a5b](https://github.com/fecommunity/easy-blog/commit/68b1a5b2fe73fafd7a9b282ed77f836aa7a76bf6))
16+
* add global config setting page ([c825425](https://github.com/fecommunity/easy-blog/commit/c82542540b20f423b3b3f3ba04ea5e48e2523f5c))
17+
* add nav page ([c6703c6](https://github.com/fecommunity/easy-blog/commit/c6703c6e3dea33a8cc226f1c02d9b5cac0ef827e))
18+
* optimized page interaction experience ([b0ac19a](https://github.com/fecommunity/easy-blog/commit/b0ac19ab31b6bcf0d8916aeb373e6fa7288303aa))
19+
20+
21+
122
# [1.4.0](https://github.com/fecommunity/easy-blog/compare/v1.3.0...v1.4.0) (2024-12-08)
223

324

‎client/pages/knowledge/[pId]/[id]/index.module.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,6 @@
131131
background: var(--bg-box);
132132

133133
> main {
134-
max-height: 200px;
135134
overflow: auto;
136135
scroll-behavior: smooth;
137136
overscroll-behavior: contain;
@@ -161,7 +160,7 @@
161160
height: 32px;
162161
padding-right: 16px;
163162
padding-left: 12px;
164-
font-size: 14px;
163+
font-size: 16px;
165164
line-height: 20px;
166165
align-items: center;
167166
justify-content: space-between;

‎client/pages/knowledge/[pId]/[id]/index.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -180,17 +180,13 @@ const Page: NextPage<IProps> = ({ pId, id, book, chapter }) => {
180180
{chapter.title}
181181
</a>
182182
</Link>
183+
{chapter.id === id && <Toc hasHeader={false} key={chapter.id} tocs={tocs} />}
183184
</li>
184185
);
185186
})}
186187
</ul>
187188
</main>
188189
</div>
189-
{tocs && tocs.length ? (
190-
<div className={style.infoWrapper}>
191-
<Toc key={chapter.id} tocs={tocs} />
192-
</div>
193-
) : null}
194190
</div>
195191
}
196192
likesProps={{

‎client/pages/knowledge/[pId]/index.module.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.wrapper {
22
position: relative;
33
height: 100%;
4+
background-color: var(--bg-body);
45
}
56

67
.bg {
@@ -38,7 +39,6 @@
3839

3940
.coverWrapper {
4041
width: 100%;
41-
margin: 1rem auto;
4242
overflow: hidden;
4343
border-radius: var(--border-radius);
4444

@@ -123,7 +123,7 @@
123123

124124
&.bgMain {
125125
padding: 0.8rem;
126-
background-color: var(--bg-second);
126+
background-color: var(--bg-box);
127127
border-radius: var(--border-radius);
128128
box-shadow: var(--box-shadow);
129129
}

‎client/pages/knowledge/[pId]/index.tsx‎

Lines changed: 15 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,6 @@ const Page: NextPage<IProps> = ({ pId, book, otherBooks = [] }) => {
2626
const { setting } = useContext(GlobalContext);
2727
const t = useTranslations();
2828
const chapters = useMemo(() => (book && book.children) || [], [book]);
29-
const bg = useMemo(
30-
() =>
31-
`linear-gradient(to bottom, rgba(var(--rgb-bg-second), 0), rgba(var(--rgb-bg-second), 1)), url(${book.cover})`,
32-
[book.cover]
33-
);
3429

3530
const start = useCallback(() => {
3631
const chapter = chapters[0];
@@ -42,29 +37,23 @@ const Page: NextPage<IProps> = ({ pId, book, otherBooks = [] }) => {
4237
}
4338

4439
return (
45-
<div className={style.wrapper} style={{ backgroundColor: book.cover ? 'transparent' : 'var(--bg-body)' }}>
46-
{book.cover && (
47-
<div
48-
className={style.bg}
49-
style={{
50-
backgroundImage: bg,
51-
}}
52-
></div>
53-
)}
54-
<div className="container">
55-
<div className={style.breadcrump}>
56-
<Breadcrumb>
57-
<Breadcrumb.Item>
58-
<Link href="/knowledge">
59-
<a aria-label="knowledges books">{t('knowledgeBooks')}</a>
60-
</Link>
61-
</Breadcrumb.Item>
62-
<Breadcrumb.Item>{book.title}</Breadcrumb.Item>
63-
</Breadcrumb>
64-
</div>
65-
</div>
40+
<div className={style.wrapper}>
6641
<DoubleColumnLayout
6742
minHeight={'0px'}
43+
topNode={
44+
<div className="container">
45+
<div className={style.breadcrump}>
46+
<Breadcrumb>
47+
<Breadcrumb.Item>
48+
<Link href="/knowledge">
49+
<a aria-label="knowledges books">{t('knowledgeBooks')}</a>
50+
</Link>
51+
</Breadcrumb.Item>
52+
<Breadcrumb.Item>{book.title}</Breadcrumb.Item>
53+
</Breadcrumb>
54+
</div>
55+
</div>
56+
}
6857
leftNode={
6958
<div className={style.content}>
7059
<Helmet>
@@ -162,7 +151,6 @@ Page.getInitialProps = async (ctx) => {
162151
book,
163152
otherBooks: allBooks.filter((b) => b.id !== book.id),
164153
needLayoutFooter: true,
165-
hasBg: true,
166154
};
167155
};
168156

‎client/pages/nav/index.module.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
background-color: var(--bg-box) !important;
66
margin-bottom: 24px;
77
margin-top: 16px;
8+
border-radius: var(--border-radius);
9+
810
div:not(:last-child) {
911
border: none !important;
1012
background-color: var(--bg-box) !important;

‎client/pages/page/[id].tsx‎

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -28,47 +28,45 @@ const Page: NextPage<IProps> = ({ page }) => {
2828
}, [page]);
2929

3030
return (
31-
<>
32-
<ImageViewer containerSelector="#js-page-wrapper">
33-
<div id="js-page-wrapper" className={style.container}>
34-
<Helmet>
35-
<title>{page.name + ' - ' + setting.systemTitle}</title>
36-
</Helmet>
37-
<div
38-
style={{
39-
backgroundColor: !setting.systemBg ? 'var(--bg-second)' : 'transparent',
40-
borderBottom: !setting.systemBg ? '1px solid var(--border-color)' : 0,
41-
paddingTop: 21,
42-
}}
43-
>
44-
<div className="container">
45-
{page.cover && (
46-
<div className={style.coverWrapper}>
47-
<img src={page.cover} alt={t('articleCover') as string} />
48-
</div>
49-
)}
50-
<div className={style.content}>
51-
<MarkdownReader content={page.html} />
31+
<ImageViewer containerSelector="#js-page-wrapper">
32+
<div id="js-page-wrapper" className={style.container}>
33+
<Helmet>
34+
<title>{page.name + ' - ' + setting.systemTitle}</title>
35+
</Helmet>
36+
<div
37+
style={{
38+
backgroundColor: !setting.systemBg ? 'var(--bg-second)' : 'transparent',
39+
borderBottom: !setting.systemBg ? '1px solid var(--border-color)' : 0,
40+
paddingTop: 21,
41+
}}
42+
>
43+
<div className="container">
44+
{page.cover && (
45+
<div className={style.coverWrapper}>
46+
<img src={page.cover} alt={t('articleCover') as string} />
5247
</div>
48+
)}
49+
<div className={style.content}>
50+
<MarkdownReader content={page.html} />
5351
</div>
5452
</div>
55-
<div className={style.commentAndArticleWrapper}>
56-
<div className={style.comments}>
57-
<p className={style.title}>{t('comment')}</p>
58-
<div className={style.commentContainer}>
59-
<Comment key={page.id} hostId={page.id} />
60-
</div>
53+
</div>
54+
<div className={style.commentAndArticleWrapper}>
55+
<div className={style.comments}>
56+
<p className={style.title}>{t('comment')}</p>
57+
<div className={style.commentContainer}>
58+
<Comment key={page.id} hostId={page.id} />
6159
</div>
62-
<div className={style.recmmendArticles}>
63-
<p className={style.title}>{t('recommendToReading')}</p>
64-
<div className={style.articleContainer}>
65-
<ArticleRecommend articleId={null} needTitle={false} />
66-
</div>
60+
</div>
61+
<div className={style.recmmendArticles}>
62+
<p className={style.title}>{t('recommendToReading')}</p>
63+
<div className={style.articleContainer}>
64+
<ArticleRecommend articleId={null} needTitle={false} />
6765
</div>
6866
</div>
6967
</div>
70-
</ImageViewer>
71-
</>
68+
</div>
69+
</ImageViewer>
7270
);
7371
};
7472

‎client/pages/page/index.module.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.container {
22
position: relative;
3+
background-color: var(--bg-box);
34
}
45

56
.coverWrapper {

‎client/src/components/ArticleCarousel/index.module.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
background-size: cover;
1717
background-repeat: no-repeat;
1818
overflow: hidden;
19+
border-radius: var(--border-radius);
1920

2021
img {
2122
width: 100%;

‎client/src/components/Header/index.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ $height: 64px;
55
width: 100%;
66
height: $height;
77
transition: all 0.3s ease-in-out;
8-
background-color: var(--bg-header);
8+
background-color: var(--bg-box);
99
backdrop-filter: blur(10px);
1010
z-index: 100;
1111

0 commit comments

Comments
 (0)