实事求是

Bear blog 主题配置 | Bear blog theme setting

Bear blog 的理念是极简，但其实还是提供了CSS 配置，来实现样式个性化。下文是我自己的配置过程（*PS：我不会代码，基本都是靠问 Chatgpt 来实现的，所以不要嫌弃代码丑 orz *）

在开始配置之前，先了解下Bear blog 的页面结构

第一个部分是页面类型，不怕麻烦的话，每个类型的页面可以设置独立的样式；页面类型用 class 来区分，目前有以下几种页面类型：

第二个部分是单个页面的结构，如下所示：

- head /*页头会包括文章的属性*/
- body /*从页面标题到页面内容都在 body 中修改，class 也是对 body 进行定义*/
	- header
		- title /*博客标题*/
		- nav /*博客导航*/
	- main
		- content /*博客内容样式，例如文本、加粗、表格、图片、h1、h2 等*/
		- tags /*文章标签，标签在 post 中设置*/
		- upvotes /*文章点赞按钮*/
- footer /*页脚显示信息*/

Head 部分我没有用，但在设置中可向 Head 模块插入代码，Footer 模块同理；核心在 body 模块，包括博客标题，博客导航，页面内容，页面标签，等其他元素；

在了解了 Bear blog 接下来就是配置样式了

1、全局样式，把通用的样式属性独立出来配置，便于维护

打开 theme 设置，在 body 中设置全局的基础样式，例如背景字色、字体、行高、间距等；

如果是图片、表格等样式，则单独用对应的属性标签做样式配置，例如

img {
/*这里写样式代码*/
}

2、页面样式

不同类型的页面，可以有不同的样式配置。举个例子：bear blog 的博客标题默认全部显示，在文章页面，会同时显示博客和文章标题，并且同样通 H1 的标题样式，导致视觉上没有主次之分。

因此可以对 post 页面单独设置，隐藏标题，在 css 中添加如下代码即可：

body.post header a.title {
    display: none;
}

其中 body 后的.post 是对页面类型的识别，即只对此页面生效；title 则是识别页面中的 title 元素，然后将其隐藏。

在页面样式模块，参考上述代码即可自定义页面样式，不再一一举例说明，推荐像我这样的小白用 chatgpt。

下面附上我的样式代码，供参考

/*1️⃣全局设置*/

:root {
    --width: 650px;
    --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-secondary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-scale: 0.9em;
    --other-font-scale: 1em;
    --background-color: #FFFFFF; 
    --heading-color: #000000;
    --text-color: #000000;
    --link-color: #576B95;
    --secondary-color: #747477;
    --upvote-color-before: #616161;
    --upvote-color-after: #13AE5C;
    --code-background-color: #f2f2f2;
    --code-color: #222;
    --blockquote-color: #222;
    --mark-color:#ffd35a;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #01242e;
        --heading-color: #eee;
        --text-color: #ddd;
        --link-color: #8cc2dd;
        --code-background-color: #000;
        --code-color: #ddd;
        --blockquote-color: #ccc;
        --mark-color:#ffd35a;
    }
}

body {
    font-family: var(--font-secondary);
    font-size: var(--font-scale);
    letter-spacing: 2px;
    margin: auto;
    padding: 24px; 
    max-width: var(--width);
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: var(--text-color);
}

