hexo更换icarus主题和美化

最新推荐文章于 2025-04-17 19:16:13 发布

蔚蓝珊瑚海

最新推荐文章于 2025-04-17 19:16:13 发布

阅读量6.9k

点赞数 3

分类专栏： hexo建站系列

本文链接：https://blog.csdn.net/weixin_44861399/article/details/105121674

版权

hexo建站系列专栏收录该内容

6 篇文章

订阅专栏

文章目录

看惯了next的主题，出现了审美疲劳，在逛知乎的时候，发现了一款很不错的主题icarus，就试着更换了主题，发现还真挺漂亮的，于是就在做一个主题吧，哪天审美又疲劳了，再换回来呗。

页面点击出现爱心

在F:\blog\themes\icarus\source\js下，新建clicklove.js，写入以下代码。

!function(e,t,a){
    function n(){
        c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
        o(),
        r()
    }
    function r(){
        for(var e=0;e<d.length;e++)
            d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");
        requestAnimationFrame(r)
    }
    function o(){
        var t="function"==typeof e.onclick&&e.onclick;
        e.onclick=function(e){
            t&&t(),i(e)
        }
    }function i(e){
            var a=t.createElement("div");
            a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)
    }
    function c(e){
        var a=t.createElement("style");a.type="text/css";
        try{
            a.appendChild(t.createTextNode(e))
        }
        catch(t){
            a.styleSheet.cssText=e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }
    function s(){
        return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
    }
    var d=[];
    e.requestAnimationFrame=function(){
        return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){
            setTimeout(e,1e3/60)
        }
    }(),
    n()
}
(window,document);

修改layout.ejs，找到F:\blog\themes\icarus\layout\layout.ejs,添加：

<script src="js/clicklove.js"></script>

给文章添加目录

在主题配置文件中，添加如下代码：

widgets:
	-
    type: toc
    position: left

在每次写文章的时候都要添加toc： true

---
tags:
categories:
toc： true
---

添加相册

在_config.yml中开启画廊功能：

plugines:
	gallery: true

模块布局

初始的页面有很多模块，例如归档，标签云，最近文章，乱七八糟的，可以选择饿在左侧栏还是右侧栏显示这些模块，当然也可以隐藏这些模块。要在主题的配置文件修改。找到widget字样，例如下面有，分别有：左（lift），右（right），隐藏（false）。左右栏固定，不随着滑轮滑动。


sidebar:
    # left sidebar settings
    left:
        # Whether the left sidebar is sticky when page scrolls
        # https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
        sticky: true
    # right sidebar settings
    right:
        # Whether the right sidebar is sticky when page scrolls
        # https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
        sticky: true
        
 # Widget name
        type: category
        # Where should the widget be placed, left or right
        position: left
    -
        # Widget name
        type: tagcloud
        # Where should the widget be placed, left or right
        position: false
    -
        # Widget name
        type: recent_posts
        # Where should the widget be placed, left or right
        position: false
    -
        # Widget name
        type: archive
        # Where should the widget be placed, left or right
        position: false
    -
        # Widget name
        type: tag
        # Where should the widget be placed, left or right
        position: lift

开启评论系统

在leancloud官网注册账号，详情请看：参考书
在主题配置文件中找到comment字样，添加如下：

comment:
    type: valine
    app_id: 你的id
    app_key: 你的key
    notify: false
    verify: false
    placeholder:

valine域名绑定

因为要使用到valine的数据库存储功能，就得在leancloud备案域名。
先给域名创建一个二级域名，

开启打赏功能

donate:
    -
        # Donation entry name
        type: alipay
        # Qrcode image URL
        qrcode: '/images/alipay.jpg'
    -
        # Donation entry name
        type: wechat
        # Qrcode image URL
        qrcode: '/images/wechatpay.jpg'
    #-
        # Donation entry name
        #type: paypal
        # Paypal business ID or email address
        #business: ''
        # Currency code
        #currency_code: USD
    #-
        # Donation entry name
        #type: patreon
        # URL to the Patreon page
        #url: ''

