放置图片 链接到标题
将图片都放在static/images
目录中
白天图片 链接到标题
在assets/scss/_base.scss
中将body改为下面的形式
body {
color: $fg-color;
background-color: $bg-color; // 备用背景颜色
background-image: url('/images/normal.jpg'); // 默认背景图片
background-size: cover; // 让背景图片覆盖整个页面
background-repeat: no-repeat; // 不重复背景图片
background-attachment: fixed; // 背景图片固定,不随滚动条移动
font-family: $font-family;
font-size: 1.8em;
font-weight: 400;
line-height: 1.8em;
@media (prefers-color-scheme: dark) {
background-image: url('/images/dark.jpg'); // 暗色模式背景图片
}
@media only screen and (max-width: 768px) {
font-size: 1.6em;
line-height: 1.6em;
}
}
即白天模式下显示的图片,
暗夜图片 链接到标题
将assets/scss/_base_dark.scss
的内容修改为
@mixin base_dark {
color: $fg-color-dark;
background-color: $bg-color-dark;
background-image: url('/images/dark.JPG'); // 添加背景图片
background-size: cover; // 让背景图片覆盖整个页面
background-repeat: no-repeat; // 不重复背景图片
background-attachment: fixed; // 背景图片固定,不随滚动条移动
a {
color: $link-color-dark;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $alt-fg-color-dark;
&:hover .heading-link {
visibility: visible;
}
.heading-link {
color: $link-color-dark;
font-weight: inherit;
text-decoration: none;
font-size: 80%;
visibility: hidden;
}
.title-link {
color: inherit;
font-weight: inherit;
text-decoration: none;
}
}
pre code {
background-color: inherit;
color: inherit;
}
code {
background-color: $lighter-alt-bg-color-dark;
color: $fg-color-dark;
}
blockquote {
border-left: 2px solid $alt-bg-color-dark;
}
th,
td {
padding: 1.6rem;
}
table {
border-collapse: collapse;
}
table td,
table th {
border: 2px solid $alt-fg-color-dark;
}
table tr:first-child th {
border-top: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
border-right: 0;
}
}
body.colorscheme-dark {
@include base_dark();
}
body.colorscheme-auto {
@media (prefers-color-scheme: dark) {
@include base_dark();
}
}
即可进行修改