Hexo项目：新增侧边框配置

「已注销」

已于 2023-04-16 12:02:12 修改

阅读量688

点赞数 3

分类专栏： # Hexo博客项目文章标签： c# 开发语言 javascript Hexo 项目

于 2023-03-10 19:15:37 首次发布

本文链接：https://blog.csdn.net/qq_29678157/article/details/129450254

版权

Hexo博客项目专栏收录该内容

8 篇文章 2 订阅

订阅专栏

Hexo项目：新增侧边框配置

文章目录

Hexo项目：新增侧边框配置
项目最终效果图

项目最终效果图

请添加图片描述

1.默认的侧边框

在主题的config.yml文件中配置:

# sidebar侧边栏
sidebar:
  on: true
  position: left # left right
  widget_library:
    side_blogger:
      on: true
      avatar: http://api.btstu.cn/sjtx/api.php?lx=c1&format=images
      shape: rectangle # circle, rectangle
      url: /about/
      title: 青墨书晚风
      subtitle: 我是副标题
      jinrishici: true # Poetry Today. You can set a string, and it will be displayed when loading fails.
      fontFammily: Long Cang,cursive
      background: '#fff'
      order:  # 卡片排序, 数值越小，越在上面
      social:
        - icon: fas fa-rss
          url: /atom.xml
        - icon: fas fa-envelope
          url: mailto:me@xxx.com
        - icon: fab fa-github
          url: https://github.com/yuang01/hexo-theme-bamboo
        - icon: fab fa-qq
          url: tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=你的qq号码
    # ---------------------------------------
    # category widget
    side_category:
      on: true
      background: '#fff'
      order:  # 卡片排序(widget都有)，任意数字，数字小的在上面
      header:
        icon: fas fa-folder-open
        icon_color: # 标题字体颜色
        title: 文章分类
        url: /blog/categories/
    # ---------------------------------------
    # tagcloud widget
    side_tagcloud:
      on: true
      background: '#fff'
      order: 
      header:
        icon: fas fa-tags
        icon_color: 
        title: 热门标签
        url: /tags/
      min_font: 14
      max_font: 24
      color: true
      start_color: '#999'
      end_color: '#555'
    # ---------------------------------------
    # recent_post widget
    side_recent_post:
      on: true
      background: '#fff'
      limit: 5
      sort: update # date
      order: 
      header:
        icon: fas fa-book
        icon_color: 
        title: 最新文章
        url: /tags/
    # ---------------------------------------
    # side_archives widget
    side_archives:
      on: true
      type: monthly # yearly or monthly      or yearly
      format: MMMM YYYY # eg: YYYY年MM月     or YYYY
      timeOrder: -1 # Sort of order. 1, asc for ascending; -1, desc for descending 时间排序
      limit: 8 # if set 0 will show all
      order:  # widget order 卡片排序
      background: '#fff'
      header: 
        icon: fas fa-archive
        icon_color: red
        title: 归档
    # ---------------------------------------
    # side_webinfo widget
    side_webinfo:
      background: '#fff'
      order: 
      header: 
        icon: fas fa-chart-line
        title: 站点信息
      type:
        article:
          on: true
          text: '文章数目：'
          unit: '篇'
        runtime:
          on: true
          data: '2020/01/01'    # 填写建站日期
          text: '已运行时间：'
          unit: '天'
        wordcount:
          on: true
          text: '本站总字数：'   # 需要启用 wordcount
          unit: '字'
        visitcounter:
          service: busuanzi # only busuanzi
          siteuv:
            on: true
            text: '本站访客数：'
            unit: '人'
          sitepv:
            on: true
            text: '本站总访问量：'
            unit: '次'
        lastupd:
          on: true
          friendlyShow: true    # 更友好的时间显示
          text: '最后活动时间：'
          unit: '日'

2.自定义侧边框

创建 widget.yml，在Hexo博客目錄中的source/_data（如果沒有 _data 文件夾，请自行创建），創建一個文件 widget.yml

这里我写了几个实用的侧边框：IP签名框、历史上的今天、恋爱墙、微博热搜

添加IP签名框：

home_widget:
  - class_name: welcome
    id_name: welcome
    order: -1
    name: 欢迎
    icon: fas fa-envelope
    icon_color: blue
    url: http://baidu.com
    background: '#fff'
    html: '<img src="https://api.xiaobaibk.com/api/ip/" style="width:100%">' #这里使用小白API

请添加图片描述

添加历史上的今天：

同样要在source文件夹下创建historyToday/index.js文件:

// 如果想变换轮播方式等，进阶的话，可以看这个 https://github.surmon.me/vue-awesome-swiper/
// 当然你也可以引入jquery插件，都可以的, 不只是轮播图，其他特效也可以
new Vue({
  el: "#myHistorySwiper", // el不要是最外面的id_name，应该是html: ''里的div的id
  data: function () {
    return {
      swiperOption: {
        effect: "cube", // 轮播特效
        loop: true, // 循环
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },
      },
      content: [],
    };
  },
  computed: {
    swiper() {
      return this.$refs.myhistoryswiper.$swiper;
    },
  },
  created() {
    this.getHistoryList();
  },
  methods: {
    // 鼠标移入停止轮播
    stopAutoPlay() {
      this.swiperOption.autoplay && this.swiper.autoplay.stop();
    },
    // 鼠标移出开始轮播
    startAutoPlay() {
      this.swiperOption.autoplay && this.swiper.autoplay.start();
    },
    // 请求开源api, 获取历史上的今天数据
    getHistoryList() {
      fetch("https://tenapi.cn/lishi/?format=json", {
        method: "GET", // *GET, POST, PUT, DELETE, etc.
      })
        .then((res) => {
          return res.json();
        })
        .then((data) => {
          this.content = data.content;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
});

最后在自定义侧边栏的widget_library_sticky或者widget_library中加入html

widget_library_sticky:
  - class_name: historyToday
    id_name: historyToday
    order: -1
    name: 历史上的今天
    icon: fas fa-calendar-week
    icon_color: '#d63130'
    url: http://baidu.com
    background: '#fff'
    html: '
      <div id="myHistorySwiper" @mouseenter="stopAutoPlay()" @mouseleave="startAutoPlay()">
        <swiper class="myhistoryswiper" ref="myhistoryswiper" style="height:80px;" :options="swiperOption">
          <swiper-slide v-for="(item, index) in content" :key="index">
            {{item}}
          </swiper-slide>
        </swiper>
      </div>
      <script src="/historyToday/index.js"></script>
    '

请添加图片描述

添加恋爱墙：

在source文件夹下创建love/index.js文件

var htmer_time = document.getElementById("htmer_time");
var htmer_time_time = null;

function setTime() {
  var create_time = Math.round(
    new Date(Date.UTC(2018, 10, 26, 6, 45, 0)).getTime() / 1000
  );
  var timestamp = Math.round(
    (new Date().getTime() + 8 * 60 * 60 * 1000) / 1000
  );
  currentTime = secondToDate(timestamp - create_time);
  currentTimeHtml =
    currentTime[0] +
    " 年 " +
    currentTime[1] +
    " 天 " +
    currentTime[2] +
    " 时 " +
    currentTime[3] +
    " 分 " +
    currentTime[4] +
    " 秒";
  htmer_time.innerHTML = currentTimeHtml;
}
function secondToDate(second) {
  if (!second) {
    return 0;
  }
  var time = new Array(0, 0, 0, 0, 0);
  if (second >= 365 * 24 * 3600) {
    time[0] = parseInt(second / (365 * 24 * 3600));
    second %= 365 * 24 * 3600;
  }
  if (second >= 24 * 3600) {
    time[1] = parseInt(second / (24 * 3600));
    second %= 24 * 3600;
  }
  if (second >= 3600) {
    time[2] = parseInt(second / 3600);
    second %= 3600;
  }
  if (second >= 60) {
    time[3] = parseInt(second / 60);
    second %= 60;
  }
  if (second > 0) {
    time[4] = second;
  }
  return time;
}

if (htmer_time) {
  htmer_time_time = setInterval(setTime, 1000);
} else {
  clearInterval(htmer_time_time);
}

在第6行修改时间就行了，改成你自己想要开始的时间(单身母胎的绝望）
最后在自定义侧边栏的widget_library_sticky或者widget_library中加入html

widget_library_sticky:
  - class_name: testLove
    id_name: testLove
    order: -1
    name: 恋爱墙
    icon: fas fa-heart
    icon_color: '#d63130'
    url: http://baidu.com
    background: '#fff'
    html: '
    
      <div style="text-align: center;">
        <img src="https://a-oss.zmki.cn/20190601/img_9879.jpg"
          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="https://a-oss.zmki.cn/20190601/img_9878.jpg"
          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="htmer_time"></span>
      </div>

      <script data-pjax src="/love/index.js"></script>
    '

请添加图片描述

添加微博热搜:

同样同样，在source文件夹下创建weibo/index.js和weibo/index.css文件

#index.js
new Vue({
  el: "#myWeibo", // el不要是最外面的id_name，应该是html: ''里的div的id
  data: function () {
    return {
      content: [],
      classOption: {
        singleHeight: 30,
      },
    };
  },
  created() {
    this.getWeiboList();
  },
  methods: {
    // 请求开源api, 获取历史上的今天数据
    getWeiboList() {
      fetch("https://tenapi.cn/resou/", {
        method: "GET", // *GET, POST, PUT, DELETE, etc.
      })
        .then((res) => {
          return res.json();
        })
        .then((data) => {
          this.content = data.list;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
});

#index.css
.weibo-container {
    width: 100%;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    height: 30px;
}
.weibo-container .left {
    display: flex;
}
.weibo-container .name {
    margin-left: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
#myWeibo .warp {
    height: 300px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.weibo-container .order {
    color: #fe962e;
}
.weibo-container .name a{
    color: black;
}
.weibo-container .name a:hover {
    text-decoration: underline;
    color: red;
}
.weibo-container .red {
    color: red;
}

最后在自定义侧边栏的widget_library_sticky或者widget_library中加入html

widget_library_sticky:
  - class_name: testWidget
    id_name: testWidget
    order: -1
    name: 微博热搜
    icon: fab fa-weibo
    icon_color: '#d63130'
    url: http://baidu.com
    background: '#fff'
    html: '
      <div id="myWeibo">

      <!-- 如果不要滚动，则去掉 vue-seamless-scroll标签就行了，这个插件使用cdn向左向右滚动好像有问题 -->

        <vue-seamless-scroll
          :data="content"
          :class-option="classOption"
          class="warp"
        >
          <div class="weibo-container" v-for="(item, index) in content" :key="index">
            <div class="left">
              <div class="order" :class="{ red: index<=2 }">{{index + 1}}</div>
              <div class="name"><a :href="item.url" target="_blank">{{item.name}}</a></div>
            </div>
            <div class="hot">{{item.hot}}</div>
          </div>
        </vue-seamless-scroll>
      </div>

      <script src="/weibo/index.js"></script>
      <link href="/weibo/index.css" rel="stylesheet">
    '