2024-02-02发表2024-02-02更新其他5 分钟读完 (大约781个字)

Icarus主题美化

本文面向前端小白！仅记录自己修改的部分！

个人主题配置

主要就是修改_config.icarus.yml文件，具体主题配置可以参考Icarus用户指南。

网页显示的图标

1
2
3

# _config.icarus.yml
head:
    favicon: /img/pikachu.svg

Logo修改

1 2	# _config.icarus.yml logo: /img/logo_pikachu.svg

网页显示的标题

1 2	# _config.yml title: Hyeee's Home

网页显示的语言
- 可以在node_modules\hexo-theme-icarus\languages目录下查看可用的语言
- PS：如果找不到相应的语言，会自动选择德语~~（经验之谈）~~

1 2	# _config.yml language: zh-CN

个人信息修改

widgets:
    -
        author: Hyeee
        author_title: '|ू･ω･` )'
        location: Hangzhou, China
        avatar: /img/avatar_pikachu.jpg
        follow_link: https://github.com/HeeeeH

其他一些七七八八的，比如cookie、赞赏、评论什么的不太会就先全部注释掉啦

加入背景图片

将背景图片放到node_modules\hexo-theme-icarus\source\img目录下
修改node_modules\hexo-theme-icarus\include\style\base.styl文件，在body样式下加入以下几行
1
2
3
4
5
body
... ...
background: url(../img/background_op.png) no-repeat
background-attachment: fixed
background-size: cover
- background的属性说明
  - url：图片路径（这里填的是相对路径）
  - attachment ：图片是否滚动（fixed为不滚动，scoll 为滚动）
  - size：图片大小（原始尺寸为 auto ，覆盖为 cover ，拉伸为 contain 等）
PS：背景图片的不透明度有点难调，所以我选择PS手动调节(。-`ω´-)

标签颜色更改

主题的颜色定义在node_modules\hexo-theme-icarus\include\style\base.styl中，可以将$primary直接修改为想要的颜色。例如：

1	$primary ?= $yellow

但是这样的修改不全面，还有很多地方的颜色是硬编码。这里记录一下我修改的地方：

base.styl:
- $navbar-item-active-color
- $menu-item-active-color
- $menu-item-active-background-color
article.styl
- article &.media color
- article &.media a &:hover color
helper.styl
- .link-muted &:hover color
navbar.styl
- .navbar-main .navbar-item &.is-active color
- .navbar-main .navbar-item &.hover color

PS：找不到对应元素的标签或class怎么办？

可以通过F12，选中页面元素查看对应元素的标签以及class，然后直接修改在自定义的custom.styl中。

// 例如修改导航栏悬浮时的颜色
a.navbar-item:hover, .navbar-link:hover, a.navbar-item.is-active, .navbar-link.is-active {
    background-color: #fafafa;
    color: #ff9600;
}
1
2
3
4
5

- 再在node_modules\hexo-theme-icarus\source\css\style.styl文件中引入custom.styl。

  - ```stylus
    @import './custom'