博客建设笔记（3）MDx 主题

Published: at 12:11

昨天翻 GitHub 找到一个 Material Design 的主题，因为是 MD 所以看着很心动，于是赶紧装上试了一下（

经过半天的调整，总算是符合我的审美要求了，这里就记录一下整个主题更换过程吧（

ToC

黑幕

注：现在以及用上 KAAAsS 的黑幕插件了（

换了个主题首先要加上的是黑幕。但因为主题的影响，原来的 css 不能直接用，因此作了一些改动：

1
/* heimu */
2
.heimu,
3
.heimu a,
4
a .heimu {
5
  display: inline;
6
  background-color: #252525;
7
  color: #252525 !important;
8
  text-shadow: none;
9
}
10


11
.heimu:hover,
12
.heimu:active {
13
  transition: color 0.13s linear;
14
  color: #fff !important;
15
}
16


17
.heimu:hover a {
18
  transition: color 0.13s linear;
19
  color: #add8e6 !important;
20
}

这里和之前最大的区别就是加上了 !important，否则这个样式的优先级比主题的要低，会被主题的字体颜色顶掉（

正常显示的黑幕
正常显示的黑幕

字号

默认的字号普遍比我期望的大了一圈，遂改小之（

1
/* size */
2
#mdx-toc a {
3
  font-size: 14px;
4
}
5


6
.mdui-list-item {
7
  min-height: 40px;
8
}
9


10
.mdui-list-item:after {
11
  height: 40px;
12
}
13


14
.ct1-p {
15
  font-size: 16px;
16
}
17


18
h1 {
19
  font-size: 1.5em;
20
}

对齐

我个人是希望图片对齐是永远居中的，所以直接加 CSS 了（

1
/* align */
2
figcaption {
3
  text-align: center;
4
}
5


6
img {
7
  margin-left: auto;
8
  margin-right: auto;
9
}

默认居中了
默认居中了

黑夜模式

第一眼看到这个黑色就感觉太黑了，于是调亮了一点（

1
/* Dark mode */
2
.mdui-theme-layout-dark
3
  .mdui-appbar
4
  > [class*="mdui-color-"]:not(.mdui-color-transparent) {
5
  background-color: hsl(0, 0%, 14%) !important;
6
}
7


8
.mdui-theme-layout-dark .ArtMain0 {
9
  background-color: hsl(0, 0%, 20%);
10
}
11


12
.mdui-theme-layout-dark div.PostTitleFillBack2[class*="mdui-color-"],
13
.mdui-theme-layout-dark div.PostTitleFill[class*="mdui-color-"],
14
.mdui-theme-layout-dark div.PostTitle[class*="mdui-color-"] {
15
  background-color: hsl(0, 0%, 14%) !important;
16
}
17


18
.mdui-theme-layout-dark .spanout {
19
  background-color: hsl(0, 0%, 18%) !important;
20
}
21


22
.mdui-theme-layout-dark .timeInPost {
23
  background: linear-gradient(
24
    to right,
25
    rgba(41, 41, 41, 0) 0%,
26
    hsl(0, 0%, 16%) 5%,
27
    hsl(0, 0%, 18%) 100%
28
  );
29
}
30


31
.mdui-theme-layout-dark .page-footer-nav.mdui-color-theme.mdx-post-nav-clean,
32
.mdui-theme-layout-dark .page-footer-nav.mdui-color-theme.mdx-post-nav-clean * {
33
  background-color: hsl(0, 0%, 14%) !important;
34
}
35


36
.mdui-theme-layout-dark .foot {
37
  background-color: hsl(0, 0%, 14%);
38
}

以及这里用了 HSL，原样式用的是 #RRGGBB。

adminbar 遮挡

左侧的抽屉会被 #wpadminbar 挡住。这个 adminbar 还是有点用的，想要一键改文章的时候很方便，得想办法适配（

1
/* wp-adminbar */
2
body.customize-support .mdx-side-title {
3
  padding-top: 2pc;
4
}
5


6
body.customize-support .nightVision {
7
  top: calc(10px + 2pc);
8
}
9


