菜单
菜单
文章目录
  1. 首页定制与美化
    1. 首页背景
    2. 天气插件
    3. 导航图标
    4. 今日诗词和备案号
  2. 文章定制与美化
    1. 字数与阅读时长统计
    2. 代码块复制功能
    3. 分隔符hr美化
    4. 有序标签美化
    5. Note标签美化
    6. 文章表格美化
    7. 文章图片放大功能
    8. 文末版权声明
  3. 全局定制与美化
    1. 全局字体修改
    2. 适配并支持PWA
    3. 关键词优化
    4. 页面点击小爱心
    5. 页面点击小烟花
    6. 滚动条与选中文本美化
    7. 页面预加载
    8. 深色模式
  4. 结束语

对本站做的定制与美化

 2020.12.15  Senorui   烟岚云岫  字数 3.4k  耗时 17分  热度 ℃

有些美化内容可能已经发过文章，此处算是对本站本主题做的一个定制与美化集合吧！

要对本主题 【Fexo】 进行定制与美化，首先要先 自定义CSS 文件 personal.css 放在博客的 source 文件夹下。

由于我的对CSS改动较多，除了深色模式样式外其余全部写入了主题的 styles.css 文件中。

首页定制与美化

首页在原主题上新增了 背景图、天气插件、导航图标 以及底部的 今日诗词 和 备案号。

首页背景

给首页设置背景很简单，只需要定义一个样式即可。

在 personal.css 新增：

