关于我在2024年做了这件事...

前言

换了主题以后发现之前侧边栏都要改了，所以有了这一篇文章。效果请单击此处观看

恋爱墙

1. 在 source/custom/ 下，新建 js 文件夹，在里面新建一个 laq.min.js 文件填入以下内容，在 Date.UTC() 修改时间月份是从 0 开始算的11月就是 10 以此类推。（文件名可自定义，在 source 里就可以了）

   var laq_time=document.getElementById("laq_time"),laq_time_time=null;function setTime(){var create_time=Math.round(new Date(Date.UTC(2021,12,21,0,0,0)).getTime()/1e3),timestamp=Math.round(((new Date).getTime()+288e5)/1e3);currentTime=secondToDate(timestamp-create_time),currentTimeHtml=currentTime[0]+" 年 "+currentTime[1]+" 天 "+currentTime[2]+" 时 "+currentTime[3]+" 分 "+currentTime[4]+" 秒",laq_time.innerHTML=currentTimeHtml}function secondToDate(second){if(!second)return 0;var time=new Array(0,0,0,0,0);return second>=31536e3&&(time[0]=parseInt(second/31536e3),second%=31536e3),second>=86400&&(time[1]=parseInt(second/86400),second%=86400),second>=3600&&(time[2]=parseInt(second/3600),second%=3600),second>=60&&(time[3]=parseInt(second/60),second%=60),second>0&&(time[4]=second),time}laq_time?laq_time_time=setInterval(setTime,1e3):clearInterval(laq_time_time);

2. 在 source/_data 目录下新建一个 aside.yml 文件。

3. 在文件中写入以下内容，更改 图片地址 和 js地址 。

   - name: love
     title: 恋爱墙
     class: 
     id: testLove
     icon: fas fa-heart
     content_class:
     content_id:
     content_css: 
     content_html: '<div style="text-align: center;">
           <img src="图片地址"
             style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-right: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;" />
           <svg viewbox="0 0 1024 1024" style="margin-left: 5px;margin-right: 5px;" version="1.0" width="15" height="15"
             class="my-face">
             <path
               d="M863.597631 513.574282l-271.33965-140.213484L729.783667 81.926656c3.583731-7.87141 7.167462-15.742819 7.167462-25.214109C736.887134 25.226908 708.345275 0.012799 672.635953 0.012799a63.611229 63.611229 0 0 0-39.293053 12.607055c-1.791866 1.59988-3.519736 3.19976-5.311602 3.19976L147.87531 418.925381a55.547834 55.547834 0 0 0-19.646527 47.356448c1.791866 17.278704 14.27093 33.021523 32.125591 42.492813l271.33965 141.749369L292.504463 945.221908c-12.479064 25.214109-1.791866 53.563983 23.166262 69.306802 10.751194 6.335525 23.230258 9.47129 35.709322 9.47129 16.062795 0 32.125591-4.735645 44.604655-15.742819l480.091993-403.297753a55.547834 55.547834 0 0 0 19.646526-47.228458 61.243407 61.243407 0 0 0-32.12559-44.156688z"
               fill="#515151" />
           </svg>
           <img src="图片地址"
             style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-left: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;" /><br />
           <span id="laq_time"></span>
         </div>
         <script defer data-pjax src="js地址"></script>'

4. 在主题的配置文件 _config.solitude.yml ,在 home: 后插入 love 。（我是只在主页显示，若你想全部显示在 post 和 page 后面都可以加上）

   # Aside
   # 侧边栏
   aside:
     # Values: about (info card), newestPost (latest article), allInfo (website information), flip (official account QR code), newest_comment (latest comment)
     # 值: about(信息卡), newestPost(最新文章), allInfo(网站信息), flip(官方账号二维码), newest_comment(最新评论)
   
     # Sticky: Fixed position / noSticky: Not fixed position
     # Sticky: 固定位置 / noSticky: 不固定位置
     home: # on the homepage
       noSticky: "about,love" #在此处加入 love
       Sticky: "allInfo,newest_comment"
     post: # on the article page
       noSticky: "about,flip"
       Sticky: "newestPost,newest_comment"
     page: # on the page
       noSticky: "about,flip"
       Sticky: ""

Do you like me

之前专门写过一篇文章，可以看看，都是大差不差的。

叶泯希

https://ymxblog.us.kg/posts/c88f8d39.html

1. 在 aside.yml 文件中加入以下内容。（记得修改 serverURL 为你的api地址，用我的就成给我数据了）

   - name: likeme
     title: 
     class: 
     id: likeme
     icon: 
     content_class:
     content_id:
     content_css: 
     content_html: '<link rel="stylesheet" href="https://unpkg.com/@5ime/likeme@1.0.1/static/css/likeme.css">
             <script src="https://unpkg.com/@5ime/likeme@1.0.1/static/js/likeme.js"></script>
     <script>new limeMe({ el: "#likeme", serverURL: "https://like.ymxapi.us.kg", color: "#ff4e6ae6" })</script>'

2. 打开主题的配置文件 _config.solitude.yml ,在 home: 后插入 likeme 。（我是只在主页显示，若你想全部显示在 post 和 page 后面都可以加上）

   # Aside
   # 侧边栏
   aside:
     # Values: about (info card), newestPost (latest article), allInfo (website information), flip (official account QR code), newest_comment (latest comment)
     # 值: about(信息卡), newestPost(最新文章), allInfo(网站信息), flip(官方账号二维码), newest_comment(最新评论)
   
     # Sticky: Fixed position / noSticky: Not fixed position
     # Sticky: 固定位置 / noSticky: 不固定位置
     home: # on the homepage
       noSticky: "about,love,likeme" #在此处加入 likeme
       Sticky: "allInfo,newest_comment"
     post: # on the article page
       noSticky: "about,flip"
       Sticky: "newestPost,newest_comment"
     page: # on the page
       noSticky: "about,flip"
       Sticky: ""

3. 在 head: 后插入以下内容。（可不加）

   # Extend
   # 扩展
   extends:
     # Insert in head
     # 插入到 head
     head:
       - <link rel="stylesheet" href="https://unpkg.com/@5ime/likeme@1.0.1/static/css/likeme.css"> #插入这一行

来访者（需要的话请给我留言，就不写了，懒得写）

1. 在 aside.yml 文件中加入以下内容。

   - name: welcome
     title: 来访者
     class: 
     id: welcome
     icon: fas fa-map-marker-alt
     content_class:
     content_id: visitorInfo
     content_css: 
     content_html: '<script src="/custom/js/welcome.js"></script>'

2. …

3. …

弄完呢记得Hexo三连击

$ hexo clean && hexo generate && hexo server

结尾

至此，教程结束。希望对你有所帮助，有任何问题请在下方留言。可以关注我的 公众号以及订阅我的文章 ，感谢你的支持，是对我最大的动力，当然了，更多的是因为热爱。

本文参考

伍十七

Solitude 自定义侧边栏