10
@media screen and (max-width: 782px) {
11
  body.customize-support .mdx-side-title,
12
  body.customize-support .mdui-toolbar {
13
    margin-top: calc(-2pc + 46px);
14
  }
15


16
  body.customize-support .nightVision {
17
    top: calc(10px + 46px);
18
  }
19
}

现在就可以和谐共存了（笑）
现在就可以和谐共存了（笑）

抽屉宽度

宽屏模式下的抽屉也太窄了，于是加宽了一点（

1
/* sidebar */
2
@media (min-width: 1024px) {
3
  .mdui-drawer {
4
    width: 320px !important;
5
  }
6


7
  .mdui-drawer-close {
8
    -webkit-transform: translateX(-320px);
9
    transform: translateX(-320px);
10
  }
11


12
  .mdui-drawer {
13
    width: 320px !important;
14
  }
15


16
  .mdui-drawer-close.mdui-drawer-right {
17
    -webkit-transform: translateX(320px);
18
    transform: translateX(320px);
19
  }
20
}

主页图片

说是主页图片，其实改的是图片上面显示的字的相关内容。不透明的边框确实不大行，直接把后面的图片遮住了，观感很差。于是加了点透明度，看起来就好多了。

1
/* index-image */
2
@media screen and (min-width: 750px) and (orientation: landscape) {
3
  body.mdx-first-tworows .mdx-tworows-title > div {
4
    background-color: #fffb;
5
  }
6


7
  body.mdx-first-tworows.mdui-theme-layout-dark .mdx-tworows-title > div {
8
    background-color: hsla(0, 0%, 19%, 0.3);
9
  }
10
}

效果很好（笑）
效果很好（笑）

对于移动端而言，图片是单独显示的，不会有文字在上面悬浮，所以就不改了（

目录

目录是整个过程中最大的麻烦了。默认的目录只能显示到 h3，这对于这篇文章显然是不够的（笑）

所以首先是要让目录支持到 h6，于是我修改了 toc.js：

1
function getTitleListHtml(maxLevel = 6) {
2
  let titleList = $(
3
    [...Array(maxLevel).keys()].map(l => `article > h${l + 1}`).join(",")
4
  );
5
  if (titleList.length <= 1) {
6
    isToc = false;
7
    return false;
8
  }
9


10
  let finalHtml = "";
11
  let finalPreview = "";
12


13
  let counter = 0;
14
  let titles = [...Array(maxLevel)].map(l => 0);
15
  for (title of titleList) {
16
    title.dataset.mdxtoc = "mdx-toc-" + counter;
17
    titleArr.push("mdx-toc-" + counter);
18


19
    const level = Number($(title)[0].tagName[1]);
20
    titles[level - 1]++;
21
    titles.forEach((_, i) =>
22
      i >= level ? (titles[i] = 0) : titles[i] === 0 && (titles[i] = 1)
23
    );
24
    finalHtml += `${titles.filter((_, i) => i > 0 && i < level).join(".")}${$(title).text()}`;
25
    finalPreview += ``;
26
    counter++;
27
  }
28
  return [finalHtml + "", finalPreview];
29
}

这个修改将目录等级支持增加到了任意级，并且省略了 h1。省略 h1 是我个人需求，因为我文章中不可能出现 h1（事实上也不应该出现，h1 本来的语义就是一篇文章只有一个，代表全文的标题）。对应的没有省略 h1 的代码已经丢到原仓库的 [issue](https://github.com/yrccondor/mdx/issues/113) 了（

之后，我们就要规定左侧的 padding 了，这里方便起见每级 +10了（

1
/* toc */
2
.mdx-toc-item-h2 {
3
  padding-left: 10px;
4
}
5


6
.mdx-toc-item-h3 {
7
  padding-left: 20px;
8
}
9


10
.mdx-toc-item-h4 {
11
  padding-left: 30px;
12
}
13


14
.mdx-toc-item-h5 {
15
  padding-left: 40px;
16
}
17


18
.mdx-toc-item-h6 {
19
  padding-left: 50px;
20
}

最后效果是这样的：

目录效果
目录效果