关于本博客的客制化css

💡 TIP

当然是记一些关于本博客客制化css相关的内容啦

由于之前说到用自定义渲染器渲染callout

但是其中其实还有一个问题有待解决：

如何将自定义的callout样式块渲染出来

这里指的是，Markdown已经成功的转换成显示在网站中的html代码块了

但是实际上我们发现，解析的html我们确实有了，但是callout并非是我们想要的样式，而是一个并没有进行任何着色的状态。

¶自定义`css`样式

💡 TIP

2.1 添加客制化css

虽然在css目录下任意.styl下添加css样式代码可以生效，但是为了方便以后修改，最好创建一个新的.styl文件记录自己的修改。

在themes/next/source/css/main.styl最后加上：
1
@import "_custom/custom"
在themes/next/source/css目录下创建_custom文件夹；
在目录themes/next/source/css/_custom下新建文件custom.styl。
在custom.styl中添加css样式修改博客的css。

—— 摘自 hexo-next主题配置css | 大水笔✰档案室

然后就是将自己自定义的css样式放在里面

这里贴一下callout样式部分：


/* 基础样式 */
.callout {
    border-left: 4px solid;
    background-color: #f0f0f0;
    padding: 10px;
    margin: 10px 0;
    font-size: 14px;
    border-radius: 4px;
}

/* Info 样式 */
.callout-info {
    border-left-color: #3178c6;
    background-color: #e3f2fd;
}

/* Warning 样式 */
.callout-warning {
    border-left-color: #e5a700;
    background-color: #fff3e0;
}

/* Error 样式 */
.callout-error {
    border-left-color: #d32f2f;
    background-color: #ffebee;
}

/* Success 样式 */
.callout-success {
    border-left-color: #2e7d32;
    background-color: #e8f5e9;
}

/* Note 样式 */
.callout-note {
    border-left-color: #673ab7;
    background-color: #ede7f6;
}

/* Tip 样式 */
.callout-tip {
    border-left-color: #009688;
    background-color: #e0f2f1;
}

然后，就好了，现在整个callout块的部分就完整了🙌

(完)

¶自定义css样式

2.1 添加客制化css

¶自定义`css`样式