Skip to content

Commit c9be7d7

Browse files
alvin0216alvin0216
committed
fix highlight link failed and Semantic tags
1 parent 305ca89 commit c9be7d7

File tree

8 files changed

+202
-9
lines changed

8 files changed

+202
-9
lines changed

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
4444

4545
<!-- md 代码高亮 -->
46-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
46+
<script rel='preload' src="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.1.0/highlight.min.js"></script>
4747

4848
</head>
4949
<body>

‎src/config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Href from '@/components/Href'
66
import MyInfo from '@/views/web/about/MyInfo'
77

88
// API_BASE_URL
9-
export const API_BASE_URL = 'http://127.0.0.1:6060'
9+
export const API_BASE_URL = 'http://47.112.48.225:6002'
1010

1111
// project config
1212
export const HEADER_BLOG_NAME = '郭大大的博客' // header title 显示的名字

‎src/layout/web/sidebar/index.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ function SideBar(props) {
2727
})
2828

2929
return (
30-
<div className='app-sidebar'>
30+
<aside className='app-sidebar'>
3131
<img src={SIDEBAR.avatar} className='sider-avatar' alt='' />
3232
<h2 className='title'>{SIDEBAR.title}</h2>
3333
<h5 className='sub-title'>{SIDEBAR.subTitle}</h5>
@@ -59,7 +59,7 @@ function SideBar(props) {
5959
</Tag>
6060
))}
6161
</div>
62-
</div>
62+
</aside>
6363
)
6464
}
6565

‎src/views/web/article/index.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
.app-article {
2+
min-height: 10vh;
3+
}
4+
.app-article .post-header {
5+
text-align: center;
6+
padding-bottom: 20px;
7+
border-bottom: 1px solid #e8e8e8;
8+
}
9+
.app-article .post-header .post-title {
10+
color: #0d1a26;
11+
font-size: 1.7em;
12+
font-weight: 400;
13+
margin-top: 0;
14+
}
15+
.app-article .post-header .others {
16+
vertical-align: middle;
17+
margin-top: 10px;
18+
color: rgba(0, 0, 0, 0.45);
19+
}
20+
.app-article .post-header .others a {
21+
color: inherit;
22+
}
23+
.app-article .article-navigation {
24+
position: fixed;
25+
width: 246px;
26+
top: 104px;
27+
right: 20px;
28+
}
29+
.app-article .article-navigation .ant-anchor-wrapper {
30+
max-height: calc(100vh - 160px) !important;
31+
}
32+
.app-article .article-navigation .ant-anchor {
33+
padding-left: 0;
34+
}
35+
.app-article .article-navigation .ant-anchor .ant-anchor-link-active::before {
36+
display: block;
37+
content: '';
38+
height: 18px;
39+
width: 2px;
40+
background-color: #1890ff;
41+
position: absolute;
42+
left: 0px;
43+
}
44+
.app-article .drawer-btn {
45+
position: fixed;
46+
width: 41px;
47+
height: 41px;
48+
top: 20vh;
49+
right: 0;
50+
cursor: pointer;
51+
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
52+
border-radius: 4px 0 0 4px;
53+
text-align: center;
54+
line-height: 41px;
55+
z-index: 999;
56+
background: #fff;
57+
}
58+
.app-article .right-navigation {
59+
margin-left: -20px;
60+
}
61+
.app-article .right-navigation .ant-anchor-ink::before {
62+
content: '';
63+
display: none;
64+
}

‎src/views/web/article/index.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ function Article(props) {
5656
const isFoldNavigation = useMediaQuery({ query: '(max-width: 1300px)' })
5757
return (
5858
<Spin tip='Loading...' spinning={loading}>
59-
<div className='app-article' style={{ paddingRight: isFoldNavigation ? 0 : 275 }}>
59+
<article className='app-article' style={{ paddingRight: isFoldNavigation ? 0 : 275 }}>
6060
<div className='post-header'>
6161
<h1 className='post-title'>{title}</h1>
6262

@@ -98,13 +98,13 @@ function Article(props) {
9898
</>
9999
)
100100
: (
101-
<div className='article-navigation'>
101+
<nav className='article-navigation'>
102102
<Navigation content={content} />
103-
</div>
103+
</nav>
104104
)}
105105

106106
<Discuss articleId={articleId} commentList={comments} setCommentList={setCommentList} />
107-
</div>
107+
</article>
108108
</Spin>
109109
)
110110
}

