hexo-theme-reimu 博客主题定制与修改

该文章介绍hexo-theme-reimu博客主题一些深度定制方法，随时更新。

原项目地址

修改博客时钟样式

新建source\css\custom.styl, 添加如下代码:

.article-meta
  display: inline-block;
  margin-top: -1.25em;

.article-date 
  display: inline-block;
  overflow: hidden; 

.date-circle
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background-color: var(--red-5);
  border-radius: 50%; 
  font-size: 2em;
  margin-bottom: 0em;
  margin-top: -10%;


.date-wrapper 
  display: flex;
  flex-direction: column;
  align-items: center;

.date-year, .date-day 
  color: var(--red-1);
  display: block;
  line-height: 1; /* 垂直居中 */

.date-year 
  font-size: 1.1em; /* 年份字体大小 */
  margin-bottom: 0.2em; /* 调整年份和日期之间的间距 */

.date-day 
  font-size: 0.8em; /* 日期字体大小 */

在 source/css/style.styl 结尾引入新建的css样式:

@import "custom"

整体修改layout\_partial\post\date.ejs为：

<div class="article-date">
  <div class="date-circle">
    <div class="date-wrapper">
      <time class="date-year" datetime="<%= date_xml(post.date) %>"><%= date(post.date, 'YYYY') %></time>
      <time class="date-day" datetime="<%= date_xml(post.date) %>"><%= date(post.date, 'MM-DD') %></time>
    </div>
  </div>
</div>

顶部和侧边导航栏修改

菜单栏实现半透明毛玻璃效果

修改source\css\custom.styl, 结尾添加如下代码:

#header-nav
  backdrop-filter: blur(10px); /* 毛玻璃效果 */
  -webkit-backdrop-filter: blur(10px); /* 兼容 WebKit 浏览器 */
  padding: 10px; /* 可选：添加内边距 */

同时要把header颜色改为半透明,在source/css/_variables.styl中修改两个变量（分别为light mode和dark mode）：

--color-header-background: rgba(255, 255, 255, 0.7);
--color-header-background: rgba(34, 34, 34, 0.6); /* DARK MODE*/

同时需要修改样式文件,在source\css\custom.styl结尾添加：

.sidebar-menu-link-wrap
  margin: 8px 50px
  display: flex
  position: relative
  justify-content: center
  border: 10px var(--color-red-3-shadow) 
  transition: border .5s

  &:hover
    border: 10px var(--color-h2-after) 

  &:hover .sidebar-menu-icon:before
    transform: scale(1.1)



.link-active
  background: var(--red-0)
  border: 10px var(--color-wrap) 
  box-shadow: 0 0 10px 3px var(--color-red-6-shadow)
  opacity: 0.8
  border-radius: 10px; /* 添加圆角 */

Markdown 公式渲染不支持编号和对齐和引用的问题：

在 layout/_partial/head.ejs 结尾"<\head>"标签前添加如下源代码:
(新版本已经修复)

  <!-- 引入Mathjax CDN -->
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<!-- 可选：自定义Mathjax配置 -->
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
      TeX: {
          equationNumbers: {
              autoNumber: "AMS",
              useLabelIds: true
          }
      },
      tex2jax: {
          inlineMath: [['$','$'], ['\\(','\\)']],
          displayMath: [['$$','$$'], ['\\[','\\]']],
          processEscapes: true,
          processEnvironments: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
      },
      CommonHTML: {
          linebreaks: { automatic: true }
      },
      messageStyle: "none",
      MathMenu: { showLocale: false, showRenderer: false }
  });
</script>

颜色配置与圆角效果

在source\css\_variables.styl中添加颜色, 方便后续修改引用normal(light)模式添加:
(新版本已经修复)

--black-white: #000000
--head-color: rgba(255, 255, 255, 0.8)

dark模式添加:

--black-white: #ffffff
--head-color: rgba(0, 0, 0, 0.5)

若需要添加圆角效果, 则修改文件中的"post-radius"变量：

post-radius = 15px