一个纯静态导航网站
因为作者初学前端,想要学习各种原生的写法,以及 想要踩更多的坑。所以本项目未引入任何第三方的 CSS 或者 JavaScript 框架。
content-visibility: auto;
优化页面加载速度克隆仓库到本地 git clone https://github.com/Seven-Steven/kanjian.la.git
进入代码目录 cd kanjian.la
使用 Docker 运行代码
docker run -it \
--rm \
-v=$PWD:/srv/jekyll \
-p 4000:4000 \
jekyll/jekyll:4 jekyll serve
访问 http://localhost:4000 即可开启实时预览
├── assets 站点静态文件
│ ├── css 站点 CSS 样式目录
│ └── image 站点图片
│ └── logo 导航站点 logo 文件目录
├── _config.yml 网站配置
├── _data
│ └── sites.yml 站点数据
├── Gemfile ruby 依赖定义文件
├── _includes 页面模板
├── index.html 首页
├── _layouts 页面布局
│ ├── default.html 默认布局
│ └── index.html 首页布局
├── README.md 项目说明
└── _site 编译文件目录,可用于发布的静态文件
一般情况下,只需要关注 _config.yml
, data/sites.yml
文件和 assets/image/logo
目录
_config.yml
文件是站点的配置信息,包括站点名称、描述、favicon 等信息data/sites.yml
文件是站点内容配置文件,网站的所有内容都是依照这个文件编译生成assets/image/logo
目录用于存放导航站点 logo,然后被 data/sites.yml
引用使用 Docker 编译代码
docker run --rm -it \
-v ${PWD}:/srv/jekyll \
-v ${PWD}/_site:/srv/jekyll/_site \
jekyll/builder:4 /bin/bash -c '
gem sources -r https://rubygems.org/ -a https://gems.ruby-china.com/ && \
bundle config mirror.https://rubygems.org https://gems.ruby-china.com && \
bundle config --delete "mirror.https://rubygems.org" && \
jekyll build --future'
发布 _site
目录到服务器
vw
;rem
;em
;12px
, 响应式布局需要考虑浏览器限制;max-width
min-width
max-height
min-height
等保障基础布局;inline
元素不支持 transform
,需要将其 display
设置为 inline-block
或者 block
;fix
或者 stick
布局带来的 anchor 定位偏移。参考文档无法直接使用 backdrop-filter
属性同时对父子元素创建模糊效果,受 解决父级使用backdrop-filter后,子级再使用不生效 启发,使用下面的代码解决了问题。
.blur::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-backdrop-filter: blur(.1rem);
backdrop-filter: blur(.1rem);
}