html.page-home {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url(https://api.senorui.top/ACG/); /* 背景图地址 */
    background-color: transparent;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

天气插件

首页天气插件，此处看个人喜好定制，不过在首页显示一下天气还是挺好的。

在 中国天气插件网 注册一个账号，在自定义插件处创建一个网页简约插件，设置所需样式后点击生成代码即可。

将生成的代码放到home.ejs的任意位置。

<div class="content-home-mywth">
<div id="weather-v2-plugin-simple"></div>
<script>
WIDGET = {
  CONFIG: {
    "modules": "10234",
    "background": 5,
    "tmpColor": "4A4A4A",       /* 气温字体颜色 */
    "tmpSize": "16",            /* 气温字体大小 */
    "cityColor": "4A4A4A",      /* 城市字体颜色 */
    "citySize": "16",           /* 城市字体大小 */
    "aqiSize": 16,              /* 空气质量字体大小 */
    "weatherIconSize": "24",    /* 天气图标大小 */
    "alertIconSize": 18,        /* 预警图标大小 */
    "padding": "10px 10px 10px 10px",
    "shadow": "1",              /* 1和0是有无阴影 */
    "language": "auto",
    "borderRadius": "10",       /* padding圆角 */
    "fixed": "false",
    "vertical": "middle",
    "horizontal": "center",
    "key": "X5BO9VyRpP"         /* 插件Key值 */
  }
}
</script>
<script src="https://apip.weatherdt.com/simple/static/js/weather-simple-common.js?v=2.0"></script>
</div>

在 personal.css 配置css代码：

.content-home-mywth {
    position: absolute;
    left: 20px;
    top: 15px;
    font-size: 12px;
    height: 20px;
    width: 22px;
    line-height: 20px;
    cursor: pointer;
    z-index: 100000; 
}

导航图标

首先引入Fortawesome CSS并在home.ejs中15行后加一行代码

具体修改后的代码如下，并引入fortawesome图标。

  <ul class="text-center nav">
    <% theme.home_nav.forEach(function(item, i){ %>
+     <i class="<%= item.icon%>" aria-hidden="true"></i>
      <li class="item">
        <% if(item.target_blank === true) { %>
          <a href="<%= item.url %>" rel="noopener noreferrer"><%= item.name %></a>
        <% } else { %>
          <a href="<%= item.url %>"><%= item.name %></a>
        <% } %>
        <span>|</span>
      </li>
    <% }) %>
  </ul>
  <!-- fortawesome CSS -->
  <link type="text/css" rel="preload stylesheet" as="style" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.css">

然后在主题配置文件中引入图标即可

home_nav:
  - name: 文档
    icon: fa fa-home    #首页导航的图标
    url: /archives/
    target_blank: false #不在新页面打开

今日诗词和备案号

博主在网站没有备案之前就觉得本主题首页有点点空旷，于是就在底部加了各今日诗词和Copyright symbol，备案后又加了备案号。

具体还是在home.ejs末尾加代码即可。

<div class="jinrishici-footer">
  <script type="text/javascript" aysnc src="https://sdk.jinrishici.com/v2/browser/jinrishici.js"></script>
  <a id="jinrishici-sentence">...加载中...</a>
</div>
<div class="gabeian-footer" >
  <a style="color:#00e666" href="https://4m.cn/U6Xy9" rel="external nofollow noopener noreferrer" target="_blank">滇公网安备530xxxxxxxx号</a>
</div>
<div class="beian-footer" >
  <a style="color:#555"> © 2018-2020 <%= config.author %>
   | 
  <a style="color:#555" href="https://beian.miit.gov.cn/" rel="external nofollow noopener noreferrer" target="_blank">滇ICP备xxxxx号</a>
</div>

其样式如下

.jinrishici-footer, .gabeian-footer, .beian-footer {
    position:absolute;
    left: 50%;
    font-size: 10px;
    transform: translateX(-50%);
}
.jinrishici-footer {
    bottom: 36px
}
.gabeian-footer {
    bottom: 20px
}
.beian-footer {
    bottom: 4px
}

文章定制与美化

文章的定制与美化涉及到 文章字数统计、阅读时长统计、代码复制功能、分隔符hr、有序标签和note标签美化、文章表格美化 和 文末版权声明。

首先在主题的article.ejs中的引入定制与美化必要的文件，详见各美化。

字数与阅读时长统计

此功能依赖插件hexo-wordcount

插件地址: https://github.com/willin/hexo-wordcount

安装：

yarn add hexo-wordcount

然后在主题的article.ejs中的

<%- partial('component/category') %>

之后和卜蒜子热度代码之前插入以下代码

+    <span class="post-count">
+       <span>
+          <i class="fa fa-file-word"></i>
+          &nbsp字数 <%= wordcount(post.content) %>
+       </span>
+
+     <span class="post-count">
+       <span>
+          <i class="fa fa-clock"></i>
+          &nbsp耗时 <%= min2read(post.content) %>分</span>
+     </span>

      <% if (theme.busuanzi){ %>
      <i class="fa fa-eye"></i> 
        <span>
           &nbsp热度 <span id="busuanzi_value_page_pv">
           <i class="fa fa-spinner fa-spin"></i></span>℃
        </span>
      <% } %>

然后在</article>之前引入fortawesome CSS

<link type="text/css" rel="preload stylesheet" as="style" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.css">
<link type='text/css' rel="preload stylesheet" as="style" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>

PS：为meta图标统一，以上两个css都需要引入。

代码块复制功能

此代码块复制功能依赖Clipboard，且只适配@1.7.1之前的版本，更高版本我的小站点击按钮无法复制。

同样在在</article>之前引入

<!-- 代码块复制功能 -->
<script type="text/javascript" defer src="https://cdn.jsdelivr.net/npm/clipboard@1.7.1/dist/clipboard.js" ></script>
<script type="text/javascript" defer src="/js/clipboard_use.js"></script>

同时新建clipboard_use.js文件

!function (e, t, a) {
var initCopyCode = function(){
    var copyHtml = '';
    copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
    copyHtml += '<i class="fa fa-copy"></i><span>复制</span>';
    copyHtml += '</button>';
    $(".highlight .code").before(copyHtml);
    new Clipboard('.btn-copy', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });
}
initCopyCode();
}(window, document);

代码块复制按钮样式如下

.highlight {
    position: relative;
}

.btn-copy {
    position: absolute;
    top: 5px;
    right: 5px;
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    background-color: #eee;
    background-image: linear-gradient(#fcfcfc,#eee);
    color: #333;
    font-weight: 700;
    font-size: 10px;
    line-height: 16px;
    opacity: 0;
    cursor: pointer;
    -webkit-transition: opacity .7s ease-in-out;
    -o-transition: opacity .7s ease-in-out;
    transition: opacity .7s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
}

.btn-copy span {
    margin-left: 5px;
}

.highlight:hover .btn-copy {
    opacity: 1;
}

以下分隔符hr、有序标签和Note标签美化来自：https://bestzuo.cn/posts/halo-beauty.html

在此感谢大佬的分享！

分隔符hr美化

分隔符hr的css如下，避免改变首页和移动端导航处hr的样式，其仅在文章页起效。

.article hr {
    position: relative;
    overflow: visible;
    box-sizing: content-box;
    margin: 2rem auto;
    width: calc(100% - 4px);
    height: 0;
    max-width: 768px;
    border: 2px dashed #a4d8fa;
    background: #fff;
}

.article hr:before {
    position: absolute;
    top: -10px;
    left: 5%;
    z-index: 1;
    color: #49b1f5;
    content: "\f0c4";
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 20px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
}

.article hr:hover:before {
    left: 95%;
}

有序标签美化

有序标签css如下，仅仅在文章页面有效。

.article-content ol {
    list-style: none;
    counter-reset: ol-li;
}

.article-content ol li:before {
    float: left;
    display: block;
    margin: 4px 12px 0 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #49b1f5;
    color: #fff;
    content: counter(ol-li);
    counter-increment: ol-li;
    text-align: center;
    font-weight: 300;
    font-style: normal;
    font-size: 16px;
    line-height: 20px;
    transition: all .5s;
}

Note标签美化

美化note标签，其css如下

.note {
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 15px;
    border: initial;
    border-left: 3px solid #eee;
    border-radius: 3px;
    background-color: #f9f9f9;
    font-size: var(--content-font-size);
}

.note:not(.no-icon):before {
    position: absolute;
    top: 11px;
    left: 15px;
    font-size: larger;
    font-family: FontAwesome;
}

.note:not(.no-icon) {
    padding-left: 45px;
}

.note.info {
    background-color: #eef7fa;
    border-left-color: #428bca;
}

.note.info:not(.no-icon):before {
    color: #428bca;
    content: "\f05a";
}

.note.warning {
    background-color: #fdf8ea;
    border-left-color: #f0ad4e;
}

.note.warning:not(.no-icon):before {
    color: #f0ad4e;
    content: "\f06a";
}

.note.primary {
    background-color: #f5f0fa;
    border-left-color: #6f42c1;
}

.note.primary:not(.no-icon):before {
    color: #6f42c1;
    content: "\f055";
}

.note.danger {
    background-color: #fcf1f2;
    border-left-color: #d9534f;
}

.note.danger:not(.no-icon):before {
    color: #d9534f;
    content: "\f056";
}

文章表格美化

css样式如下

table {
    margin: 15px auto;
    max-width: 65em;
    border: 1px solid #dedede;
    border-radius: 4px;
    empty-cells: show;
}

table th {
    background: rgba(158,188,226,.2);
    text-align: center!important;
    font-weight: 700;
}

table td:first-child,table th {
    white-space: nowrap;
}

table tbody tr:nth-child(2n) {
    background: rgba(102,128,153,.05);
}

文章图片放大功能

利用fancybox实现文章图片点击放大功能一直失败，本站使用viewer实现图片点击放大功能。

首先在article.ejs中给文章加一个id，viewer.js需要通过此id来识别文章图片。

<div class="article-content" id="article-content">

然后引入viewer的js和css，并限制只给文章图片添加此功能。

<link type='text/css' rel="stylesheet" href="https://cdn.jsdelivr.net/npm/viewerjs/dist/viewer.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/viewerjs/dist/viewer.js"></script>
<script>
if (document.getElementById('article-content')) {
      new Viewer(document.getElementById('article-content'), {
          toolbar: 1,
      });
  }
</script>

Demo:
Demo

文末版权声明

在\fexo\layout\_partial\下新建一个copyright.ejs

内容如下

<div class="post-copyright"  id="post-copyright">
    <p class="post-copyright-author">
        <b>本文作者：</b>
        <a href="<%= config.root %>" target="_blank" title="<%= config.author %>">
        <%= config.author %></a>
    </p>
    <p class="post-copyright-link">
        <b>本文链接：</b>
        <a href="<%- config.root %><%- post.path %>" target="_blank" title="<%= post.title %>">
        <%- config.url %>/<%- post.path %></a>
    </p>
    <p class="post-copyright-license">
        <b>版权声明：</b>
        <font style="line-height:1.5em;">本站所有文章除特别声明外，均采用【<b><a rel="external nofollow noopener noreferrer" href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh">CC BY-NC-ND 4.0</a></b>】国际许可协议，若转载请注明出处！</font>
    </p>
</div>

其css样式如下

.post-copyright {
    margin: 2em 0 0;
    padding: 0.5em 1em;
    border-radius: 6px;
    border-left: 3px solid #1bbc9b;
    background-color: #f9f9f9;
    list-style: none
}

.post-copyright p {
    border-radius: 6px;
    margin-bottom: 12px!important;
}

全局定制与美化

全局美化所需第三方资源在layout.ejs中引入，生效于站点所有页面。

全局字体修改

修改博客字体可参考： 博客引入思源宋体并优化加载速度

适配并支持PWA

配置和适配PWA见： Hexo博客适配并支持PWA

关键词优化

优化文章页的关键词为：文章标签词＋全站关键词

将head.ejs里的关键词配置中加一句代码<%= config.keywords %>
修改后如下

<% if (page.tags && page.tags.length && config.keywords) { %>
  <meta name="keywords" content="<% page.tags.forEach(function(tag) { %><%= tag.name %>,<% }); %><%= config.keywords %>" />
<% } else { %>
  <meta name="keywords" content="<%= theme.keywords %>" />
<% } %>

页面点击小爱心

在layout.ejs引入以下代码即可

<script type="text/javascript" defer src="https://cdn.jsdelivr.net/gh/ygbhf/clicklove/clicklove.js"></script>

页面点击小烟花

在layout.ejs引入以下代码即可

<script type="text/javascript" defer src="https://cdn.jsdelivr.net/gh/ygbhf/clicklove/clickfireworks.min.js"></script>

滚动条与选中文本美化

样式代码如下，颜色看个人喜好修改即可。

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: #eee;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #ff9898;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #eee;
}
/* 选中样式 */
::-moz-selection {
  color: #fff;
  background-color: #49b1f5;
}

页面预加载

使用Instant.Page开启页面预加载。

原引入代码

<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>

本地引入

<script type="text/javascript" aysnc src="/js/instantpage.js" type="module"></script>

深色模式

原理就是利用媒体查询，让网页自动随系统的模式切换深色模式和普通模式，即当系统设置为深色模式时用深色模式的样式覆盖原有的网页颜色样式。

具体如何适配颜色就不细说了，若您用的也是Fexo主题，可以参考我的样式。

@media (prefers-color-scheme: dark) {
    html, body {
        background-color: #000!important;
        background-image: none!important; /* 深色模式下不显示背景图 */
    }
    /* 其他代码省略 */
}

具体代码可右键新标签打开查看：https://senorui.top/css/personal.css ，若注释乱码可右键保存再查看。

结束语

以上是在主题 Fexo 上做的所有定制和美化，如有遇到同主题小伙伴希望能对你有一丝启发。

在追求美观的同时，更应该多兼顾资源的占用情况和资源的不必要请求，做到网页既美观又简约快速。

本文作者： Senorui

本文链接： https://senorui.top/posts/a0e3.html

版权声明： 本站所有文章除特别声明外，均采用【CC BY-NC-ND 4.0】国际许可协议，若转载请注明出处！

支持一下
知识无价，欢迎打赏🍖
  • 微信扫一扫
  • 支付宝扫一扫