我的 CorePress 主题装饰

Guangran

2022-8-5

CorePress

前言

我使用的主题是果核开发的CorePress Pro 主题，主题本身颜值就是比较高的，我针对主题做了点点简单的装饰。

首页幻灯片

首页幻灯片功能主题自带，只需要准备好看的图片就可以了，怎么设置可以参考主题的使用文档。我添加的图是节日类的图片，因为是个人博客，没有多少需要宣传的东西，如果你也是这样可以看看我的这个文章：

节日 banner 图

每逢节日，使用与节日相对应的 banner 图片装饰一下网站还是不错的，这里提供两个链接，可以放置在网站 banner 图片的位置，节日前两到三天会自动更新与之对应的风格 banner 图。

图片来源于《创客贴》，如果是企业站就不建议使用了，可能有版权风险。

右侧作者信息

这个使用的是主题自带的小工具“CorePress个人信息模块”，这个小工具只有 Pro 版本才有，小工具的【联系方式】处是允许自定义的，所以这块内容我用的是自定义的代码。

代码，直接将代码放入个人信息小工具中【联系方式】内即可。

<div class="block" data-fx="1">
  <a
    class="block__title"
    href="Mailto:gr@rsecc.cn"
    title="gr@rsecc.cn"
    target="_blank"
    ><span class="author-email"
      ><i class="fas fa-envelope-square"></i>邮箱</span
    ></a
  >
  <a class="block__title" data-img="https://images.rsecc.cn/202208051849754.png"
    ><span class="author-weixin"><i class="fab fa-weixin"></i>微信</span></a
  >
</div>

CSS，CSS 代码直接放到主题设置中的【插入代码】-【自定义CSS】位置就可以了。

.block {
    text-align:center;
    padding:15px 20px;
}
.block__title {
    font-size:1rem;
    cursor:pointer;
    color:var(--color-blocktitle);
}
.hover-reveal {
    z-index:100;
    position:fixed;
    width:200px;
    height:200px;
    pointer-events:none;
    opacity:0;
}
.hover-reveal__inner,.hover-reveal__img {
    width:100%;
    height:100%;
    position:relative;
}
.block span {
    margin:0 5px 0 5px;
    border-radius:3px;
    display:inline-block;
}
.block .author-email {
    background-color:#248888;
}
.block .author-weixin {
    background-color:#07C160;
}
.block span:hover {
    background-color:#009966;
}
.block a {
    padding:4px;
    font-size:14px;
    color:#fff;
}
.block a i {
    padding:2px 15px 3px 15px;
}

JS，将以下 JS 代码下载上传至站点，并在主题【插入代码】-【页脚代码】处引用。

https://api.rsecc.cn/js/TweenMax.min.js
https://api.rsecc.cn/js/demo.js

右侧欢迎来到模块

这里我使用的是《IMGAPI》的“IP签名档生成”使用文档，然后在后台小工具的地方新增一个“CorePress图片卡片”小工具，填写API地址就可以了。

主题模仿Mac样式

这个我直接用的果核写的，可以直接查看这篇文章《CorePress主题模仿Mac样式》，我进行了微调，修改了右侧边栏上两个点的颜色。

“关于我”中的时间轴

这个是从其他地方找到的代码，具体出处不太记得了，关于这里的代码也挺多的。

代码，编写文章或者新建页面的时候直接放到内容里就可以了。

<div id="timeaxis">
    <ol>
        <li>
             <b>2021年12月</b> 微信公众号和小程序开通
        </li>
        <li>
            <b>2021年07月</b> 全站支持 IPv4 + IPv6 双栈访问
        </li>
        <li>
            <b>2021年01月</b> 完成网安备案
        </li>
        <li>
            <b>2020年11月</b> CMS 从 Typecho 切换为 WordPress
        </li>
        <li>
            <b>2019年08月</b> 完成 ICP 备案，网站重新开放
        </li>
        <li>
            <b>2019年07月</b> 站点上云（阿里云 ECS）
         </li>
    </ol>
</div>

CSS，CSS 代码直接放到主题设置中的【插入代码】-【自定义CSS】位置就行。

/*站点时间轴*/
#timeaxis ol {
    list-style:none;
    margin-left:0px;
    padding-left:14px;
    border-left:2px solid #eee;
    font-size:16px;
}
#timeaxis b {
    font-size:12px;
    font-weight:normal;
    display:block;
    position:relative;
    margin-bottom:5px;
}
#timeaxis b::after {
    position:absolute;
    top:6px;
    left:-24px;
    content:'';
    width:14px;
    height:14px;
    border-radius:50%;
    background-color:#fff;
    border:2px solid #ccc
}
#timeaxis li {
    list-style:none;
    margin:0 0 18px 0;
    line-height:100%;
}
#timeaxis li:hover {
    color:#409EFF;
}
#timeaxis li:hover b::after {
    border-color:#248888;
}
#timeaxis li:hover b {
    color:#248888;
}