网站名称:AI圈导航
网站简介:人工智能(AI)领域最全面的资源导航网站
网站地址:AI圈导航
效果截图
开发时间(共4天)
- 原型设计:2020年02月27日 ~ 2020年02月28日
- 前端:2020年02月28日 ~ 2020年02月29日
- 后端:2020年02月29日 ~ 2020年03月01日
架构
- 前端:Neumorph.scss
- 后端:Flask
- 数据库:Mysql
- 服务器:Nginx
注:Neumorph.scss是Soft-UI风格的CSS库,基于Bootstrap4。
考虑到要做SEO优化,所以没有选择使用Vue/React,并且采用后端渲染。
完全使用原生JavaScript,没有使用Jquery,因为完全没必要为了少写两行代码而多加载几百行代码
后台功能
- 分类管理
- 网站管理
- 网站审核
开发中遇到的问题
-
Neumorph.scss的主题的美观度不够
解决方法:自定义了主题颜色和Box-shadow -
切换主题时加载CSS速度太慢
解决方法:使用下面的方法预加载CSS
<link rel="preload" href="/static/css/dark/dark.css" as="style">
- 某些移动设备不兼容scroll,页面错乱
解决方法:使用CSS @media screen做适配(应该还有更好的解决方法)