Skip to content

Commit 096161c

Browse files
p208p2002p208p2002
committed
feat: archive
1 parent 160a481 commit 096161c

File tree

8 files changed

+196
-59
lines changed

8 files changed

+196
-59
lines changed

‎src/App.css

Lines changed: 14 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,13 @@
1-
.blog-icon{
2-
color: white;
3-
font-family: Verdana;
4-
font-size: 12px;
5-
background-color: var(--main-2);
6-
border-radius: 4px;
7-
padding: 5px;
8-
font-weight: 700;
9-
height: 18px;
10-
position: relative;
11-
top: -8px;
12-
}
13-
14-
#App .context {
15-
max-width: 800px;
16-
min-width: 600px;
17-
margin: 0 auto;
18-
position: relative;
19-
}
20-
21-
#App h1 {
22-
font-size: 32px;
1+
#App a{
2+
color: var(--main-2);
233
}
24-
25-
#App h1 img{
26-
display: inline;
27-
height: 36px;
28-
padding-bottom: 6px;
29-
padding-right: 6px;
4+
5+
#App a:link{
6+
text-decoration: none;
307
}
318

32-
#App .home-page-title {
33-
color: var(--text-1);
34-
text-decoration: none;
9+
#App small{
10+
color: var(--text-2);
3511
}
3612

3713
#App ol {
@@ -54,20 +30,15 @@
5430
padding-left: 40px;
5531
}
5632

57-
#App a{
58-
color: var(--main-2);
59-
}
60-
61-
#App a:link{
62-
text-decoration: none;
63-
}
64-
65-
#App small{
66-
color: var(--text-2);
33+
.context {
34+
max-width: 800px;
35+
min-width: 600px;
36+
margin: 0 auto;
37+
position: relative;
6738
}
6839

