Skip to content

Commit b9fc3ba

Browse files
ALITTLESEEDXALITTLESEEDX
committed
feat: 完成前端基本样式，新增黑暗模式
1 parent 6002e8b commit b9fc3ba

File tree

24 files changed

+491
-112
lines changed

24 files changed

+491
-112
lines changed

‎README.md

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,17 @@
11
# webpack-pro
22

3-
基于 Webpack5 的一个 React+Typescript 脚手架，并根据 webpack5 的新特性删掉了一些 webpack4 被替换的插件，并接入了阿里巴巴前端 lint 规范
3+
基于 react + Django DRF 的个人博客
44

55
## 特性
66

7-
- Webpack5
8-
- 支持 LESS 预处理器
9-
- 支持 Typescript
10-
- BABEL 缓存
11-
- JS 文件压缩
12-
- CSS 文件压缩
13-
- base64 图片处理
14-
- 支持 CSS Modules 模块化
15-
- 开发环境 / 生产环境区分
16-
- CSS 前缀添加 浏览器兼容
17-
- 热更新支持
18-
- CSS 文件单独抽离
19-
- eslint stylelint 保证编码规范和代码质量
20-
- commitlint 代码提交规范
21-
- 更加友好的 webpack 命令行错误提示
22-
237
## 技术栈
248

259
react^17.0.2 + webpack^5.47.1 + less^4.1.1 + typescript^4.3.5 + babel^7.14.8
2610

2711
## 使用
2812

2913
```
30-
git clone https://github.com/Seedsa/SEED-CLI.git
14+
git clone https://github.com/Seedsa/DjangoDRF-React-Blog.git
3115
npm install
3216
npm run start
3317
```

‎config/webpack.config.base.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
const path = require('path');
22
const HtmlWebpackPlugin = require('html-webpack-plugin');
3+
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
4+
35
const WebpackBaseConfig = {
46
entry: {
57
main: path.resolve(__dirname, '../src/index.tsx'),
@@ -44,10 +46,6 @@ const WebpackBaseConfig = {
4446
filename: 'static/[hash][ext][query]', // 指定文件输出目录
4547
},
4648
},
47-
{
48-
test: /\.(png|jpg|jpeg|gif)$/i,
49-
type: 'asset/inline', // webpack5 已支持资源模块 代替url-loader
50-
},
5149
],
5250
},
5351
devtool: 'inline-source-map',

