Hyde Blog

主题

Hyde2025-03-17 03:52:04Teek
1142
5.5m
Get...

container-hyde容器 原创 ​

创建 ​

  • 在 docs\.vitepress\theme\style\Container 文件夹，然后新建 container-bg.scss container-border-left.scss container-border.scss container-hyde.scss 并填入如下代码

    提示

    没有 style 文件夹的话，自己创建一个

scss
// 容器背景色
// 亮色主题变量
:root {
  // 信息区块
  --custom-block-info-bg: #f4f4f5;

  // 提示区块
  --custom-block-tip-bg: #ecf7fe;

  // 警告区块
  --custom-block-warning-bg: #fdf6ec;

  // 危险区块
  --custom-block-danger-bg: #fef0f0;

  // 详情区块
  --custom-block-details-bg: #f0f6ff;

  // 笔记区块
  --custom-block-note-bg: #eef9fd;

  // 重要区块
  --custom-block-important-bg: #f4eefe;

  // 注意区块
  --custom-block-caution-bg: #fde4e8;
}

// 暗色主题变量
.dark {
  // 信息区块
  --custom-block-info-bg: #474748;

  // 提示区块
  --custom-block-tip-bg: #3764aba8;

  // 警告区块
  --custom-block-warning-bg: #4d3800;

  // 危险区块
  --custom-block-danger-bg: #4b1113;

  // 详情区块
  --custom-block-details-bg: #65758529;

  // 笔记区块
  --custom-block-note-bg: #193c47;

  // 重要区块
  --custom-block-important-bg: #230555;

  // 注意区块
  --custom-block-caution-bg: #391c22;
}
scss
// 容器边框左侧样式
// 亮色主题变量
:root {
  /* INFO 容器左侧 */
  --custom-block-info-left: #909399;
  /* TIP 容器左侧 */
  --custom-block-tip-left: #539dfd;
  /* Warning 容器左侧 */
  --custom-block-warning-left: #e6a23c;
  /* Danger 容器左侧 */
  --custom-block-danger-left: #f56c6c;
  /* Details 容器左侧 */
  --custom-block-details-left: #d9e8ff;

  /* GitHub 风格警告 */

  /* NOTE 容器左侧 */
  --custom-block-note-left: #95cce9;
  /* IMPORTANT 容器左侧 */
  --custom-block-important-left: #c5a4fd;
  /* Caution 容器左侧 */
  --custom-block-caution-left: #ff6b6b;
}

// 暗色主题变量
.dark {
  /* INFO 容器左侧（中性信息） */
  --custom-block-info-left: #75777e;
  /* TIP 容器左侧（提示/建议） */
  --custom-block-tip-left: #4a86e8;
  /* Warning 容器左侧（警告/注意） */
  --custom-block-warning-left: #f3b263;
  /* Danger 容器左侧（危险/错误） */
  --custom-block-danger-left: #f96262;
  /* Details 容器左侧（细节/展开） */
  --custom-block-details-left: #91c2ff;

  /* GitHub 风格扩展 */
  /* NOTE 容器左侧（备注/说明） */
  --custom-block-note-left: #6ab9e6;
  /* IMPORTANT 容器左侧（重要信息） */
  --custom-block-important-left: #a577f7;
  /* Caution 容器左侧（谨慎操作） */
  --custom-block-caution-left: #ff4d4f;
}
scss
// 容器边框样式
// 亮色主题变量
:root {
  // 信息区块
  --custom-block-info-border: #cccccc;

  // 提示区块
  --custom-block-tip-border: #539dfd;

  // 警告区块
  --custom-block-warning-border: #e6a700;

  // 危险区块
  --custom-block-danger-border: #e13238;

  // 笔记区块
  --custom-block-note-border: #90e0ff;

  // 重要区块
  --custom-block-important-border: #a371f7;

  // 注意区块
  --custom-block-caution-border: #e0575b;

  // 详情区块
  --custom-block-details-border: #5c6bc0;
}

// 暗色主题变量
.dark {
  // 信息区块
  --custom-block-info-border: #cccccc;

  // 提示区块
  --custom-block-tip-border: #2583ff;

  // 警告区块
  --custom-block-warning-border: #e6a700;

  // 危险区块
  --custom-block-danger-border: #e13238;

  // 笔记区块
  --custom-block-note-border: #4cb3d4;

  // 重要区块
  --custom-block-important-border: #a371f7;

  // 注意区块
  --custom-block-caution-border: #e0575b;

  // 详情区块
  --custom-block-details-border: #5c6bc0;
}
scss
// container-hyde 容器样式
@use "./container-bg.scss";
@use "./container-border-left.scss";
// @use "./container-border.scss";
$show-border-left: true; // 是否显示左边框 默认：false

/* INFO 容器背景色、线条边框 */
.custom-block.info {
  background-color: var(--custom-block-info-bg);
  border: 1.5px solid var(--custom-block-info-border);
  @if $show-border-left {
    border-left: 3px solid var(--custom-block-info-left);
  }
}

/* TIP 容器边框色、背景色、线条边框 */
.custom-block.tip {
  background-color: var(--custom-block-tip-bg);
  border: 1.5px solid var(--custom-block-tip-border);
  @if $show-border-left {
    border-left: 3px solid var(--custom-block-tip-left);
  }
}

/* Warning 容器背景色、线条边框 */
.custom-block.warning {
  background-color: var(--custom-block-warning-bg);
  border: 1.5px solid var(--custom-block-warning-border);
  @if $show-border-left {
    border-left: 3px solid var(--custom-block-warning-left);
  }
}

/* Danger 容器背景色、线条边框 */
.custom-block.danger {
  background-color: var(--custom-block-danger-bg);
  border: 1.5px solid var(--custom-block-danger-border);
  @if $show-border-left {
    border-left: 3px solid var(--custom-block-danger-left);
  }
}

// details 容器背景色、线条边框
.custom-block.details {
  background-color: var(--custom-block-details-bg);
  border: 1px solid var(--custom-block-details-border);
  @if $show-border-left {
    border-left: 3px solid var(--custom-block-details-left);
  }
}

/* NOTE 容器背景色、线条边框 */
.custom-block.note {
  border: 1px solid var(--custom-block-note-border);
  border-left: 3px solid var(--custom-block-note-left);
}

/* IMPORTANT 容器背景色、线条边框 */
.custom-block.important {
  background-color: var(--custom-block-important-bg);
  border-left: 3px solid var(--custom-block-important-left);
}

/* CAUTION 容器背景色、线条边框 */
.custom-block.caution {
  background-color: var(--custom-block-caution-bg);
  border-left: 3px solid var(--custom-block-caution-left);
}

引入 ​

最后在引入 docs\.vitepress\theme\style\index.scss 中

scss
// 流体边框自定义容器样式
@use "./Container/container-hyde.scss" as *; // container-hyde容器

最后记得在 docs\.vitepress\theme\index.ts 中引入 index.scss 文件

ts
import "./style/index.scss"; // 引入.vitepress\theme\style\index.scss全局样式

效果 ​

信息

这是一条 info，自定义格式：info+空格+自定义文字

提示

这是一个提示，自定义格式：tip+空格+自定义文字

警告

这是一条警告，自定义格式：warning+空格+自定义文字

危险

这是一个危险警告，自定义格式：danger+空格+自定义文字

点我查看

这是一条详情，自定义格式：details+空格+自定义文字

最近更新