a {
    color: var(--link-color);
    cursor: pointer;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

mark {
    background-color: var(--mark-color); /* 设置高亮颜色 */
    padding: 0em; /* 设置内边距 */
    margin: 0; /* 设置外边距 */
    border-radius: 0.2em; /* 设置边框圆角 */
    /* 可以添加更多你想要的样式 */
}

/*博客标题及导航设置*/

/*博客标题-仅 posts 页面独立设置不显示博客标题*/

.title:hover {
    text-decoration: none;
}

.title h1{
    font-size: 1.4em;
    line-height: 1.6;
    margin-top: 1.5rem;
    color: var(--heading-color);
    /* padding: 0px 0px;
    background: var(--heading-background-color);
    color: var(--heading-color);
    display: inline-block;*/
    font-weight: 500; 
}

/*博客副标题-用 after 设置副标题*/

.title h1:after {
    content: "想看明白世界是什么样的"; /* 在这里添加您的文本 */
    display: block; /* 使文本显示在新的行上 */
    font-size: 14.4px; /* 设置字体大小 */
    color: var(--secondary-color); /* 设置文本颜色 */
    font-weight: 400;
    /* 您可以根据需要添加更多样式 */
  }

/*博客导航设置*/

nav a {
    margin-right: 12px;
    line-height: 1.6;
    font-weight: 500; /* 加粗文本 */
    font-size: var(--other-font-scale);
}

/*标签 filter 页面标题设置*/

body.blog main h1 {
    font-family: var(--font-main);
    color: var(--heading-color);
    font-size: 1.5em;
    margin-top: 0.4em; /* 仅设置顶部外边距 */
    margin-bottom: 0; /* 底部外边距设置为0 */
    line-height: 1.6;
    font-weight: 400; /* 加粗文本 */
}

body.blog main h3 {
    font-family: var(--font-main);
    color: var(--heading-color);
    font-size: 1.17em;
    margin-top: 0.4em; /* 仅设置顶部外边距 */
    margin-bottom: 0; /* 底部外边距设置为0 */
    line-height: 1.6;
    font-weight: 400; /* 加粗文本 */
}

/*2️⃣ Post 页面设置*/

/*header 隐藏*/

/* body.blog header a.title{
    display: none;
}  */

body.post header a.title {
    display: none;
}

/*正文样式设置*/

/*发布日期样式设置*/

time {
    color: var(--secondary-color); /* 示例：设置字体颜色 */
    /* margin-top: 0em; 仅设置顶部外边距 
    margin-bottom: -1.5em; 底部外边距设置为0 */
    line-height: 1.6;
}

/*正文部分的间距设置*/

main p {
    margin-top: 0em; /* 仅设置顶部外边距 */
    margin-bottom: 1.5rem;
    line-height: 2.2;
}

/*标题样式设置*/

body.post main h1 {
    font-size: 1.5em;
    /* margin-bottom: 1.5em; */
    font-family: var(--font-main);
    color: var(--heading-color);
    font-weight: 500;
}

body.post main h2 {
    font-size: 1.3em;
    /* margin-bottom: 1.5em; */
    font-family: var(--font-main);
    color: var(--heading-color);
    font-weight: 500;
}

body.post main h3 {
    font-size: 1.17em;
    /* margin-bottom: 1.5em; */
    font-family: var(--font-main);
    color: var(--heading-color);
    font-weight: 500;
}

body.post main h4 {
    font-size: 1em;
    /* margin-bottom: 1.5em; */
    font-family: var(--font-main);
    color: var(--heading-color);
    font-weight: 500;
}

body.post main h5 {
    font-size: 1em;
    /* margin-bottom: 1.5em; */
    font-family: var(--font-main);
    color: var(--heading-color);
    font-weight: 400;
}


strong,
b {
    color: var(--heading-color);
}

button {
    margin: 0;
    cursor: pointer;
}

/* table {
    width: 100%;
} */

hr {
    border: 0;
    border-top: 1px dashed;
}

img {
    max-width: 100%;
    border-radius: 4px;
}
  
code {
    font-family: monospace;
    padding: 2px;
    background-color: var(--code-background-color);
    color: var(--code-color);
    border-radius: 4px;
}

.highlight {
    padding: 1px 15px;
    font-family: monospace;
    background-color: var(--code-background-color);
    color: var(--code-color);
    margin-block-start: 1em;
    margin-block-end: 1em;
    border-radius: 4px;
    overflow: auto;
}

.inline {
    width: auto !important;
}



table {
    border-collapse: collapse;
}

table,
th,
td {
    border: 1px dashed var(--heading-color);
    padding: 10px;
}

li {
    padding-bottom: 0.5em; /* 设置列表项之间的内边距 */
}

/*blockquote {
/*    border-top: 1px solid var(--heading-color);
    border-bottom: 1px solid var(--heading-color); */
/*    
    text-align: left;
    font-size: 1em; 
    position: relative;
    color: var(--text-color);
    padding: 20px;
    font-style: italic;
    margin-left: 0px;
    margin-right: 0px;
} */

/*blockquote::before {   */
    /*content: open-quote;  使用CSS的open-quote属性 */    
    /*font-size: 3em;  调整引号的大小 */
    /*position: absolute;
    left: -12px;  调整引号的位置 */
    /*top: 0; /* 调整引号的位置 */
    /*color: var(--link-color); /* 调整引号的颜色 */
/*} */

blockquote {
    /* 添加内边距、边框、字体样式等 */
    padding: 1em;
    border-left: 5px solid var(--text-color); /* 调整为您喜欢的颜色 */
    font-style: normal;
    /* 背景设置：使用透明的背景图层与点状的背景图案 */
    background-image: 
        radial-gradient(circle, #d7d7d7 1px, transparent 1px);
        /*linear-gradient(rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.5));*/
    background-size: 3px 3px; /* 点的尺寸和间隔，可根据需要调整 */
    background-position: center center;
    margin: 20px 0;
    position: relative;
    border-radius: 4px; /* 4px的圆角 */
  }

blockquote p {
    margin-bottom: 0px; /* 设置为所需的值 */
}

blockquote:before {
    /* 创建侧边条 */
    content: "";
    position: absolute;
    left: -5px; /* 向左偏移以覆盖边框 */
    top: 0;
    width: 5px; /* 侧边条宽度 */
    height: 100%;
    background-color: var(--secondary-color); /* 侧边条颜色，调整为您喜欢的颜色 */
  }

/* 直接针对包含标签的元素设置样式 */
main p.tags {
    background-color: var(--code-background-color); /* 设置背景颜色 */
    padding: 1em; /* 添加内边距 */
    border-radius: 4px; /* 添加圆角 */
    margin-top: 2rem;
    /* 其他您希望的样式 */
  }

/* 为包含标签的段落添加前缀文本 */
main p.tags:before {
    content: "标签"; /* 在标签前添加的文本 */
    margin-right: 0.5em; /* 在文本和第一个标签之间添加间隔 */
}

main p.tags a {
    color: var(--upvote-color-after);/* 这里设置您希望的颜色 */
}

/*Home 页面设置*/

/*标题设置*/

body.home main h1 {
    font-size: 1.5em !important;
    margin-bottom: 1.33em !important;
    margin-top: 1.33em !important;
    font-family: var(--font-main) !important;
    color: var(--heading-color) !important;
    font-weight: 500 !important;
}

body.home main h2 {
    font-size: 1.3em !important;
    margin-bottom: 1.33em !important;
    margin-top: 1.33em !important;
    font-family: var(--font-main) !important;
    color: var(--heading-color) !important;
    font-weight: 500 !important;
}

body.home main h3 {
    font-size: 1.17em !important;
    margin-bottom: 1.33em !important;
    margin-top: 1.33em !important;
    font-family: var(--font-main) !important;
    color: var(--heading-color) !important;
    font-weight: 500 !important;
}

body.home main h4 {
    font-size: 1em !important;
    margin-bottom: 1.33em !important;
    margin-top: 1.33em !important;
    font-family: var(--font-main) !important;
    color: var(--heading-color) !important;
    font-weight: 500 !important;
}

body.home main h5 {
    font-size: 1em !important;
    margin-bottom: 1.33em !important;
    margin-top: 1.33em !important;
    font-family: var(--font-main) !important;
    color: var(--heading-color) !important;
    font-weight: 400 !important;
}

/*自定义 page 页面设置-class=page*/

/*标题设置*/

body.page main h1 {
    font-size: 1.5em !important;
    margin-bottom: 1.33em !important;
    margin-top: 1.33em !important;
    font-family: var(--font-main) !important;
    color: var(--heading-color) !important;
    font-weight: 500 !important;
}

body.page main h2 {
    font-size: 1.3em !important;
    margin-bottom: 1.33em !important;
    margin-top: 1.33em !important;
    font-family: var(--font-main) !important;
    color: var(--heading-color) !important;
    font-weight: 500 !important;
}

body.page main h3 {
    font-size: 1.17em !important;
    margin-bottom: 1.33em !important;
    margin-top: 1.33em !important;
    font-family: var(--font-main) !important;
    color: var(--heading-color) !important;
    font-weight: 500 !important;
}

body.page main h4 {
    font-size: 1em !important;
    margin-bottom: 1.33em !important;
    margin-top: 1.33em !important;
    font-family: var(--font-main) !important;
    color: var(--heading-color) !important;
    font-weight: 500 !important;
}

body.page main h5 {
    font-size: 1em !important;
    margin-bottom: 1.33em !important;
    margin-top: 1.33em !important;
    font-family: var(--font-main) !important;
    color: var(--heading-color) !important;
    font-weight: 400 !important;
}


footer {
    padding: 25px 0;
    text-align: center;
    opacity: 0.6;
}


/* 博客列表设置 */
ul.blog-posts {
    list-style-type: none;
    padding: unset;
    line-height: 1.6;
}

ul.blog-posts li {
    display: flex;
    margin-bottom: 24px;
    padding-bottom: 0;
}

ul.blog-posts li time {
    font-style: normal;
    color: var(--secondary-color);
}

ul.blog-posts li span {
    flex: 0 0 130px;
}

@media only screen and (max-width:767px) {
    /* main {
        line-height: 1.6;
    } */

    ul.blog-posts li {
        flex-direction: column;
    }

    ul.blog-posts li span {
        flex: unset;
    }
}

/*点赞按钮设置*/

.post {

/* Upvote button styles */
.upvote-button svg { 
    display: none; /* 隐藏SVG图标 */
}

.upvote-button {
    display: block !important;
    padding: 0;
    margin: 0;
    border: 0;
    background-color: transparent;
    color: var(--secondary-color); /* 未点赞状态文字颜色 */
    flex-direction: column;
    align-items: center;
}

.upvote-button::before {
    content: "like???";
    background: transparent;
    color: var(--secondary-color); /* 未点赞状态前置内容颜色 */
    border: 1.2px solid var(--secondary-color); /* 未点赞状态边框颜色 */
    padding: 4px 6px;
    border-radius: 4px;
}

.upvote-button:hover {
    color: var(--link-color); /* 悬停状态按钮文字颜色 */
}

.upvote-button:hover::before {
    content: "like!!!"; /* 悬停状态前置内容变化 */
    color: var(--link-color); /* 悬停状态前置内容颜色 */
    border: 1.2px solid var(--link-color); /* 悬停状态边框颜色 */
}

.upvote-count {
    font-size: 100%;
    margin-top: -3px;  
    color: var(--secondary-color); /* 默认状态颜色 */
}

.upvote-count::before {
    content: "-`  ";
    color: var(--secondary-color); /* 默认状态颜色 */
}

.upvote-count::after {
    content: " ♡ ´-";
    color: var(--secondary-color); /* 默认状态颜色 */
}

.upvote-button.upvoted .upvote-count,
.upvote-button.upvoted .upvote-count::before,
.upvote-button.upvoted .upvote-count::after {
    color: var(--upvote-color-after); /* 点赞后的颜色 */
}

.upvote-button.upvoted {
    font-size: 80%;
    color: var(--upvote-color-after);
}

.upvote-button[disabled] {
    color: var(--upvote-color-after);
}

.upvote-button[disabled]::before {
    content: "orz 牛逼";
    background: transparent;
    color: var(--upvote-color-after);
    border: 1.2px solid var(--upvote-color-after);
    padding: 4px 6px;
    border-radius: 4px;
}
}

body:hover {
    border-image: url("/hit/WYPjfeLZxLSAAqKQhBhu/");
    border-width: 0;
}

#教程