‎config/webpack.config.dev.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ module.exports = merge(WebpackBaseConfig, {
2929
},
3030
],
3131
},
32+
3233
{
3334
test: /\.less$/i,
3435
exclude: [/node_modules/],
@@ -57,6 +58,7 @@ module.exports = merge(WebpackBaseConfig, {
5758
options: {
5859
lessOptions: {
5960
javascriptEnabled: true,
61+
modifyVars: { '@primary-color': '#1DA57A' },
6062
},
6163
},
6264
},

‎config/webpack.config.prod.js

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
const path = require("path");
2-
const HtmlWebpackPlugin = require("html-webpack-plugin");
3-
const TerserPlugin = require("terser-webpack-plugin");
4-
const WebpackBaseConfig = require("./webpack.config.base");
5-
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
6-
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
7-
const CopyPlugin = require("copy-webpack-plugin");
8-
const { merge } = require("webpack-merge");
1+
const path = require('path');
2+
const HtmlWebpackPlugin = require('html-webpack-plugin');
3+
const TerserPlugin = require('terser-webpack-plugin');
4+
const WebpackBaseConfig = require('./webpack.config.base');
5+
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
6+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
7+
const CopyPlugin = require('copy-webpack-plugin');
8+
const { merge } = require('webpack-merge');
99

1010
module.exports = merge(WebpackBaseConfig, {
11-
mode: "production",
11+
mode: 'production',
1212
module: {
1313
rules: [
1414
{
@@ -19,71 +19,71 @@ module.exports = merge(WebpackBaseConfig, {
1919
loader: MiniCssExtractPlugin.loader,
2020
},
2121
{
22-
loader: "css-loader", // 转化 CSS 为 CommonJS
22+
loader: 'css-loader', // 转化 CSS 为 CommonJS
2323
options: {
2424
modules: true, //开启
25-
importLoaders: 1,
25+
importLoaders: 2,
2626
},
2727
},
2828
{
29-
loader: "postcss-loader",
29+
loader: 'postcss-loader',
3030
options: {
3131
postcssOptions: {
32-
plugins: [["postcss-preset-env"]],
32+
plugins: [['postcss-preset-env']],
3333
},
3434
},
3535
},
3636
{
37-
loader: "less-loader",
37+
loader: 'less-loader',
3838
options: { lessOptions: { javascriptEnabled: true } },
3939
},
4040
],
4141
},
4242
{
4343
test: /\.css$/i,
4444
use: [
45-
"style-loader",
45+
'style-loader',
4646
{
47-
loader: "css-loader",
47+
loader: 'css-loader',
4848
options: {
4949
modules: true,
50-
importLoaders: 1,
50+
importLoaders: 2,
5151
},
5252
},
5353
{
54-
loader: "postcss-loader",
54+
loader: 'postcss-loader',
5555
options: {
5656
postcssOptions: {
57-
plugins: [["postcss-preset-env"]],
57+
plugins: [['postcss-preset-env']],
5858
},
5959
},
6060
},
6161
],
6262
},
6363
],
6464
},
65-
devtool: "nosources-source-map",
65+
devtool: 'nosources-source-map',
6666
plugins: [
6767
new HtmlWebpackPlugin({
68-
filename: "index.html",
69-
template: "public/index.html",
68+
filename: 'index.html',
69+
template: 'public/index.html',
7070
inject: true,
71-
title: "Development",
71+
title: 'Development',
7272
}),
7373
new CopyPlugin({
7474
patterns: [
7575
{
76-
from: "./public/**/*",
77-
to: "./",
76+
from: './public/**/*',
77+
to: './',
7878
globOptions: {
79-
ignore: ["**/favicon.png", "**/index.html"],
79+
ignore: ['**/favicon.png', '**/index.html'],
8080
},
8181
noErrorOnMissing: true,
8282
},
8383
],
8484
}),
8585
new MiniCssExtractPlugin({
86-
filename: "[name].css",
86+
filename: '[name].css',
8787
}),
8888
],
8989
optimization: {

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"postcss-preset-env": "^6.7.0",
4848
"react-hot-loader": "^4.13.0",
4949
"style-loader": "^3.2.1",
50+
"svg-sprite-loader": "^6.0.9",
5051
"typescript": "^4.3.5",
5152
"webpack": "^5.47.1",
5253
"webpack-cli": "^4.7.2",
@@ -55,6 +56,7 @@
5556
"dependencies": {
5657
"@types/react-router-dom": "^5.1.8",
5758
"antd": "^4.16.10",
59+
"classnames": "^2.3.1",
5860
"react": "^17.0.2",
5961
"react-dom": "^17.0.2",
6062
"react-router": "^5.2.0",

‎public/index.html

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,27 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" data-theme="light">
33
<head>
44
<meta charset="utf-8" />
5+
<title><%= htmlWebpackPlugin.options.title %></title>
56
<meta
67
id="viewport"
78
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
89
name="viewport"
910
/>
1011
<meta name="theme-color" content="#000000" />
1112
<meta name="referrer" content="never" />
12-
<title>Document</title>
13+
<style type="text/css">
14+
.icon {
15+
width: 20px;
16+
height: 20px;
17+
vertical-align: -0.15em;
18+
fill: currentColor;
19+
overflow: hidden;
20+
}
21+
</style>
1322
</head>
1423
<body>
1524
<div id="root"></div>
1625
</body>
26+
<script src="//at.alicdn.com/t/font_2728508_l8by2j35n3r.js"></script>
1727
</html>

‎src/Layout/index.less

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.main {
2-
position: relative;
3-
flex: auto;
4-
min-height: 0;
5-
max-width: 1200px;
6-
margin: 0 auto;
2+
// position: relative;
3+
// flex: auto;
4+
// min-height: 0;
5+
// max-width: 1200px;
6+
// margin: 0 auto;
77
}

‎src/Layout/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ interface AppProps {
77
}
88
const Layout: React.FC<AppProps> = ({ children }) => {
99
return (
10-
<section>
10+
<>
1111
<Header />
1212
<main className={styles.main}>{children}</main>
1313
<Footer />
14-
</section>
14+
</>
1515
);
1616
};
1717

‎src/Pages/Home/index.less

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.container {
2+
padding-top: 20px;
3+
max-width: 1170px;
4+
width: 100%;
5+
padding-right: 16px;
6+
padding-left: 16px;
7+
margin-right: auto;
8+
margin-left: auto;
9+
& ul {
10+
padding: 0;
11+
}
12+
}
13+
14+
.title {
15+
a {
16+
font-weight: 600;
17+
color: var(--text-color-dark);
18+
}
19+
&-hover {
20+
cursor: pointer;
21+
}
22+
}
23+
.desc {
24+
min-height: 50px;
25+
}
26+
.meta {
27+
}

‎src/Pages/Home/index.tsx

Lines changed: 76 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,82 @@
11
import React from 'react';
2+
import { ArticleType } from '@/typings/Home';
3+
import styles from './index.less';
24
const Home: React.FC = () => {
5+
const mockData: ArticleType[] = [
6+
{
7+
title: 'Autumn is a second spring when every leaf is a flower',
8+
desc: 'She then expatiated very warmly upon the advantages I should reap from her plan; talked in a high style of my future grandeur; assured me how heartily I should despise almost every body and every thing I had hitherto seen; predicted my marrying into some family of the',
9+
date: '2021-08-07',
10+
},
11+
{
12+
title: 'Autumn is a second spring when every leaf is a flower',
13+
desc: 'She then expatiated very warmly upon the advantages I should reap from her plan; talked in a high style of my future grandeur; assured me how heartily I should despise almost every body and every thing I had hitherto seen; predicted my marrying into some family of the',
14+
date: '2021-08-07',
15+
},
16+
{
17+
title: 'Autumn is a second spring when every leaf is a flower',
18+
desc: 'She then expatiated very warmly upon the advantages I should reap from her plan; talked in a high style of my future grandeur; assured me how heartily I should despise almost every body and every thing I had hitherto seen; predicted my marrying into some family of the',
19+
date: '2021-08-07',
20+
},
21+
{
22+
title: 'Autumn is a second spring when every leaf is a flower',
23+
desc: 'She then expatiated very warmly upon the advantages I should reap from her plan; talked in a high style of my future grandeur; assured me how heartily I should despise almost every body and every thing I had hitherto seen; predicted my marrying into some family of the',
24+
date: '2021-08-07',
25+
},
26+
{
27+
title: 'Autumn is a second spring when every leaf is a flower',
28+
desc: 'She then expatiated very warmly upon the advantages I should reap from her plan; talked in a high style of my future grandeur; assured me how heartily I should despise almost every body and every thing I had hitherto seen; predicted my marrying into some family of the',
29+
date: '2021-08-07',
30+
},
31+
{
32+
title: '标题1',
33+
desc: '23232',
34+
date: '2021-08-07',
35+
},
36+
{
37+
title: '标题1',
38+
desc: '23232',
39+
date: '2021-08-07',
40+
},
41+
{
42+
title: '标题1',
43+
desc: '23232',
44+
date: '2021-08-07',
45+
},
46+
{
47+
title: '标题1',
48+
desc: '23232',
49+
date: '2021-08-07',
50+
},
51+
{
52+
title: '标题1',
53+
desc: '23232',
54+
date: '2021-08-07',
55+
},
56+
{
57+
title: '标题1',
58+
desc: '23232',
59+
date: '2021-08-07',
60+
},
61+
];
362
return (
4-
<div>
5-
<p>asdsad</p>
6-
<p>asdsad</p>
7-
<p>asdsad</p>
8-
<p>asdsad</p>
9-
<p>asdsad</p>
10-
<p>asdsad</p>
11-
<p>asdsad</p>v<p>asdsad</p>
12-
<p>asdsad</p>
13-
<p>asdsad</p>
14-
<p>asdsad</p>v<p>asdsad</p>
15-
<p>asdsad</p>
16-
<p>asdsad</p>
17-
<p>asdsad</p>v<p>asdsad</p>
18-
<p>asdsad</p>
19-
<p>asdsad</p>
20-
<p>asdsad</p>v<p>asdsad</p>
21-
<p>asdsad</p>
22-
<p>asdsad</p>
23-
<p>asdsad</p>v<p>asdsad</p>
24-
<p>asdsad</p>
25-
<p>asdsad</p>
26-
<p>asdsad</p>v <p>asdsad</p>
27-
<p>asdsad</p>
28-
<p>asdsad</p>
29-
<p>asdsad</p>v<p>asdsad</p>v
30-
</div>
63+
<section>
64+
<div className={styles.container}>
65+
<ul>
66+
{mockData.map((item, index) => {
67+
return (
68+
<li key={index}>
69+
<h2 className={styles.title}>
70+
<a>{item.title}</a>
71+
</h2>
72+
<p>{item.desc}</p>
73+
<div className={styles.meta}>{item.date}</div>
74+
</li>
75+
);
76+
})}
77+
</ul>
78+
</div>
79+
</section>
3180
);
3281
};
3382

0 commit comments

Comments
 (0)