调整网站的外观和感觉

让我们学习如何自定义网站的外观和风格，以个性化各种元素，包括网站标题、个人头像、favicon、字体样式、字体属性以及颜色选择。

关于检查工具

浏览器中的 检查工具 可用于直接在浏览器中试验修改 CSS 属性。使用检查工具所做的更改是临时的，刷新浏览器后，原始的 CSS 属性将被恢复。

我们可以右键点击想要编辑的网页元素（例如图片、文字、链接、按钮），然后点击“检查”来访问此工具。

用于个性化的关键文件

要更改网站的外观和风格，我们需要编辑项目目录中的以下文件：

• config.yaml
• config/_default/languages.toml
• config/_default/params.toml
• themes/anatole/assets/scss/modules/_variables.scss
• themes/anatole/assets/scss/partials/_base.scss
• themes/anatole/assets/scss/partials/components/_post.scss

修改标题、描述和作者

• 我们可以通过打开 config/_default/languages.toml 文件并修改 title 参数来更改主页上的标题“我的博客”。

1[en]
2title = "我的博客"
3weight = 1
4LanguageName = "EN"
5contentDir = "content/english"

• 要更改主页上的描述“叫我简”，可以打开 config/_default/params.toml 并编辑 description 参数。

• 要更改作者“简·多伊”，可以打开 config/_default/params.toml 并编辑 author 参数。这样会改变网站标题在浏览器标签页中显示的内容。

1title = "我是简·多伊"
2author = "简·多伊"
3#copyright = "2020-2021"
4description = "叫我简"
5profilePicture = "images/profile.jpg"
6...

添加新的个人头像

个人头像是主页上的主要图像。要使用自己的图片，可以进入 static/images/ 目录，将 profile.jpg 替换为你的图片。如果图片文件名也是 profile.jpg，则无需额外修改。如果不是，则需要在 config/_default/params.toml 文件中更新 profilePicture 参数，将其改为你的图片文件名。

1title = "我是简·多伊"
2author = "简·多伊"
3#copyright = "2020-2021"
4description = "叫我简"
5profilePicture = "images/profile.jpg"

如果对图片尺寸不满意（例如太窄或太宽），可以在 themes/anatole/assets/scss/partials/components/_sidebar.scss 文件中编辑 CSS 属性。可以修改 .sidebar 类中 &-profileimage 元素的 width 和 height 属性。

1.sidebar {
2  ...
3  &__introduction {
4    ...
5    &-profileimage {
6      width: 127px;
7      height: 127px;
8      border-radius: 50%;
9    }
10    ...
11  }
12}
13    
14    

更改 favicon 图标

favicon 是访问网站时出现在浏览器标签页中的小图标。我们可以通过进入 static/favicons/ 目录，将 favicon.ico 替换为自己的 favicon 来更改它。如果我们的 favicon 文件名为 favicon.ico，则无需额外操作。如果想更改文件名，可以打开 config/_default/params.toml，并将 favicon 参数更新为新的 favicon 文件名。

1title = "我是简·多伊"
2author = "简·多伊"
3#copyright = "2020-2021"
4description = "叫我简"
5profilePicture = "images/profile.jpg"
6keywords = ""
7favicon = "favicons/"

更改字体样式

我们可以轻松更改网站的默认字体。建议从 Google Fonts 中选择一个字体。本示例中我们将使用 Nunito 字体。

要导入 Google 字体并将其包含在 _base.scss 文件中，请执行以下步骤：

1. 首先，前往 Google Fonts 找到并选择一个字体。

2. 然后决定要导入哪些字体样式。建议导入所有可用样式。点击每个样式的“+ 选择此样式”来添加。

3. 在“在网页上使用”选项下选择“@import”。

4. 复制样式标签之间的 HTML 代码，然后将其粘贴到位于 themes/anatole/assets/scss/partials/_base.scss 的 _base.scss 文件中。

5. 更新所有 font-family 属性实例，将所有字体样式更改为新字体。幸运的是，Anatole 主题仅在一个位置指定了 font-family 属性。

