设置博客文章的圆角

发表于 更新于 分类于 阅读次数： Changyan：

同样启发与Win11，Win11最大的特点就是圆角的设计了，不得不说，真的是相比来说比较好看。

那么也把自己的博客配置为圆角的设计吧。

配置步骤

  1. 取消注释

打开themes\next\_config.yml文件。
CTRL+F查找关键字“custom_file_path”(如果你使用的是VS-CODE编辑器)。
取消variable: source/_data/variables.styl注释。

折叠代码
1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  footer: source/_data/footer.swig
  bodyEnd: source/_data/body-end.njk
  variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

PS：我这里取消注释的比较多，因为设置的比较多，单独说设置圆角的话，只需要取消注释variable即可。

  1. 按照variable的路径添加相应的文件，如果当前不存在此文件的话。如果已经存在的话，添加以下配置。
1
2
3
// 圆角设置
$border-radius-inner     = 10px 10px 10px 10px;
$border-radius           = 10px;

值越大，圆角弧度越大，按照个人喜好设置即可。

补充

已经取消注释的文件对应的功能和教程链接。

文件 功能
footer 背景”小飞棍”
bodyEnd 折叠代码
variable 设置圆角
style 背景图片、博客透明度、折叠代码