博客主题

主题

博客基于 hexo-theme-matery 项目，做如下修改：

• 候补字体

• 表格样式

• 脚页信息

• 图片轮播

样式表

文件目录： hexo-theme-matery\source\css\my.css

/* Here is your custom css styles. */
@font-face {
    font-family: zgFont;
    src: url("/font/98WB-0.woff2") format("opentype");
}

/* 表格居中 */

td,
th {
    padding: 15px 5px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-radius: 0
}

#articleContent table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    overflow: auto;
}

/* 字体重定义 */

html {
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, zgFont;
    font-weight: normal;
    color: rgba(0, 0, 0, .87)
}

pre {
    font-family: monospace, monospace, zgFont;
    font-size: 1em
}

code,
kbd,
samp {
    font-family: monospace, monospace, zgFont;
    font-size: 1em
}

button,
input,
optgroup,
select,
textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, zgFont;
}

code {
    padding: 1px 5px;
    top: 13px !important;
    font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace, zgFont;
    font-size: 0.91rem;
    color: #e96900;
    background-color: #f8f8f8;
    border-radius: 2px;
}

.code_lang {
    position: absolute;
    top: 1.2rem;
    right: 46px;
    line-height: 0;
    font-weight: bold;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace, zgFont;
    z-index: 1;
    filter: invert(50%);
    cursor: pointer;
}

kbd {
    margin: 0 3px;
    padding: 3px 5px;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 2px 1px 0 rgba(255, 255, 255, 0.6) inset;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace, zgFont;
    font-size: 0.9rem;
    font-weight: 600;
    background-color: #f8f8f8;
    color: #34495e;
    line-height: 1.8rem;
    white-space: nowrap;
}

/* 主题色 */

.bg-color {
    background-image: linear-gradient(to right, #7730bf 0%, #0f559d 100%);
}

.text-color {
    color: #0f559d !important;
}

.progress-bar {
    height: 4px;
    position: fixed;
    bottom: 0;
    z-index: 300;
    background: linear-gradient(to right, #7730bf 0%, #0f559d 100%);
    opacity: 0.8;
}

.chip-container .chip:hover {
    color: #fff;
    background: linear-gradient(to right, #7730bf 0%, #0f559d 100%) !important;
}

#cd-timeline::before {
    /* this is the vertical line */
    content: '';
    position: absolute;
    top: 0;
    left: 18px;
    height: 100%;
    width: 4px;
    background: #0f559d;
}

#aboutme .social-link a {
    display: inline-block;
    width: 2.3rem;
    height: 2.3rem;
    line-height: 2.2rem;
    margin: 0 0.5rem;
    padding: 0;
    color: #fff;
    border: 1px solid #0f559d;
    background: radial-gradient(#7730bf, #0f559d);
    font-size: 0.9rem;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(50, 50, 93, .21), 0 2px 3px rgba(0, 0, 0, .1);
}

.other-skills .chip:hover {
    color: #fff;
    background: linear-gradient(to right, #7730bf 0%, #0f559d 100%);
    border: 1px solid #7730bf;
    box-shadow: 0 5px 5px rgba(0, 0, 0, .25)
}

gitalk

文件目录： hexo-theme-matery\source\libs\gitalk\gitalk.css

下，所有 font-family: 与 font: 都追加 zgFont。

脚页

<a href="<%- url_for('/about') %>" target="_blank"><%- config.author %></a>
| Powered by <a href="https://wb98.gitee.io/" target="_blank">98五笔小组</a>
| Group <a href="https://qm.qq.com/cgi-bin/qm/qr?k=aPeoXNGOwq0_AuBvpDlnvElmApQ1NmU_&jump_from=webapi&authKey=W43c5yu88n6kd0dwFzCWtzouGd5DxyPyZoekuji2Dye45jOIR4DfDrvf2NUgahvR" target="_blank">QQ群③：673853592</a>

切图

使用 new Date().getMinutes() + '.jpg' ，修改为每分钟切换一张图片

<script>
    <% if (theme.banner.enable && theme.banner.random) { %>
      var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/featureimages/') %>" + Math.floor(Math.random() * <%- theme.featureImages.length %>) + '.jpg';
    <% } else { %>
      // 每天切换 banner 图.  Switch banner image every day.
      var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/banner/') %>" + new Date().getMinutes() + '.jpg';
    <% } %>
    $('.bg-cover.about-cover').css('background-image', 'url(' + bannerUrl + ')');

</script>

代码高亮

参数定义

根目录 _config.yml 添加定义

syntax_highlighter: prismjs
highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: true
  preprocess: true
  line_number: true
  tab_replace: ''

文件配合

目录 hexo-theme-matery\source\libs\prism 下。

从 prism官网 下载最新的 js 与 css 文件，并勾选恰当的特性，重命名为：

• prism.min.css
• prism.min.js

当前采用的配色方案是 TOMORROW NIGHT 。