6940
@media screen and (max-width: 768px) {
70-
#App .context {
41+
.context {
7142
width: 100%;
7243
margin: 0 auto;
7344
position: relative;
@@ -76,7 +47,7 @@
7647
}
7748

7849
@media screen and (max-width: 576px) {
79-
#App .context {
50+
.context {
8051
margin-left: 0px;
8152
box-sizing: border-box;
8253
max-width: 576px;

‎src/App.js

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import React from 'react'
22
import { useState, useEffect, useContext } from 'react'
33
import './App.css';
44
import { AppStateContext } from './index'
5-
import { BLOG_NAME } from './configs/general'
65
import PostBlock from './modules/PostBlock'
76
import Search from './modules/Search'
87
import MDPreviewer from './modules/MdRender/preview'
98
import { POST_PRE_PAGE } from './configs/general'
9+
import Banner from './modules/Banner';
1010

1111
const axios = require('axios');
1212

@@ -41,16 +41,10 @@ function App() {
4141

4242
return (
4343
<div id="App">
44-
<div style={{ marginTop: 40 }} className="text-center">
45-
<h1>
46-
<a href="/" className="home-page-title font-medium">
47-
<img src="/icon.svg" alt="" srcSet="" />
48-
{BLOG_NAME}
49-
</a>
50-
</h1>
51-
<small>程式技術、自然語言處理和論文筆記</small>
44+
45+
<Banner>
5246
<Search setPosts={setPosts} fullIndex={fullIndex} />
53-
</div>
47+
</Banner>
5448

5549
<div className="context">
5650
{posts.map((post, i) => (

‎src/index.js

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import reportWebVitals from './reportWebVitals';
77
import LoadingView from './modules/Loading'
88
import CornerMenu from './modules/CornerMenu'
99
import Footer from './modules/Footer'
10+
import Archive from './modules/Archive'
1011
import { BLOG_NAME } from './configs/general'
1112
import MdRender from './modules/MdRender';
1213
import { Helmet } from 'react-helmet'
@@ -36,12 +37,21 @@ function Index() {
3637
</div>
3738
)
3839
}
40+
else if (page === "archive") {
41+
pageContext = (
42+
<div>
43+
<Archive />
44+
<CornerMenu />
45+
<Footer />
46+
</div>
47+
)
48+
}
3949
else if (page === "code-404") {
4050
pageContext = (
41-
<div className='flex flex-col p-2'>
42-
<p>很抱歉，您要求的文章不存在。</p>
43-
<p><a style={{color:'blue',textDecoration:'underline'}} href='/'>回首頁</a></p>
44-
</div>
51+
<div className='flex flex-col p-2'>
52+
<p>很抱歉，您要求的文章不存在。</p>
53+
<p><a style={{ color: 'blue', textDecoration: 'underline' }} href='/'>回首頁</a></p>
54+
</div>
4555
)
4656
}
4757
else {

‎src/modules/Archive/index.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
#Archive p {
2+
color: var(--text-1);
3+
white-space: nowrap; /* 不換行 */
4+
overflow: hidden; /* 隱藏超出範圍的內容 */
5+
text-overflow: ellipsis; /* 顯示省略號 */
6+
width: 100%; /* 設定固定寬度 */
7+
line-height: 20px;
8+
}
9+
10+
#Archive small{
11+
color: var(--text-2);
12+
margin-right: 5px;
13+
}
14+
15+
#Archive .row{
16+
margin-bottom: 12px;
17+
}
18+
19+
#Archive a{
20+
color: var(--main-2);
21+
}
22+
23+
#Archive a:link{
24+
text-decoration: none;
25+
}
26+
27+
#Archive small{
28+
color: var(--text-2);
29+
}

‎src/modules/Archive/index.jsx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react'
2+
import Banner from '../Banner'
3+
import { useState, useEffect, useContext } from 'react'
4+
import { AppStateContext } from '../../index'
5+
import './index.css'
6+
const axios = require('axios')
7+
8+
function Archive() {
9+
let [posts, setPosts] = useState([])
10+
let appState = useContext(AppStateContext)
11+
let fetchPost = () => {
12+
appState.setLoading(true)
13+
axios.get("/index.json")
14+
.then((res) => {
15+
posts = res.data
16+
setPosts(posts)
17+
})
18+
.catch((err) => {
19+
console.log(err)
20+
})
21+
.then(() => {
22+
appState.setLoading(false)
23+
})
24+
}
25+
26+
useEffect(() => {
27+
fetchPost()
28+
29+
// eslint-disable-next-line
30+
}, [])
31+
32+
return (
33+
<div id="Archive">
34+
<Banner />
35+
36+
<div className="context">
37+
{
38+
posts.map((post, index) => {
39+
return <div key={index}>
40+
<div className='row'>
41+
<p><b>{post.date}</b> - <a href={post.page_link}>{post.title}</a></p>
42+
{post.tags.map((tag)=><small>#{tag}</small>)}
43+
</div>
44+
</div>
45+
})
46+
}
47+
</div>
48+
49+
</div>
50+
)
51+
}
52+
53+
export default Archive

‎src/modules/Banner/index.css

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
#Banner {
2+
margin-bottom: 10px;
3+
}
4+
#Banner .blog-icon{
5+
color: white;
6+
font-size: 12px;
7+
background-color: var(--main-2);
8+
border-radius: 4px;
9+
padding: 5px;
10+
font-weight: 700;
11+
height: 18px;
12+
position: relative;
13+
top: -8px;
14+
}
15+
16+
#Banner h1 {
17+
font-size: 32px;
18+
}
19+
20+
#Banner h1 img{
21+
display: inline;
22+
height: 36px;
23+
padding-bottom: 6px;
24+
padding-right: 6px;
25+
}
26+
27+
#Banner .home-page-title {
28+
color: var(--text-1);
29+
text-decoration: none;
30+
}
31+
32+
#Banner a{
33+
color: var(--main-2);
34+
}
35+
36+
#Banner a:link{
37+
text-decoration: none;
38+
}
39+
40+
#Banner small{
41+
color: var(--text-2);
42+
}
43+
44+
#Banner small.spec-page{
45+
color: var(--text-2);
46+
margin-left: 3px;
47+
margin-right: 3px;
48+
}
49+
50+
#Banner small.spec-page a{
51+
color: var(--text-2);
52+
}
53+
54+
#Banner span.sep::before {
55+
content: '·';
56+
color: var(--text-2);
57+
}

‎src/modules/Banner/index.jsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { React } from 'react'
2+
import { BLOG_NAME } from '../../configs/general'
3+
import './index.css'
4+
5+
function Banner(props) {
6+
return (
7+
<div id="Banner" style={{ marginTop: 20 }} className="text-center">
8+
<h1>
9+
<a href="/" className="home-page-title font-medium">
10+
<img src="/icon.svg" alt="" srcSet="" />
11+
{BLOG_NAME}
12+
</a>
13+
</h1>
14+
<small>程式技術、自然語言處理和論文筆記</small>
15+
<br />
16+
{props.children}
17+
<small className='spec-page'><a href="/?page=archive">Archive</a></small>
18+
</div>
19+
)
20+
}
21+
22+
export default Banner

‎src/modules/Search/index.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
#Search-Bar {
22
margin-top: 16px;
3-
margin-bottom: 32px;
3+
/* margin-bottom: 32px; */
44
background-color: var(--main-bg-1);
55
}
66

77
#Search-Bar input[type=text] {
88
border-color: var(--support-1);
99
border-style: solid;
1010
border-width: 0px 0px 1px 0px;
11-
height: 24px;
11+
height: 30px;
12+
text-align: center;
1213
padding-left: 5px;
1314
margin-right: 5px;
1415
background-color: var(--main-bg-1);

0 commit comments

Comments
 (0)