Hexo-Fluid 博客美化和修改

基于 Hexo-Theme-Fluid 博客主题的简单美化和修改，效果参见本博客自身。

前置说明

适用版本：

• Hexo v6.2.0
• Fluid v1.9.0

下面所描述的样式代码使用 stylus 格式，请自行在 source/css 目录下新建 <fileName>.styl 文件，并在主题配置的 custom_css 添加文件路径（不带文件扩展名）。

比如新建了 source/css/test.styl 文件，那就要在主题配置的 custom_css 添加 /css/test：

custom_css:
  - /css/test

滚动条

::-webkit-scrollbar {
  width: 10px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #a6a6a6;
  border-radius: 1rem;
  min-height: 60px;

  &:hover {
    background-color: #757575;
  }

  &:active {
    background-color: #424242;
  }
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

[data-user-color-scheme='dark'] {
  ::-webkit-scrollbar-thumb {
    background-color: #687582;

    &:hover {
      background-color: #9da8b3;
    }

    &:active {
      background-color: #c5d0db;
    }
  }
}

代码块的复制按钮

.copy-btn {
  font-size: 1rem;
  color: darkslategrey;

  > i {
    font-size: 1rem !important;
    font-weight: bold;
  }
}

[data-user-color-scheme='dark'] {
  .copy-btn {
    color: #c4c6c9;
    transition: color 0.2s ease-in-out;
  }
}

圆角

包括对如下内容设置圆角：

• 分类和归档页面内的文章列表
• 友链页面的卡片
• 菜单栏的按钮
• 页面背景板
• 返回顶部按钮

// 分类页
.category {
  .row {
    border-radius: 1rem;
  }

  .category-item {
    border-radius: 1rem;
  }

  .category-post-list {
    border-radius: 1rem;
  }
}

// 归档页
.list-group {
  border-radius: 1rem;
}

// 分类和归档页共同
.list-group-item {
  border-radius: 1rem;
}

// 友链页
.links .card-body {
  border-radius: 1rem;
}

// 菜单栏
.navbar {
  .nav-item .nav-link {
    border-radius: 0.5rem;
  }

  .dropdown-menu {
    border-radius: 0.5rem;
  }

  .dropdown-item {
    border-radius: 0.25rem;
  }
}

// 页面背景板
#board {
  border-radius: 1rem;
}

// 返回顶部按钮
#scroll-top-button {
  border-radius: 0.5rem;
}

Waline 评论

适用版本：Waline v2

#waline {
  // 调整输入框左侧标签的大小，位置，文字
  label {
    min-width: 1.75rem;
    font-size: 0.875rem;
    font-weight: bold;
  }

  // 调整输入框文字大小
  input {
    font-size: 0.875rem;
  }

  // 将右下角的“计数，登录，提交”的伸缩属性设为自动，减少计数的换行
  .wl-info {
    flex: auto;
  }

  .wl-card {
    // 调整 UA 标记的圆角和间距
    .wl-meta>span {
      border-radius: 0.25rem;
      margin-right: 0.25rem;
    }

    // 调整博主名称标记的大小
    .wl-badge {
      line-height: normal;
      padding: 0 0.25rem;
    }
  }
}

网站运行时间

在主题配置中的 footer: content 添加：

footer:
  # 前三行是 Fluid 原有的页脚内容，后面的是新增的内容
  content: |
    <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
    <i class="iconfont icon-love"></i>
    <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>
    <div style="font-size: 0.85rem">
      <span id="website-duration">载入网站运行时间...</span>
      <script src="/js/duration.js"></script>
    </div>

duration.js 包含的是功能代码，在博客目录下创建 source/js/duration.js，内容如下：

!(function () {
  // 前面补零
  function prefixInteger(num, n) {
    return (Array(n).join(0) + num).slice(-n);
  }

  // 计时起始时间，仿照格式自行修改
  var start = Date.parse("2021-07-10T16:03:05");

  function update() {
    var now = Date.now() + 250;
    var interval = (now - start) / 1000;
    var days = Math.floor(interval / 60 / 60 / 24);
    var hours = Math.floor((interval / 60 / 60) % 24);
    var minutes = Math.floor((interval / 60) % 60);
    var seconds = Math.floor(interval % 60);

    hours = prefixInteger(hours, 2);
    minutes = prefixInteger(minutes, 2);
    seconds = prefixInteger(seconds, 2);

    document.getElementById(
      "website-duration"
    ).innerHTML = `本站已运行 ${days} 天 ${hours} 小时 ${minutes} 分 ${seconds} 秒`;
  }

  update();
  setInterval(update, 250);
})();

已过时

代码块的首列固定

此内容已过时。Hexo-Theme-Fluid 自 v1.8.14 起添加了此功能。

figure.highlight {
  td:first-child {
      position: sticky;
      left: 0;
      z-index: 1;
  }
}

目录标题前的光标

此内容已过时，Hexo-Theme-Fluid 自 v1.8.14 起添加了此功能。

关于目录标题前的光标的详细描述可以参见“Hexo-Fluid 在目录的标题前增加光标”。

// 光标依赖位置
.toc-body > ol {
  position: absolute;
}

// 当前标题前的光标
.toc-list-item {
  // 初始状态
  &::before {
    content: '';
    position: absolute;
    left: 0.25rem;
    height: 0.25rem;
    margin: 0.625rem 0;
    width: 0.25rem;
    border-radius: 0.125rem;
    background: black;
    visibility: hidden;
    transition: height 0.2s ease-in-out, margin 0.2s ease-in-out, visibility 0.2s ease-in-out;
  }

  // 激活状态
  &.is-active-li::before {
    height: 1rem;
    margin: 0.25rem 0;
    visibility: visible;
  }
}

[data-user-color-scheme='dark'] {
  .tocbot-active-link {
    color: orange;
  }

  .toc-list-item {
    &::before {
      background: orange;
      transition: background 0.2s ease-in-out;
    }
  }
}

参考

• Hexo Theme Fluid
  • Fluid 页脚增加网站运行时长