全局搜索

找到search

search
	type： insight

首页三栏，阅读两栏

找到F:\blog\themes\icarus\includes\helpers\layout.js，第24行开始修改如下：+代表增加，-代表删除

     const widgets = hexo.extend.helper.get('get_config').bind(this)('widgets');
-    return widgets.filter(widget => widget.hasOwnProperty('position') && widget.position === position);
+    if (this.page.layout !== 'post') {
+        return widgets.filter(widget => widget.hasOwnProperty('position') && widget.position === position);
+    }
+    if (position === 'left') {
+        return widgets.filter(widget => widget.hasOwnProperty('position') && (widget.type === 'toc' || widget.type === 'profile'));
+    } else {
+        return []
+    }

找到layout/common/widget.ejs修改第五行如下：

 <% function side_column_class() {
     switch (column_count()) {
         case 2:
-            return 'is-4-tablet is-4-desktop is-4-widescreen';
+            return 'is-4-tablet is-4-desktop is-3-widescreen';
         case 3:

找到layout/layout.ejs修改如下

-<body class="is-<%= column_count() %>-column">
+<body class="is-3-column">
     <%- partial('common/navbar', { page }) %>
     <% function main_column_class() {
         switch (column_count()) {
             case 1:
                 return 'is-12';
             case 2:
-                return 'is-8-tablet is-8-desktop is-8-widescreen';
+                return 'is-8-tablet is-8-desktop is-9-widescreen';

找到source/css/style/styl,在不同屏幕下的大小

     .is-2-column .container
         max-width: screen-desktop - 2 * gap
         width: screen-desktop - 2 * gap
+    .is-3-column .container
+        max-width: screen-widescreen - gap
+        width: screen-widescreen - gap
 @media screen and (min-width: screen-fullhd)
+    .is-3-column .container
+        max-width: screen-fullhd - 2 * gap
+        width: screen-fullhd - 2 * gap
     .is-2-column .container
         max-width: screen-widescreen - 2 * gap
         width: screen-widescreen - 2 * gap

目录固定

找到layout/widget/toc.ejs，增加column-left is-sticky类，在第28行

-<div class="card widget" id="toc">
+<div class="card widget column-left is-sticky" id="toc">

默认开启目录

找到includes/helpers/config.js，修改第33行

   return defaultValue;
    } else {
        const property = readProperty(specs, configName);
-       return property === null ? null : property[descriptors.defaultValue];
+       const result = property === null ? null : property[descriptors.defaultValue];
+       return (configName === 'toc' && this.page.layout === 'post' && result === null) ? true : result;
    }

个人信息布局

找到layout/widget/profile.ejs

-    <nav class="level is-mobile">
+    <nav class="level menu-list is-mobile" style="margin-bottom:1rem">
         <div class="level-item has-text-centered is-marginless">
-            <div>
+            <a href="<%- url_for('/archives/') %>">
                 <p class="heading">

移动端优化

在移动端，隐藏archive 和 tagcloud。
找到layout/widget/archive.ejs

-<div class="card widget">
+<div class="card widget is-hidden-mobile">

找到layout/widget/recent_posts.ejs

<div class="card widget is-hidden-mobile">
  <div class="card-content">

增加版权说明

找到layout/common/article.ejs，在第50行修改如下：

     <div class="content">
         <%- index && post.excerpt ? post.excerpt : post.content %>
     </div>
+    <% if (!index && post.layout === 'post' && post.copyright !== false) { %>
+        <ul class="post-copyright">
+        <li><strong>本文标题：</strong><a href="<%= post.permalink %>"><%= page.title %></a></li>
+        <li><strong>本文作者：</strong><a href="<%= theme.url %>"><%= theme.author %></a></li>
+        <li><strong>本文链接：</strong><a href="<%= post.permalink %>"><%= post.permalink %></a></li>
+        <li><strong>发布时间：</strong><%= post.date.format("YYYY-MM-DD") %></li>
+        <li><strong>版权声明：</strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明出处！
+        </li>
+        </ul>
+    <% } %>
     <% if (!index && post.tags && post.tags.length) { %>

版权说明的样式：

+.post-copyright
+    font-size: 1rem
+    letter-spacing: 0.02rem
+    word-break: break-all
+    margin: 2.5rem 0 0
+    padding: 1rem 1rem
+    border-left: 3px solid #FF1700
+    background-color: #F9F9F9

增加busuanzi统计

在_config.yml中，找到busuanzi

 busuanzi: true

打开layout/common/footer.ejs文件，找到<span id="busuanzi_container_site_uv">，在下方添加：

  <% if (busuanzi) { %>
   <br>
-  <span id="busuanzi_container_site_uv">
-  <%- _p('plugin.visitor', '<span id="busuanzi_value_site_uv">0</span>') %>
-  </span>
+  <span id="busuanzi_container_site_uv">来访<span id="busuanzi_value_site_uv"></span>0人</span>
+  <span id="busuanzi_container_site_pv">总访问<span id="busuanzi_value_site_pv"></span>0次</span>
   <% } %>

使用阿里巴巴图标库

由于icarus默认使用的图标库是 font Awesome，里面的图标只有600多个，而且都是黑白的，并且有的时候还加载不出来（墙的原因），所以我换做用阿里巴巴矢量图标库。
首先登陆，将喜欢的图标添加到购物车，记得要一次添加完，提前看好你需要哪些图标，然后在右上角购物车里找到最下房下载代码，下载到本地。
在本地打开下载好的文件夹，找到iconfont.css，添加到F:\blog\themes\icarus\source\css。
找到F:\blog\themes\icarus\layout\widget\profile.ejs,添加一行代码，引入iconfont.css

<% for (let name in socialLinks) {
     let link = socialLinks[name]; %>
+    <link rel="stylesheet" href="/css/iconfont.css">
     <a class="level-item button is-white is-marginless" target="_blank" title="<%= name %>" href="<%= url_for(typeof(link) === 'string' ? link : link.url) %>">
     <% if (typeof(link) === 'string') { %>
     <%= name %>
     <% } else { %>
     <i class="<%= link.icon %>"></i>
     <% } %>

修改主题配置文件，这次主要改图标名字，图标名字也可以打开iconfont.css查看。

例如：
  Github:
      icon: iconfont icon-git
      url: 'https://github.com/DAQ121'

像有些内嵌的图标，比如说目录啊，标签啊这些。就要找到对应的.js文件，添加代码。

在这里插入图片描述 - 如果使用的是font awesome图标库的话，就添加<i class="fas fa-guidang"></i>,如果使用的是阿里云图标库的话，就添加<i class="iconfont icon-guidang"></i>，注意，要添加在<h3></h3>内部。

在这里插入图片描述

按钮背景颜色

找到style.styl，添加两行代码。

 .menu-list li ul
        margin-right: 0
+    .menu-list a
+       transition: background-color 0.3s ease-in-out
    .menu-list a.level
        display: flex
    .has-text-centered figure.image
        margin: auto

网站运行时间

找到/themes/icarus/layout/common/footer.ejs，在合适位置添加以下代码

<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
  <script>
  var now = new Date(); 
  function createtime() { 
  var grt= new Date("12/28/2018 12:49:00");//此处修改你的建站时间或者网站上线时间 
  now.setTime(now.getTime()+250); 
  days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
  hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
  if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
  mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
  seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
  snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
   document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 "; 
  document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; 
                } 
   setInterval("createtime()",250);
</script>

添加RSS订阅

安装feed插件

cnpm install hexo-generator-feed --save

打开站点配置文件,添加如下代码：

#RSS订阅
plugin:
    - hexo-generator-feed
    #Feed.Atom
    feed:
    type: atom
    path: rss.xml
    limit: 0
    hub:
  	content: 'true'
 	order_by: -date

打开主题配置文件,找到rss

    RSS:
        icon: fas fa-rss
        url: /rss.xml