1@charset "UTF-8";
2// 导入 Nunito 字体
3@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&family=Roboto:wght@300&display=swap');
4
5* {
6  @include ltr {
7    font-family: 'Nunito'; // 将 Nunito 添加到 font-family 属性
8    font-size: 1.6rem;
9  }
10
11  @include rtl {
12    font-family: 'Tajawal', sans-serif;
13    font-size: 1.5rem;
14  }
15}

更改字体大小

要更改字体大小，可以使用浏览器中的检查工具定位要修改的网页元素。然后选择该元素，尝试调整其 font-size 属性（例如 font-size: 3rem）。满意后，可以编辑位于 themes/anatole/assets/scss/partials/components/ 目录中的相应组件的 Sass 文件，将 font-size 属性调整为合适的值。

让我们看看以下修改：

• 可以编辑 themes/anatole/assets/scss/partials/components/_post.scss 文件中 .post 类的 h1 元素字体大小，这将改变文章标题的字体。

1.post {
2 ...
3  &__content {
4    ...
5    h1 {
6      $font-size-h1: 3.6rem;
7
8      font-size: $font-size-h1;
9      letter-spacing: 1px;
10      line-height: 1;
11    }
12    ...
13  }
14}    

• 可以编辑 themes/anatole/assets/scss/partials/components/_tag.scss 文件中 .tag 类的标签字体大小，这将改变文章标签的字体大小。

1.tag {
2  display: inline-block;
3  font-size: 1.4rem;
4}

更改颜色

我们可以更改几乎任何网页元素的颜色，包括文字、背景、边框等。要更改颜色，需编辑 _variables.scss 文件，因为该文件包含了网站中使用的所有颜色。

考虑以下修改：

• 可以打开位于 themes/anatole/assets/scss/modules 目录下的 _variables.scss 文件，编辑 $primary--lightmode 和 $primary--darkmode 颜色，查看网站中文本颜色的变化。

• 信息颜色 出现在鼠标悬停于网站链接时。可以通过打开位于 themes/anatole/assets/scss/modules/ 目录下的 _variables.scss 文件，修改 $info 变量的值来查看该颜色的变化。

1$accent--lightmode: #fff;
2$primary--lightmode: #464646;
3$primary-light--lightmode: #9f9f9f;
4$primary-lighter--lightmode: #eeeeee;
5$shadow--lightmode: 0 8px 16px rgba(10, 10, 10, 0.1);
6
7$accent--darkmode: #152028;
8$primary--darkmode: #eeeeee;
9$primary-light--darkmode: #9f9f9f;
10$primary-lighter--darkmode: #464646;
11$shadow--darkmode: 0 8px 16px rgba(226, 226, 226, 0.1);
12
13$alert: #ffc107;
14$info: #0366d7;
15
16$thumbnail-height: 15em;
17$body-max-width: 1920px;
18
19$sidebar-ratio: calc(1 - #{$content-ratio});
20$content-max-width: calc(#{$body-max-width} * #{$content-ratio});
21$sidebar-max-width: calc(#{$body-max-width} - #{$content-max-width});
22$content-width: calc(#{$content-ratio} * 100%);
23$sidebar-width: calc(#{$sidebar-ratio} * 100%);

让我们来个性化我们的网站！

让我们尝试实现课程中建议的修改：

1. 编辑 config/_default/params.toml 文件中的 title、description 和 author 参数。
2. 在 config/_default/params.toml 文件中将头像更改为 profile-icon.png。为了方便，该文件已存在于 static/images 目录中。我们只需更改文件名即可。
3. 尝试将新的字体样式添加到 themes/anatole/assets/scss/partials/_base.scss 文件中。
4. 在 themes/anatole/assets/scss/partials/components/_post.scss 文件中尝试调整字体大小。
5. 在 themes/anatole/assets/scss/modules/_variables.scss 文件中尝试调整颜色。

完成上述修改后，运行以下代码，观察输出有何不同。我们已高亮出将要编辑的代码行。

注意： 由于完整项目文件夹包含许多文件，我们并未展示全部内容。我们只能查看和操作需要编辑的文件。