PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

前言

新年快到了，在新的一年里，让你和你的文章都换上新装吧！在掘金里，有很多用于 美化文章的主题样式 ，如下图：

像我现在使用的就是 chinese red 这个主题，如果想要定制一个属于自己的主题要怎么做呢？既然新年快到了，那我就实现一个 中国春节主题 的主题样式，让文章也能有 年味~

主题效果

在开始前大家先看看我实现的效果吧~

怎么样，是不是 年味满满 呢~下面讲一下掘金的主题要如何定制。

主题定制

创建仓库

想要自制一个主题其实很简单，在掘金主题github仓库中，按照官方指引创建一个仓库，并将代码拉取到本地编辑即可。

其实markdown中的各种语法最终都是转换成 html对应的标签 的，所以想要定制主题只需要会 css 就可以上手啦。

在编辑主题时，我们使用的时 scss 进行编辑的，如果想要预览效果需要转换成 css。当然，官方也提供了一个用于预览测试页面的工具,执行下面这个命令就可以即时预览我们修改的 scss 文件样式啦！

cd <yourThemeProject>
npx juejin-theme-devtool <yourStyleFile>

当然你要是觉得这行命令不方便记，你也可以写到 package.json 里，新增一个命令即可

"scripts": {
    "dev":"npx juejin-theme-devtool juejin.scss"
  }

之后只需要使用 npm run dev 就能启动预览了

主题核心

在 juejin.scss 文件中为我们编辑好了默认样式，我们要做的就是基于这个文件的基础进行一个改造，那么我这一次的新年主题有以下两个核心要点：

一. 要有浓重的 中国元素和新年元素，主题色为 金色和红色

二. 在风格明显的同时不能 影响文章信息的传达，整体不能过于突兀，要清晰简洁

围绕上面的两点，我开始了 新年主题定制

主题实现

整体框架

因为我要的主题色是 金色和红色 ，但是颜色范围太大了，要怎么定一个好看的颜色呢？这里我用的是中国色这个网站中提供的配色，这个网站里全部都是中国风的配色，刚好适合我的主题。

红色配色：

浅红色配色：

金色配色：

在scss中我们可以创建变量，这样可以帮助我们的样式风格进行一个统一。

在这里我创建了两个变量，红色和浅红色，那么金色在哪里呢？金色我使用的是原生css中的 gold ，因此就不需要单独创建一个变量了。

$red: #c02c38;
$red-light: #e3b4b880;
$gold:#ffa60f;

背景纹理

变量创建好了，我想先改变一下整体 背景的纹理 ,因为是中国风格主题，因此我使用了一个 类似祥云的纹理，我将图片转换为 base64 格式后在样式中定义一个 $texture-cloud 变量，然后在最外层容器中作为背景图片

实现代码如下：

$texture-cloud: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGcAAAAXCAMAAAAhvaEKAAAAM1BMVEUAAAAjIyMjIyMAAAAPDw8PDw8kJCQAAAAAAAAkJCQAAAAAAAA7OztAQEBHR0cxMTExMTFSK924AAAAEXRSTlMAFgAGEQAVAgsADwceICQaAKU/Wn8AAAIzSURBVHgBjZXhbuM4DIRJc0LNUkm77/+exaLApreIRdusLjH6/bAAmdSQozCWA10eGC4PdFnJBd7kOQ24rGgrh9Dkgf/aEZKAs22bYxnhEfIAuAwMoRxooIvU1xzLyMeu2hEepHDs2LWXesbT16p6FhAestKZCtx2nCXXS7ntxtI6GY5bPzqt1mFEQkGnkz216OGkjtBeXSjPdnVqkKQcdPhIg82d6Ztn3xPUt4xYXw9VDGk45RUdaNZ3GcOaEU1OCO+PJ3c/jJImn9HfucmgH7+nU+Amhs3sfg35EcBaF8zU5GeY9r4K+YsZIEml06QCXRbopEIAzgE8MNnvV1wuc/sEQoNU2eCXXD6K0r3/uctGuy/4vMtEs79f/5Xd64eo7KiK3z/lCfX6nIcn7iavMCBfjllLuqLJGeGWCcnYOMP8MGuU5/8XIWlTmpp3SdLvg84VqdSwpuaUiYxvxBiC5P13UlVawHkEdSrqXFGX5P3YtYBzVu3ZrW2HH6lLdzxzr6GUh5ABuF12e+l0CLbMXSX9f0GoSaJNJCuldjnlllkRuyEm5+SFlKR2e9JJIxWRh6F9L43lW0UH9v9roF63czIh10YNJznPTszhbR8TN5mxcj3apnW+1ELPdi2b2KsEzr7bA2bSdvY15vnpkmSIZerWlLOaPCi6Xe1bK0wB1JnLZAdFrFcZZpzzcCnK/MThpGVFEfUA4zorwfm7k6/HAvs2FKZPrGv7dKdplstICj2s+wdYtietbSOnTgAAAABJRU5ErkJggg==";

