search
关于这个主题的一些事
Material 3 在 jekyll 上的轻量化实现
关于主题
不太擅长介绍，既然这个页面存在了，就简单写一下吧。 这是一个遵循 Material3 设计，并且使用了 Material Web 项目，轻量化的 Jekyll 主题。
由于 M3 的设计太好看了，一直想亲自动手设计一款使用这种设计的前端项目，作为练手，这个主题便诞生了。
我借助 Material Foundation 的 material-color-utilities 实现了 monet 取色。
你可以在每篇文章的头信息 impression 配置中指定头图，并通过 color 配置指定颜色来让主题生成调色板。
这个主题的参考来源主要是 material.io 官网，其次是 Google 提供的设计规范。
代码高亮支持的语言可以在 rouge-ruby 的网站上找到。
主要功能
- Material 3 风格；
- 支持根据提供的 HEX 颜色动态生成调色板并应用颜色主题；
- 响应式布局。
头信息
下面是所有头信息的详解：
| name | description | type | default | |
|---|---|---|---|---|
| 文章相关
|
title | 文章标题 | text
|
使用 _config.yml 中的配置
|
| description | 文章简介 | |||
| author | 文章作者 | |||
| color | 文章主题颜色 | |||
| impression | 文章头图 | |||
| categories | 目录分类 | list
|
未定义
|
|
| tags | 文章标签 | |||
| published | 是否发布文章 | boolean
|
true | |
| toc | 是否生成文章目录 | true | ||
| 页面导航相关
|
segment_icon | 导航栏中的图标 | text
|
-
|
| segment_title | 导航栏中的标题 | |||
| navigation | 是否在导航中显示 | boolean | ||
配置开发环境
如果不需要对主题进行开发，直接按通常部署 jekyll 的方式部署本主题即可。
安装依赖
Archlinux
content_copy
sudo pacman -S ruby base-devel curl
Debian/Ubuntu
content_copy
sudo apt install ruby-full build-essential zlib1g-dev curl -y
Fedora
content_copy
sudo dnf install ruby ruby-devel openssl-devel redhat-rpm-config gcc-c++ @development-tools -y
使用 nvm 安装 nodejs
content_copy
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
重启终端后
content_copy
nvm install --lts
配置环境变量，以 bash 为例
Archlinux
content_copy
echo 'export GEM_HOME="$(ruby -e 'puts Gem.user_dir')"' >> ~/.bashrc
content_copy
echo 'export PATH="$PATH:$GEM_HOME/bin"' >> ~/.bashrc
Debian/Ubuntu/Fedora
content_copy
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
content_copy
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
安装 Jekyll
重启终端后
content_copy
gem install bundler jekyll
开发本项目
切换到本项目文件夹
content_copy
npm i
content_copy
bundle i
content_copy
npm run dev
使用的 P 站好图
根据作品 id 排序
上一篇
AincradMix
下一篇