‎src/views/web/article/index.less‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@
2525
width: 246px;
2626
top: 104px;
2727
right: 20px;
28+
.ant-anchor-wrapper {
29+
max-height: calc(100vh - 160px) !important;
30+
}
2831
.ant-anchor {
2932
padding-left: 0;
3033
.ant-anchor-link-active::before {

‎src/views/web/home/index.css‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
.app-home {
2+
min-height: 10vh;
3+
padding-bottom: 40px;
4+
}
5+
.app-home .app-home-list {
6+
width: calc(100% - 292px);
7+
}
8+
.app-home .app-home-list-item {
9+
position: relative;
10+
border: 1px solid #ebedf0;
11+
padding: 16px 24px;
12+
margin-bottom: 10px;
13+
transition: all 0.2s linear;
14+
}
15+
.app-home .app-home-list-item:hover {
16+
background: #effbff;
17+
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.1);
18+
transform: translate3d(0, -5px 0);
19+
}
20+
.app-home .app-home-list-item .title {
21+
color: #394d69;
22+
font-size: 1.4rem;
23+
font-weight: 600;
24+
line-height: 1.2;
25+
cursor: pointer;
26+
}
27+
.app-home .app-home-list-item .title:hover {
28+
color: #48b2ff;
29+
}
30+
.app-home .app-home-list-item .posted-time {
31+
font-size: 0.5em;
32+
padding-left: 20px;
33+
}
34+
.app-home .app-home-list-item .content {
35+
cursor: pointer;
36+
max-height: 260px;
37+
overflow: hidden;
38+
}
39+
.app-home .app-home-list-item .list-item-others {
40+
vertical-align: middle;
41+
margin-top: 10px;
42+
color: rgba(0, 0, 0, 0.45);
43+
}
44+
.app-home .app-home-list-item .list-item-others a {
45+
color: inherit;
46+
}
47+
.app-home .preview {
48+
position: fixed;
49+
width: 260px;
50+
top: 90px;
51+
right: 20px;
52+
list-style-type: circle;
53+
}
54+
.app-home .preview .title {
55+
color: #394d69;
56+
font-size: 22px;
57+
}
58+
.app-home .preview li {
59+
cursor: pointer;
60+
display: block;
61+
-webkit-transition: all 0.3s ease;
62+
transition: all 0.3s ease;
63+
white-space: nowrap;
64+
overflow: hidden;
65+
text-overflow: ellipsis;
66+
margin-left: -1px;
67+
}
68+
.app-home .preview li a {
69+
color: #8590a6;
70+
display: block;
71+
}
72+
.app-home .preview li:hover {
73+
background: #f0f2f5;
74+
}
75+
.app-home .preview li:hover a {
76+
color: #40a9ff;
77+
}
78+
.app-home .app-pagination {
79+
margin-right: 292px;
80+
}
81+
.app-home .ant-drawer-body {
82+
padding: 0;
83+
width: 256px;
84+
height: 100%;
85+
}
86+
.app-home .ant-drawer-body .preview {
87+
position: static;
88+
margin: 0;
89+
margin-top: 10px;
90+
}
91+
.app-home .ant-drawer-body .preview li {
92+
padding-left: 20px;
93+
}
94+
.app-home .ant-drawer-body .preview li a {
95+
line-height: 26px;
96+
}
97+
.app-home .drawer-btn {
98+
position: fixed;
99+
width: 41px;
100+
height: 41px;
101+
top: 20vh;
102+
right: 0;
103+
cursor: pointer;
104+
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
105+
border-radius: 4px 0 0 4px;
106+
text-align: center;
107+
line-height: 41px;
108+
z-index: 999;
109+
background: #fff;
110+
}
111+
.app-home .no-data {
112+
margin-top: 24%;
113+
}
114+
.app-home .no-data .keyword {
115+
font-size: 18px;
116+
font-weight: bold;
117+
color: #f00;
118+
}
119+
@media screen and (max-width: 1300px) {
120+
.app-home .app-home-list {
121+
width: 100%;
122+
}
123+
.app-home .app-pagination {
124+
margin-right: 0;
125+
}
126+
}

‎src/views/web/home/index.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.app-home {
22
min-height: 10vh;
33
padding-bottom: 40px;
4-
@previewWidth: 280px;
4+
@previewWidth: 292px;
55
.app-home-list {
66
width: calc(100% - @previewWidth);
77

0 commit comments

Comments
 (0)