.main-area{
  background-image: url($texture-cloud);
  background-position: center center;
  font-family: -apple-system,system-ui,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
  word-break: break-word;
  line-height: 1.75;
  font-weight: 400;
  overflow-x: hidden;
  font-size: 17px;
}

实现的效果：

标题设计

标题我的想法是 h1,h2,h3 这三个使用频率高的标签各有各的风格。标题的字体我使用的都是 兼容性比较好并且比较有中国味儿 的楷体。

标签的统一样式如下：

h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    position: relative;
    margin-top: 25px;
    margin-bottom: 10px;
    margin: 25px 5px 10px 5px;
    font-family: KaiTi;
  }

首先说说 h1 的样式，这个标签的特点是大，一般在一个大章节的开头，因此我将它设计为春联的样式，有一种贴在大门口，欢迎你进来的感觉。

这个春联有几个特点，其次配色就是前面设置的 红色加金色，背景我换了一种纹理以突出与背景的区别。通过金色边框元素点缀增加一点精致感。纹理使用的是 base64的图片，而边框是通过 伪元素 实现的。

实现的代码如下：

h1 {
    font-size: 30px;
    padding: 5px 10px;
    background-color: $red;
    background-image: url($texture-cricle);
    box-shadow: $shadow;
    color: $gold;
    text-shadow: 0px 0px 2px #000;
    text-align: center;
    &::after,&::before{
      content: '';
      position: absolute;
      width: 20px;
      height: calc(100% - 12px);
      z-index: 10;
      border-top: 3px solid $gold;
      border-bottom: 3px solid $gold;
    }
    &::before {
      top: 3px;
      left: 3px;
      border-left: 3px solid $gold;
    }
    &::after {
      right: 3px;
      bottom: 3px; 
      border-right: 3px solid $gold;
    }
  }

h2 的样式是在字体前加一个福字。h3 的样式是加一个小狮子。

这两个比较简单，都是通过 伪元素加图片，图片是定义成 base64字符串变量 使用的，实现代码如下：

h2 {
    display: flex;
    align-items: center;
    font-size: 27px;
    &::before {
      content: "";
      display: block;
      margin-right: 8px;
      width: 40px;
      height: 40px;
      background-image: url($img-fu);
      background-size: 40px 40px;
    }
  }
  h3 {
    display: flex;
    align-items: center;
    font-size: 23px;
    &::before {
      content: "";
      display: block;
      margin-right: 8px;
      width: 25px;
      height: 25px;
      background-image: url($img-chun);
      background-size: 25px 25px;
    }
    
  }

引用内容

下面讲讲 引用内容 的样式，引用内容 我使用了浅红色作为背景，红色作为字体，左侧有一条金色的边突出单独一个模块的感觉。

列表样式

无序列表比较简单，为了让列表清晰，我只是修改了一下小圆点的颜色，整体还是保留原有的风格。

如下图：

li::marker 这个伪类对应的就是前面那个小圆点的样式，实现的代码如下：

ul {
    li::marker {
      color: $red;
    }
  }

无序列表我将前面的数字改为了 楷体中文 ，并且也设置为红色，如下图:

list-style-type: cjk-ideographic 可以用于修改有序列表前面的数字类型，实现的代码如下：

ol{
    li{
      list-style-type: cjk-ideographic;
      &::marker{
        font-family: KaiTi;
        font-weight: bold;
        color: $red;
      }
    }
  }

链接

链接的样式就是 红色的字体，并且通过伪元素在链接前面默认增加 # 字符便于区分。除此以外，我还添加了鼠标悬浮效果，当鼠标滑过时会将链接改为 红色背景和金色字体。

效果如下：

实现代码如下：

a {
    text-decoration: none;
    color: $red;
    transition: all 0.3s;
    padding: 0 2px;
    &:hover,
    &:active {
      color: $gold;
      background-color: $red;
    }
    &::before {
      content: "# ";
    }
  }

代码块

代码是一个文章中传达信息的重要途经，因此我只做了简单的一些样式，背景改为浅红，左侧添加红色边框突出模块感。在 鼠标悬浮时有一点点上飘 的效果

其他样式

上面就是一些比较显著的修改，除此以外，关于整体的一些 边距，行高，字号 都做了一定的修改，并且我还为加粗和行内代码 设置了默认左右边距，这样可以大大减少写文章时 频繁增加括号 提升美观度的烦恼。以上的修改都是为了整体内容的直观清爽做的优化，毕竟文章最主要的目的还是用来 传达信息 的嘛~

总结

目前这套主题已经提交掘金主题仓库 pr 等待审核啦，期待能早日和大家见面！

在设计主题的时候，看着预览的样式一步一步变得更加鲜艳更加精致，年味越来越浓，还是很有成就感的！

祝大家 🧨新春快乐，🐯新的一年虎虎生威！ 如果觉得文章写的不错可以点个赞噢

🧧新年换新装！让每篇年味满满的文章陪你过春节~

前言