外观(Look)

设置主题的样式、颜色、站点标识、站点图标等。

样式 style

  • assets/scss/_variables_project.scss 可以覆盖主题原有的变量值(在 assets/scss/_variables.scss 找到主题原有的变量值)和 Bootstrap 变量默认值
  • assets/scss/_styles_project.scss 可以添加自己的自定义 SCSS 样式的地方,包括覆盖 Docsy 主题 SCSS 文件中的任何样式。

颜色 color

assets/scss/_variables_project.scss 中设置:

1$primary: #390040;
2$secondary: #A23B72;

将图片放在 assets/icons/logo.svg 会覆盖默认的站点标识。

通过配置 navbar_logo: false 也可以不显示站点标识。

站点图标 favicon

将图标放在 static/favicons/ 中会覆盖默认的站点图标。

因为主题会在头文件中插入下面引用 themes/docsy/layouts/partials/favicons.html

 1
 2<!-- Favicons as generated by http://cthedot.de/icongen -->
 3<link rel="shortcut icon" href="{{ "favicons/favicon.ico" | relURL }}" >
 4<link rel="apple-touch-icon" href="{{ "favicons/apple-touch-icon-180x180.png" | relURL }}" sizes="180x180">
 5<link rel="icon" type="image/png" href="{{ "favicons/favicon-16x16.png" | relURL }}" sizes="16x16">
 6<link rel="icon" type="image/png" href="{{ "favicons/favicon-32x32.png" | relURL }}" sizes="32x32">
 7<link rel="icon" type="image/png" href="{{ "favicons/android-36x36.png" | relURL }}" sizes="36x36">
 8<link rel="icon" type="image/png" href="{{ "favicons/android-48x48.png" | relURL }}" sizes="48x48">
 9<link rel="icon" type="image/png" href="{{ "favicons/android-72x72.png" | relURL }}" sizes="72x72">
10<link rel="icon" type="image/png" href="{{ "favicons/android-96x96.png" | relURL }}" sizes="96x96">
11<link rel="icon" type="image/png" href="{{ "favicons/android-144x144.png" | relURL }}" sizes="144x144">
12<link rel="icon" type="image/png" href="{{ "favicons/android-192x192.png" | relURL }}" sizes="192x192">

Tips: 通过 http://cthedot.de/icongen(允许您从单个图像创建各种图标大小和选项)或 https://favicon.io 可以快速创建一组网站图标。

图标样式 icon

https://fontawesome.com/icons?d=gallery&m=free

Last modified November 4, 2023: Correcting content dir (da1a055)