前言

看着cdn.ahdark.com首页，莫名难受，感觉好简陋

正好最近对React感兴趣，不如学一学练一练

立项了！

在很长一段时间，我有过很多想法，也立过很多项目。

但能独立完成的、坚持下来的却很少，能对外发布的就为零了。

这是很悲催的，也是我的弱项之一。

虽然做一个全栈开发者并非光荣而是象征了没有突出能力，但学习前端写法对于我未来与前端工程师进行工作协调也是很必要的。

为此，我坚持制作了这套简单的纯静态React JSX网页

项目

初衷

这是为了练习我的前端能力，因此做了纯静态（方便），而且使用了各种不同的前端写法。

如果这是标准化计分，我可能拿0分吧……

因为稳定性和兼容性都太差……

现有的纯静态模板类代码实在太少，为此我才想要自己写一套

实体

开始写代码是在2021年8月7日，虽说只坚持了2天，但我相信我能一直维护更新下去

由于之前研究Cloudreve等多种原因，我选择了React+MaterialUI的技术栈

同时为了尽可能的锤炼自我，我用了各种不同的方法来表示相同的具现结果

问题

获取页面宽高

在写Card.jsx部分时，我最初使用引入css来进行UI适配。但这样不益于我的前端学习，因此我向 Yui 大佬请教了方法并最终使用theme.breakpoints进行UI适配

可参照https://material-ui.com/zh/customization/breakpoints/）

如果有React、Golang、Kotlin等要定制开发的，极度推荐 Yui 大佬！

如果你白嫖了帮助的话，一定要送他一杯奶茶！

Gitalk集成

同样感谢Yui大佬及时告诉我我忘记引入CSS Style文件

import { Box, Paper } from "@material-ui/core";
import { makeStyles } from "@material-ui/styles";
import GitalkComponent from "gitalk/dist/gitalk-component";
import 'gitalk/dist/gitalk.css';
import React from "react";
import Gitalk from "../../gitalk.config";

const useStyles = makeStyles((theme) => ({
    root: {

    },
    gitalk: {
        padding: 5,
        margin: 15,
        textAlign: "left"
    }
}));

export default function Comment() {
    const classes = useStyles();
    const myGitalk = new Gitalk();
    myGitalk.id = "footer";

    return (
        <Box className={classes.root}>
            <Paper>
                <div className={classes.gitalk} id="Gitalk">
                    <GitalkComponent options={{
                        clientID: myGitalk.ClientID,
                        clientSecret: myGitalk.ClientSecret,
                        repo: myGitalk.Repository,
                        owner: myGitalk.Owner,
                        admin: myGitalk.Admin,
                        distractionFreeMode: false
                    }}
                    />
                </div>
            </Paper>
        </Box>
    )
}

AppBar

在引入AppBar时，左侧弹出的<Paper>组件总是卡不对位置，同时onClick的State要做判断，而且要适配UI

为此我翻阅各大站点寻找可用方法，但大多不符合要求

然后我就从Cloudreve Frontend的铸币代码中找到了答案

const [MenuOpen, set] = useState(false);

const handleClickMenu = () => {
    set(!MenuOpen);
}

return (
    <Hidden xsDown implementation="css">
        <Collapse
            in={MenuOpen}
            component="div"
        >
            <ListBar
                classes={{
                    paper: classes.drawerPaperDesktop,
                }}
                className={classes.Drawer}
                variant="persistent"
                anchor="left"
            />
        </Collapse>
    </Hidden>
)

---

发布

你可以在https://github.com/AH-dark/AHdarkBlog_Storage上找到本项目的源代码

目前实现了以下功能

• 基本的描述
• 联系卡片
• 侧栏菜单
• 绝大多数设备的UI适配
• Gitalk评论

项目计划：https://github.com/AH-dark/AHdarkBlog_Storage/projects/1

如果你觉得还不错，就点个Star吧！

项目开发请使用master分支，AHdark分支是AHdark为适配自身环境进行修改的分支，对正常环境不适配