主题 Solitude 修改记录

文章摘要

GPT 4

此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结

首页展示来访信息

创建 yml
适配 IP 信息查询 - IPv4/IPv6
新建 JavaScript
主题配置引入新建的 js
主题配置新增侧边栏
增加主题配置文件

创建 aside.yml 到 source/_data 目录下，添加以下代码：

- name: welcome
  title: 来访者
  class: card-welcome
  id:
  icon: fas fa-location-dot
  content_id: welcome-info
  content_css: 'height:160px;overflow:hidden'
  content_html: '<div class="welcome_swiper-container" id="welcome-container" style="width: 100%;height: 100%;margin-top: 6px">
        <div id="welcome_container_wrapper" class="swiper-wrapper"></div>
    </div>'

打开 IP 信息查询 - IPv4/IPv6 免费接入
获取你的密钥 key

新建 custom.js

在 hexo 目录下新建 source/js/custom.js 文件，新增以下内容 (若没有 js 文件夹直接新建即可)
注意此处需要修改两个地方

你的 key

修改自己的经度，纬度

// 进行 fetch 请求
fetch('https://api.76.al/api/ip/query?key=你的key') //申请key:https://api.76.al
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        ipLocation = data;
        if (isHomePage()) {
            showWelcome();
        }
    })
    .catch(error => console.error('Error:', error));

function getDistance(e1, n1, e2, n2) {
    const R = 6371;
    const { sin, cos, asin, PI, hypot } = Math;
    let getPoint = (e, n) => {
        e *= PI / 180;
        n *= PI / 180;
        return { x: cos(n) * cos(e), y: cos(n) * sin(e), z: sin(n) };
    };

    let a = getPoint(e1, n1);
    let b = getPoint(e2, n2);
    let c = hypot(a.x - b.x, a.y - b.y, a.z - b.z);
    let r = asin(c / 2) * 2 * R;
    return Math.round(r);
}

function showWelcome() {
    if (!ipLocation || !ipLocation.data) {
        console.error('ipLocation data is not available.');
        return;
    }

    let dist = getDistance(106.668429, 29.502683, ipLocation.data.lng, ipLocation.data.lat); // 修改自己的经度（121.413921）纬度（31.089290）
    let pos = ipLocation.data.country;
    let ip = ipLocation.ip;
    let posdesc;

    // 以下的代码需要根据新API返回的结果进行相应的调整
    switch (ipLocation.data.country) {
        case "日本":
            posdesc = "よろしく，一起去看樱花吗";
            break;
        case "美国":
            posdesc = "Let us live in peace!";
            break;
        case "英国":
            posdesc = "想同你一起夜乘伦敦眼";
            break;
        case "俄罗斯":
            posdesc = "干了这瓶伏特加！";
            break;
        case "法国":
            posdesc = "C'est La Vie";
            break;
        case "德国":
            posdesc = "Die Zeit verging im Fluge.";
            break;
        case "澳大利亚":
            posdesc = "一起去大堡礁吧！";
            break;
        case "加拿大":
            posdesc = "拾起一片枫叶赠予你";
            break;
        case "中国":
            pos = ipLocation.data.prov + " " + ipLocation.data.city + " " + ipLocation.data.district;
            switch (ipLocation.data.prov) {
                case "北京市":
                    posdesc = "北——京——欢迎你~~~";
                    break;
                case "天津市":
                    posdesc = "讲段相声吧";
                    break;
                case "河北省":
                    posdesc = "山势巍巍成壁垒，天下雄关铁马金戈由此向，无限江山";
                    break;
                case "山西省":
                    posdesc = "展开坐具长三尺，已占山河五百余";
                    break;
                case "内蒙古自治区":
                    posdesc = "天苍苍，野茫茫，风吹草低见牛羊";
                    break;
                case "辽宁省":
                    posdesc = "我想吃烤鸡架！";
                    break;
                case "吉林省":
                    posdesc = "状元阁就是东北烧烤之王";
                    break;
                case "黑龙江省":
                    posdesc = "很喜欢哈尔滨大剧院";
                    break;
                case "上海市":
                    posdesc = "众所周知，中国只有两个城市";
                    break;
                case "江苏省":
                    switch (ipLocation.data.city) {
                        case "南京市":
                            posdesc = "这是我挺想去的城市啦";
                            break;
                        case "苏州市":
                            posdesc = "上有天堂，下有苏杭";
                            break;
                        default:
                            posdesc = "散装是必须要散装的";
                            break;
                    }
                    break;
                case "浙江省":
                    switch (ipLocation.data.city) {
                        case "杭州市":
                            posdesc = "东风渐绿西湖柳，雁已还人未南归";
                            break;
                        default:
                            posdesc = "望海楼明照曙霞,护江堤白蹋晴沙";
                            break;
                    }
                    break;
                case "河南省":
                    switch (ipLocation.data.city) {
                        case "郑州市":
                            posdesc = "豫州之域，天地之中";
                            break;
                        case "信阳市":
                            posdesc = "品信阳毛尖，悟人间芳华";
                            break;
                        case "南阳市":
                            posdesc = "臣本布衣，躬耕于南阳此南阳非彼南阳！";
                            break;
                        case "驻马店市":
                            posdesc = "峰峰有奇石，石石挟仙气嵖岈山的花很美哦！";
                            break;
                        case "开封市":
                            posdesc = "刚正不阿包青天";
                            break;
                        case "洛阳市":
                            posdesc = "洛阳牡丹甲天下";
                            break;
                        default:
                            posdesc = "可否带我品尝河南烩面啦？";
                            break;
                    }
                    break;
                case "安徽省":
                    posdesc = "蚌埠住了，芜湖起飞";
                    break;
                case "福建省":
                    posdesc = "井邑白云间，岩城远带山";
                    break;
                case "江西省":
                    posdesc = "落霞与孤鹜齐飞，秋水共长天一色";
                    break;
                case "山东省":
                    posdesc = "遥望齐州九点烟，一泓海水杯中泻";
                    break;
                case "湖北省":
                    switch (ipLocation.data.city) {
                        case "黄冈市":
                            posdesc = "红安将军县！辈出将才！";
                            break;
                        default:
                            posdesc = "来碗热干面~";
                            break;
                    }
                    break;
                case "湖南省":
                    posdesc = "74751，长沙斯塔克";
                    break;
                case "广东省":
                    switch (ipLocation.data.city) {
                        case "广州市":
                            posdesc = "看小蛮腰，喝早茶了嘛~";
                            break;
                        case "深圳市":
                            posdesc = "今天你逛商场了嘛~";
                            break;
                        case "阳江市":
                            posdesc = "阳春合水！博主家乡~ 欢迎来玩~";
                            break;
                        default:
                            posdesc = "来两斤福建人~";
                            break;
                    }
                    break;
                case "广西壮族自治区":
                    posdesc = "桂林山水甲天下";
                    break;
                case "海南省":
                    posdesc = "朝观日出逐白浪，夕看云起收霞光";
                    break;
                case "四川省":
                    posdesc = "康康川妹子";
                    break;
                case "重庆市":
                    posdesc = "来找我玩吧！";
                    break;                    
                case "贵州省":
                    posdesc = "茅台，学生，再塞200";
                    break;
                case "云南省":
                    posdesc = "玉龙飞舞云缠绕，万仞冰川直耸天";
                    break;
                case "西藏自治区":
                    posdesc = "躺在茫茫草原上，仰望蓝天";
                    break;
                case "陕西省":
                    posdesc = "来份臊子面加馍";
                    break;
                case "甘肃省":
                    posdesc = "羌笛何须怨杨柳，春风不度玉门关";
                    break;
                case "青海省":
                    posdesc = "牛肉干和老酸奶都好好吃";
                    break;
                case "宁夏回族自治区":
                    posdesc = "大漠孤烟直，长河落日圆";
                    break;
                case "新疆维吾尔自治区":
                    posdesc = "驼铃古道丝绸路，胡马犹闻唐汉风";
                    break;
                case "台湾省":
                    posdesc = "我在这头，大陆在那头";
                    break;
                case "香港特别行政区":
                    posdesc = "永定贼有残留地鬼嚎，迎击光非岁玉";
                    break;
                case "澳门特别行政区":
                    posdesc = "性感荷官，在线发牌";
                    break;
                default:
                    posdesc = "带我去你的城市逛逛吧！";
                    break;
            }
            break;
        default:
            posdesc = "带我去你的国家逛逛吧";
            break;
    }

    // 根据本地时间切换欢迎语
    let timeChange;
    let date = new Date();
    if (date.getHours() >= 5 && date.getHours() < 11) timeChange = "<span>🌤️ 早上好，一日之计在于晨</span>";
    else if (date.getHours() >= 11 && date.getHours() < 13) timeChange = "<span>☀️ 中午好，记得午休喔~</span>";
    else if (date.getHours() >= 13 && date.getHours() < 17) timeChange = "<span>🕞 下午好，饮茶先啦！</span>";
    else if (date.getHours() >= 17 && date.getHours() < 19) timeChange = "<span>🚶‍♂️ 即将下班，记得按时吃饭~</span>";
    else if (date.getHours() >= 19 && date.getHours() < 24) timeChange = "<span>🌙 晚上好，夜生活嗨起来！</span>";
    else timeChange = "夜深了，早点休息，少熬夜";

    let welcomeInfoElement = document.getElementById("welcome-info");

    if (welcomeInfoElement) {
        welcomeInfoElement.innerHTML =
            `欢迎来自 <b><span style="color: var(--efu-main)">${pos}</span></b> 的小友💖<br>${posdesc}🍂<br>当前位置距博主约 <b><span style="color: var(--efu-main)">${dist}</span></b> 公里！<br>您的IP地址为：<b><span style="font-size: 15px;">${ip}</span></b><br>${timeChange} <br>`;
    } else {
        console.log("Pjax无法获取元素");
    }
}

function handlePjaxComplete() {
    if (isHomePage()) {
        showWelcome();
    }
}

function isHomePage() {
    return window.location.pathname === '/' || window.location.pathname === '/index.html';
}

window.onload = function () {
    if (isHomePage()) {
        showWelcome();
    }
    document.addEventListener("pjax:complete", handlePjaxComplete);
};

1
2
3

extends:
body: # 在body中插入 / Insert in body
    - <script defer pjax src="/js/custom.js"></script>

主题配置新增侧边栏，找到配置项 home

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,welcome # 若不想显示about，去掉即可
    Sticky: "allInfo"

文章及分类统计图标

添加 charts.js
插入 JS 到 Inject
新建一个统计页面
主题配置菜单引入统计页面
报错问题：Error: Cannot find module ‘cheerio’
1
npm install cheerio --save

新建文件路径：solitude/scripts/helper/charts.js

js 代码

const cheerio = require('cheerio')
const moment = require('moment')

hexo.extend.filter.register('after_render:html', function (locals) {
  const $ = cheerio.load(locals)
  const post = $('#posts-chart')
  const tag = $('#tags-chart')
  const category = $('#categories-chart')
  const htmlEncode = false

  if (post.length > 0 || tag.length > 0 || category.length > 0) {
    if (post.length > 0 && $('#postsChart').length === 0) {
      if (post.attr('data-encode') === 'true') htmlEncode = true
      post.after(postsChart(post.attr('data-start')))
    }
    if (tag.length > 0 && $('#tagsChart').length === 0) {
      if (tag.attr('data-encode') === 'true') htmlEncode = true
      tag.after(tagsChart(tag.attr('data-length')))
    }
    if (category.length > 0 && $('#categoriesChart').length === 0) {
      if (category.attr('data-encode') === 'true') htmlEncode = true
      category.after(categoriesChart(category.attr('data-parent')))
    }

    if (htmlEncode) {
      return $.root().html().replace(/&amp;#/g, '&#')
    } else {
      return $.root().html()
    }
  } else {
    return locals
  }
}, 15)

function postsChart (startMonth) {
  const startDate = moment(startMonth || '2020-01')
  const endDate = moment()

  const monthMap = new Map()
  const dayTime = 3600 * 24 * 1000
  for (let time = startDate; time <= endDate; time += dayTime) {
    const month = moment(time).format('YYYY-MM')
    if (!monthMap.has(month)) {
      monthMap.set(month, 0)
    }
  }
  hexo.locals.get('posts').forEach(function (post) {
    const month = post.date.format('YYYY-MM')
    if (monthMap.has(month)) {
      monthMap.set(month, monthMap.get(month) + 1)
    }
  })
  const monthArr = JSON.stringify([...monthMap.keys()])
  const monthValueArr = JSON.stringify([...monthMap.values()])

  return `
  <script id="postsChart">
    var color = document.documentElement.getAttribute('data-theme') === 'light' ? '#4c4948' : 'rgba(255,255,255,0.7)'
    var postsChart = echarts.init(document.getElementById('posts-chart'), 'light');
    var postsOption = {
      title: {
        text: '文章发布统计图',
        x: 'center',
        textStyle: {
          color: color
        }
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        name: '日期',
        type: 'category',
        boundaryGap: false,
        nameTextStyle: {
          color: color
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          color: color
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: color
          }
        },
        data: ${monthArr}
      },
      yAxis: {
        name: '文章篇数',
        type: 'value',
        nameTextStyle: {
          color: color
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          color: color
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: color
          }
        }
      },
      series: [{
        name: '文章篇数',
        type: 'line',
        smooth: true,
        lineStyle: {
            width: 0
        },
        showSymbol: false,
        itemStyle: {
          opacity: 1,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgba(1, 191, 236)'
          }])
        },
        areaStyle: {
          opacity: 1,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(128, 255, 165)'
          }, {
            offset: 1,
            color: 'rgba(1, 191, 236)'
          }])
        },
        data: ${monthValueArr},
        markLine: {
          data: [{
            name: '平均值',
            type: 'average',
            label: {
              color: color
            }
          }]
        }
      }]
    };
    postsChart.setOption(postsOption);
    window.addEventListener('resize', () => { 
      postsChart.resize();
    });
    postsChart.on('click', 'series', (event) => {
      if (event.componentType === 'series') window.location.href = '/archives/' + event.name.replace('-', '/');
    });
  </script>`
}

function tagsChart (len) {
  const tagArr = []
  hexo.locals.get('tags').map(function (tag) {
    tagArr.push({ name: tag.name, value: tag.length, path: tag.path })
  })
  tagArr.sort((a, b) => { return b.value - a.value })

  const dataLength = Math.min(tagArr.length, len) || tagArr.length
  const tagNameArr = []
  for (let i = 0; i < dataLength; i++) {
    tagNameArr.push(tagArr[i].name)
  }
  const tagNameArrJson = JSON.stringify(tagNameArr)
  const tagArrJson = JSON.stringify(tagArr)

  return `
  <script id="tagsChart">
    var color = document.documentElement.getAttribute('data-theme') === 'light' ? '#4c4948' : 'rgba(255,255,255,0.7)'
    var tagsChart = echarts.init(document.getElementById('tags-chart'), 'light');
    var tagsOption = {
      title: {
        text: 'Top ${dataLength} 标签统计图',
        x: 'center',
        textStyle: {
          color: color
        }
      },
      tooltip: {},
      xAxis: {
        name: '标签',
        type: 'category',
        nameTextStyle: {
          color: color
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          color: color,
          interval: 0
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: color
          }
        },
        data: ${tagNameArrJson}
      },
      yAxis: {
        name: '文章篇数',
        type: 'value',
        splitLine: {
          show: false
        },
        nameTextStyle: {
          color: color
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          color: color
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: color
          }
        }
      },
      series: [{
        name: '文章篇数',
        type: 'bar',
        data: ${tagArrJson},
        itemStyle: {
          borderRadius: [5, 5, 0, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgba(1, 191, 236)'
          }])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(128, 255, 195)'
            },
            {
              offset: 1,
              color: 'rgba(1, 211, 255)'
            }])
          }
        },
        markLine: {
          data: [{
            name: '平均值',
            type: 'average',
            label: {
              color: color
            }
          }]
        }
      }]
    };
    tagsChart.setOption(tagsOption);
    window.addEventListener('resize', () => { 
      tagsChart.resize();
    });
    tagsChart.on('click', 'series', (event) => {
      if(event.data.path) window.location.href = '/' + event.data.path;
    });
  </script>`
}

function categoriesChart (dataParent) {
  const categoryArr = []
  let categoryParentFlag = false
  hexo.locals.get('categories').map(function (category) {
    if (category.parent) categoryParentFlag = true
    categoryArr.push({
      name: category.name,
      value: category.length,
      path: category.path,
      id: category._id,
      parentId: category.parent || '0'
    })
  })
  categoryParentFlag = categoryParentFlag && dataParent === 'true'
  categoryArr.sort((a, b) => { return b.value - a.value })
  function translateListToTree (data, parent) {
    let tree = []
    let temp
    data.forEach((item, index) => {
      if (data[index].parentId == parent) {
        let obj = data[index];
        temp = translateListToTree(data, data[index].id);
        if (temp.length > 0) {
          obj.children = temp
        }
        if (tree.indexOf())
          tree.push(obj)
      }
    })
    return tree
  }
  const categoryNameJson = JSON.stringify(categoryArr.map(function (category) { return category.name }))
  const categoryArrJson = JSON.stringify(categoryArr)
  const categoryArrParentJson = JSON.stringify(translateListToTree(categoryArr, '0'))

  return `
  <script id="categoriesChart">
    var color = document.documentElement.getAttribute('data-theme') === 'light' ? '#4c4948' : 'rgba(255,255,255,0.7)'
    var categoriesChart = echarts.init(document.getElementById('categories-chart'), 'light');
    var categoryParentFlag = ${categoryParentFlag}
    var categoriesOption = {
      title: {
        text: '文章分类统计图',
        x: 'center',
        textStyle: {
          color: color
        }
      },
      legend: {
        top: 'bottom',
        data: ${categoryNameJson},
        textStyle: {
          color: color
        }
      },
      tooltip: {
        trigger: 'item'
      },
      series: []
    };
    categoriesOption.series.push(
      categoryParentFlag ? 
      {
        nodeClick :false,
        name: '文章篇数',
        type: 'sunburst',
        radius: ['15%', '90%'],
        center: ['50%', '55%'],
        sort: 'desc',
        data: ${categoryArrParentJson},
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 2,
          emphasis: {
            focus: 'ancestor',
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(255, 255, 255, 0.5)'
          }
        }
      }
      :
      {
        name: '文章篇数',
        type: 'pie',
        radius: [30, 80],
        roseType: 'area',
        label: {
          color: color,
          formatter: '{b} : {c} ({d}%)'
        },
        data: ${categoryArrJson},
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(255, 255, 255, 0.5)'
          }
        }
      }
    )
    categoriesChart.setOption(categoriesOption);
    window.addEventListener('resize', () => { 
      categoriesChart.resize();
    });
    categoriesChart.on('click', 'series', (event) => {
      if(event.data.path) window.location.href = '/' + event.data.path;
    });
  </script>`
}

_config.solitude.yml 主题配置文件引入部分引入

1
2
3

extends:
  head:
    - <script src="https://npm.elemecdn.com/[email protected]/dist/echarts.min.js"></script>

新建一个统计页面
1
hexo new page charts

配置 index.md

<!-- 文章发布时间统计图 --> <!-- 2024-10是从2024年10月开始计算 -->
<div id="posts-chart" data-start="2024-09" style="border-radius: 8px; height: 300px; padding: 10px;"></div>
<!-- 文章标签统计图 --> <!-- data-length="10" 是显示的标签数量 -->
<div id="tags-chart" data-length="10" style="border-radius: 8px; height: 300px; padding: 10px;"></div>
<!-- 文章分类统计图 -->
<div id="categories-chart" data-parent="true" style="border-radius: 8px; height: 300px; padding: 10px;"></div>

# Menu
# 菜单
menu:
  # Home: / # name: link
  文库: # name
    全部文章: /archives/ || fas fa-folder-closed # item name: link || icon
    分类列表: /categories/ || fas fa-clone
    标签列表: /tags/ || fas fa-tags
    统计: /charts/ || fas fa-chart-line  # 添加统计页面

加载动画

修改颜色与闪烁速度：solitude/source/css/_layout/fullpage.styl
修改背景颜色 (透明度)：solitude/source/css/_mode/index.styl

路径：solitude/source/css/_layout/fullpage.styl
.loading-bg 部分针对加载动画颜色的修改（增加透明度）
1
background var(--loading-bg)
.loading-img 部分针对加载动画头像闪烁速度的修改
1
animation-duration 0.5s

路径：solitude/source/css/_mode/index.styl
针对日夜双模式加载动画的颜色（透明度）的修改
[data-theme=dark]
1
--loading-bg #000000dd
[data-theme=light]
1
--loading-bg #ffffffdd

时间轴

在 scripts\tags 目录下新建 timeline.js 文件
在 source/custom/css/_tags 中创建 timeline.styl
新建一个时间轴页面
添加页面

在 scripts\tags 目录下新建 timeline.js 文件，添加如下内容：

title

'use strict';

function postTimeline(args, content) {
  if (args.length > 0) {
    return `<div class="timeline"><p class='p h3'>${args}</p>${content}</div>`;
  } else {
    return `<div class="timeline">${content}</div>`;
  }
}

function postTimenode(args, content) {
  args = args.join(' ').split(',')
  var time = args[0]
  return `<div class="timenode"><div class="meta"><p>${hexo.render.renderSync({text: time, engine: 'markdown'})}</p></div><div class="body">${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}</div></div>`;
}


// {% timeline %}
// ... timenode ...
// {% endtimeline %}
hexo.extend.tag.register('timeline', postTimeline, {ends: true});

// {% timenode time %}
// what happened
// {% endtimenode %}
hexo.extend.tag.register('timenode', postTimenode, {ends: true});

在 source/custom/css/_tags 中创建 timeline.styl 文件，添加如下内容：

title

div
  &.timenode
    position relative
    &:before
      top 0
      height 6px
    &:after
      top 26px
      height calc(100% - 26px)
    &:last-child
      &:after
        height calc(100% - 26px - 16px)
        border-bottom-left-radius 2px
        border-bottom-right-radius 2px
    .meta
      position relative
      color var(--text-color)
      font-size 0.75rem
      line-height 32px
      height 32px
      &:before
        background rgba(68, 215, 182, 0.5)
        width 16px
        height 16px
        border-radius 8px
      &:after
        background #44d7b6
        margin-left 2px
        margin-top 2px
        width 12px
        height 12px
        border-radius 6px
        transform scale(0.5)
      p
        font-weight bold !important
        margin 0 0 0 24px !important
    .body
      margin 4px 0 10px 24px
      padding 10px
      border-radius 12px
      background rgba(127, 127, 127, 0.1)
      display inline-block
      p
        &:first-child
          margin-top 0 !important
        &:last-child
          margin-bottom 0 !important
      .highlight
        background #fff7ea
        filter grayscale(0%)
        figcaption
          background #ffeed2
        .gutter
          background #ffedd0
    &:hover
      .meta
        &:before
          background rgba(68, 215, 182, 0.5)
        &:after
          background #96cec2
          transform scale(1)

div.timenode:before,
div.timenode:after
  content ""
  z-index 1
  position absolute
  background rgba(68, 215, 182, 0.5)
  width 2px
  left 7px

div.timenode .meta,
div.timenode .body
  max-width calc(100% - 24px)

div.timenode .meta:before,
div.timenode .meta:after
  content ""
  position absolute
  top 8px
  z-index 2

[data-theme="dark"]
  div
    &.timenode
      .body
        background #2c2c2c
      &:hover
        .meta
          color #ccd0d7
      .meta
        color rgba(255, 255, 255, 0.6)

新建一个统计页面
1
hexo new page timeline

配置 index.md

{% timeline 站点时间轴 %}
{% timenode 2024-11-03 %}
主题修改：增加本站日志。
{% endtimenode %}
{% timenode 2024-10-09 %}
搭建网站。
{% endtimenode %}
{% endtimeline %}。

# Menu
# 菜单
menu:
  我的: 
    日志: /timeline/ || fas fa-timeline # 添加时间轴页面
    图床: https://7bu.top/ || fas fa-image
    关于: /about/ || fas fa-user

日历侧边栏卡片

添加 schedule.css
添加 schedule.js
引用 chinese-lunar.js 文件
在 _data 文件夹下创建 aside.yml 文件，添加内容
修改 _config.solitude.yaml 文件，在 aside 与 extends 中添加内容

新建文件路径：solitude/source/schedule/schedule.css

schedule.css

.card-widget {
    padding: 10px!important;
    max-height: calc(100vh - 100px);
}

.card-times a, .card-times div {
    color: var(--efu-fontcolor);
}

#card-widget-calendar .item-content {
    display: flex;
}

#calendar-area-left {
    width: 45%;
}

#calendar-area-right {
    width: 55%;
}

#calendar-area-left, #calendar-area-right {
    height: 100%;
    padding: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#calendar-main {
    width: 100%;
}

#calendar-week {
    height: 1.2rem;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 700;
    align-items: center;
    display: flex;
}

#calendar-date {
    height: 3rem;
    line-height: 1.3;
    font-size: 64px;
    letter-spacing: 3px;
    color: var(--efu-main);
    font-weight: 700;
    align-items: center;
    display: flex;
    position: absolute;
    top: calc(50% - 2.1rem);
}

#calendar-lunar, #calendar-solar {
    height: 1rem;
    font-size: 12px;
    align-items: center;
    display: flex;
    position: absolute;
}

#calendar-solar {
    bottom: 2.1rem;
}

#calendar-lunar {
    bottom: 1rem;
    color: var(--efu-secondtext);
}

#calendar-main a {
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    font-size: 12px;
    line-height: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#calendar-main a.now {
    background: var(--efu-main);
    color: var(--efu-card-bg);
}

#calendar-main .calendar-rh a {
    color: var(--efu-secondtext);
}

.calendar-r0, .calendar-r1, .calendar-r2, .calendar-r3, .calendar-r4, .calendar-r5, .calendar-rh {
    height: 1.2rem;
    display: flex;
}

.calendar-d0, .calendar-d1, .calendar-d2, .calendar-d3, .calendar-d4, .calendar-d5, .calendar-d6 {
    width: calc(100% / 7);
    display: flex;
    justify-content: center;
    align-items: center;
}

#card-widget-schedule .item-content {
    display: flex;
}

#schedule-area-left, #schedule-area-right {
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#schedule-area-left {
    width: 30%;
}

#schedule-area-right {
    width: 70%;
    padding: 0 5px;
}

.schedule-r0, .schedule-r1, .schedule-r2 {
    height: 2rem;
    width: 100%;
    align-items: center;
    display: flex;
}

.schedule-d0 {
    width: 30px;
    margin-right: 5px;
    text-align: center;
    font-size: 12px;
}

.schedule-d1 {
    width: calc(100% - 35px);
    height: 1.5rem;
    align-items: center;
    display: flex;
}

progress::-webkit-progress-bar {
    background: linear-gradient(to right, var(--efu-main-op-deep), var(--efu-main-op), var(--efu-main-op-light));
    border-radius: 5px;
    overflow: hidden;
}

progress::-webkit-progress-value {
    background: var(--efu-main);
    border-radius: 5px;
}

.aside-span1, .aside-span2 {
    height: 1rem;
    font-size: 12px;
    z-index: 1;
    display: flex;
    align-items: center;
    position: absolute;
}

.aside-span1 {
    margin-left: 5px;
}

.aside-span2 {
    right: 20px;
    color: var(--efu-secondtext);
}

.aside-span2 a {
    margin: 0 3px;
}

#pBar_month, #pBar_week, #pBar_year {
    width: 100%;
    border-radius: 5px;
    height: 100%;
}

#schedule-date, #schedule-days, #schedule-title {
    display: flex;
    align-items: center;
}

#schedule-title {
    height: 25px;
    line-height: 1;
    font-size: 14px;
    font-weight: 700;
}

#schedule-days {
    height: 40px;
    line-height: 1;
    font-size: 30px;
    font-weight: 900;
    color: var(--efu-main);
}

#schedule-date {
    height: 20px;
    line-height: 1;
    font-size: 12px;
    color: var(--efu-secondtext);
}

新建文件路径：solitude/source/schedule/schedule.js

schedule.js

document.addEventListener("DOMContentLoaded", () => {
    initializeCard();
});

document.addEventListener("pjax:complete", () => {
    initializeCard();
});

function initializeCard() {
    cardTimes();
    cardRefreshTimes();
}

let year, month, week, date, dates, weekStr, monthStr, asideTime, asideDay, asideDayNum, animalYear, ganzhiYear, lunarMon, lunarDay;
const now = new Date();

function cardRefreshTimes() {
    const e = document.getElementById("card-widget-schedule");
    if (e) {
        asideDay = (now - asideTime) / 1e3 / 60 / 60 / 24;
        e.querySelector("#pBar_year").value = asideDay;
        e.querySelector("#p_span_year").innerHTML = (asideDay / 365 * 100).toFixed(1) + "%";
        e.querySelector(".schedule-r0 .schedule-d1 .aside-span2").innerHTML = `还剩<a> ${(365 - asideDay).toFixed(0)} </a>天`;
        e.querySelector("#pBar_month").value = date;
        e.querySelector("#pBar_month").max = dates;
        e.querySelector("#p_span_month").innerHTML = (date / dates * 100).toFixed(1) + "%";
        e.querySelector(".schedule-r1 .schedule-d1 .aside-span2").innerHTML = `还剩<a> ${(dates - date)} </a>天`;
        e.querySelector("#pBar_week").value = week === 0 ? 7 : week;
        e.querySelector("#p_span_week").innerHTML = ((week === 0 ? 7 : week) / 7 * 100).toFixed(1) + "%";
        e.querySelector(".schedule-r2 .schedule-d1 .aside-span2").innerHTML = `还剩<a> ${(7 - (week === 0 ? 7 : week))} </a>天`;
    }
}

function cardTimes() {
    year = now.getFullYear();
    month = now.getMonth();
    week = now.getDay();
    date = now.getDate();

    const e = document.getElementById("card-widget-calendar");
    if (e) {
        const isLeapYear = year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
        weekStr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][week];
        const monthData = [
            { month: "1月", days: 31 },
            { month: "2月", days: isLeapYear ? 29 : 28 },
            { month: "3月", days: 31 },
            { month: "4月", days: 30 },
            { month: "5月", days: 31 },
            { month: "6月", days: 30 },
            { month: "7月", days: 31 },
            { month: "8月", days: 31 },
            { month: "9月", days: 30 },
            { month: "10月", days: 31 },
            { month: "11月", days: 30 },
            { month: "12月", days: 31 }
        ];
        monthStr = monthData[month].month;
        dates = monthData[month].days;

        const t = (week + 8 - date % 7) % 7;
        let n = "", d = false, s = 7 - t;
        const o = (dates - s) % 7 === 0 ? Math.floor((dates - s) / 7) + 1 : Math.floor((dates - s) / 7) + 2;
        const c = e.querySelector("#calendar-main");
        const l = e.querySelector("#calendar-date");

        l.style.fontSize = ["64px", "48px", "36px"][Math.min(o - 3, 2)];

        for (let i = 0; i < o; i++) {
            if (!c.querySelector(`.calendar-r${i}`)) {
                c.innerHTML += `<div class='calendar-r${i}'></div>`;
            }
            for (let j = 0; j < 7; j++) {
                if (i === 0 && j === t) {
                    n = 1;
                    d = true;
                }
                const r = n === date ? " class='now'" : "";
                if (!c.querySelector(`.calendar-r${i} .calendar-d${j} a`)) {
                    c.querySelector(`.calendar-r${i}`).innerHTML += `<div class='calendar-d${j}'><a${r}>${n}</a></div>`;
                }
                if (n >= dates) {
                    n = "";
                    d = false;
                }
                if (d) {
                    n += 1;
                }
            }
        }

        const lunarDate = chineseLunar.solarToLunar(new Date(year, month, date));
        animalYear = chineseLunar.format(lunarDate, "A");
        ganzhiYear = chineseLunar.format(lunarDate, "T").slice(0, -1);
        lunarMon = chineseLunar.format(lunarDate, "M");
        lunarDay = chineseLunar.format(lunarDate, "d");

        const newYearDate = new Date("2025/01/28 00:00:00");
        const daysUntilNewYear = Math.floor((newYearDate - now) / 1e3 / 60 / 60 / 24);
        asideTime = new Date(`${new Date().getFullYear()}/01/01 00:00:00`);
        asideDay = (now - asideTime) / 1e3 / 60 / 60 / 24;
        asideDayNum = Math.floor(asideDay);
        const weekNum = week - asideDayNum % 7 >= 0 ? Math.ceil(asideDayNum / 7) : Math.ceil(asideDayNum / 7) + 1;

        e.querySelector("#calendar-week").innerHTML = `第${weekNum}周&nbsp;${weekStr}`;
        e.querySelector("#calendar-date").innerHTML = date.toString().padStart(2, "0");
        e.querySelector("#calendar-solar").innerHTML = `${year}年${monthStr}&nbsp;第${asideDay.toFixed(0)}天`;
        e.querySelector("#calendar-lunar").innerHTML = `${ganzhiYear}${animalYear}年&nbsp;${lunarMon}${lunarDay}`;
        document.getElementById("schedule-days").innerHTML = daysUntilNewYear;
    }
}

修改 _config.solitude.yaml 文件，在 aside 与 extends 中添加以下内容：

1
2
3

extends:
  body:
  +  - <script src="https://open.lightxi.com/unpkg/[email protected]/lib/chinese-lunar.js"></script>

在 _data 文件夹下创建 aside.yml 文件，并添加以下内容：

aside.yml

- name: schedule
  id: card-widget-schedule
  content_html: |
    <div id="schedule-area-left">
      <div id="schedule-title">距离除夕</div>
      <div id="schedule-days"></div>
      <div id="schedule-date">2025-01-28</div>
    </div>
    <div id="schedule-area-right">
      <div class="schedule-r0">
        <div class="schedule-d0">本年</div>
        <div class="schedule-d1">
          <span id="p_span_year" class="aside-span1"></span>
          <span class="aside-span2">还剩<a></a>天</span>
          <progress max="365" id="pBar_year"></progress>
        </div>
      </div>
      <div class="schedule-r1">
        <div class="schedule-d0">本月</div>
        <div class="schedule-d1">
          <span id="p_span_month" class="aside-span1"></span>
          <span class="aside-span2">还剩<a></a>天</span>
          <progress max="30" id="pBar_month"></progress>
        </div>
      </div>
      <div class="schedule-r2">
        <div class="schedule-d0">本周</div>
        <div class="schedule-d1">
          <span id="p_span_week" class="aside-span1"></span>
          <span class="aside-span2">还剩<a></a>天</span>
          <progress max="7" id="pBar_week"></progress>
        </div>
      </div>
    </div>

- name: calendar
  id: card-widget-calendar
  content_html: |
    <div id="calendar-area-left">
      <div id="calendar-week"></div>
      <div id="calendar-date" style="font-size: 48px;"></div>
      <div id="calendar-solar"></div>
      <div id="calendar-lunar"></div>
    </div>
    <div id="calendar-area-right">
      <div id="calendar-main">
      </div>
    </div>

修改 _config.solitude.yaml 文件，在 aside 与 extends 中添加以下内容：

aside:
  home:
+   noSticky: "about,calendar,schedule"
    Sticky: "allInfo"

extends:
  head:
+   - <link rel="stylesheet" href="/schedule/schedule.css">
  body:
+   - <script src="/schedule/schedule.js"></script>
+   - <script src="https://open.lightxi.com/unpkg/[email protected]/lib/chinese-lunar.js"></script>

自定义字体

创建 custom.css 文件
在主题配置文件中引入字体
字体文件存放
本文参考教程：站点美化｜自定义站点字体

在 solitude/source/css 文件夹下新增 custom.css 文件，若已存在 custom.css 文件，则在文件内新增以下内容

@font-face {
  /* 为载入的字体取名字(随意) */
  font-family: '你的自定义字体名';	
  /* 字体文件地址(相对或者绝对路径都可以) */
  src: url(字体路径/字体文件名.文件后缀);
  /* 定义加粗样式(加粗多少) */
  font-weight: normal;
  /* 定义字体样式(斜体/非斜体) */
  font-style: normal;
  /* 定义显示样式 */
  font-display: block;
}

参数说明

参数	说明
font-family	属性值中使用 webfont 来声明使用的是服务器端字体，即设置文本的字体名称。
src	属性值中首先指定了字体文件所在的路径。
format	声明字体文件的格式，可以省略文件格式的声明，单独使用 src 属性值。
font-style	设置文本样式。取值：normal: 不使用斜体；italic: 使用斜体；oblique: 使用倾斜体；inherit：从父元素继承。
支持格式	.eot (老版本 IE)，.otf，.ttf，.woff，*.woff2 (推荐)

在主题配置文件_confug.solitude.yml 中找到字体引入部分，在对应配置的最前面写上你的自定义字体名称

font:
  font-size: 16px
  code-font-size: 16px
  font-family: '自定义字体名称,PingFang SC,Hiragino Sans GB,Microsoft YaHei'
  code-font-family: '自定义字体名称,monospace, monospace'

在主题配置文件_confug.solitude.yml 中引入 custom.css，若此前已引入该文件则无需重新引入

1
2
3

extends:
  head: # 在head中插入 / Insert in head
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

如果在网上找到了他人公开的在线字体链接，可将该链接写入 custom.css 文件中 src:url() 的括号中
还可使用 github＋cloudflare pages 的形式引入字体文件，如 DouyinSansBold.otf

github 新建一个仓库，本教程以 fonts 命名仓库
将字体文件上传至对应仓库
在 cloudflare 上，新建 Pages，找到自己对应的 github 仓库（fonts）
无需配置任何环境变量，直接确认部署（部署后需要等待几分钟才会生效）
访问 https://cloudfalse分配的域名/DouyinSansBold.otf 链接，如链接正确则可能会触发自动下载（注意此处博主是将字体文件直接上传至仓库的根目录）
将对应链接写入 custom.css 文件的 url 引入括号内
部署，查看效果
DouyinSansBold.otf 下载路径：点击直接下载

当前文字及本站所用字体便是抖音美好体，字体下载见字体存放

音乐馆正序播放

音乐馆页面按照列表顺序播放

路径：solitude/layout/includes/page/music.pug

音乐馆页面按照列表顺序播放（random → list）

1	meting-js(id=theme.music.id server=theme.music.server type=theme.music.type mutex=theme.music.mutex ? "true" : "false" volume=theme.music.volume preload="none" data-lrctype="0" order="list")

藏宝阁 / 兴趣天地显示 desc

路径：你所创建的藏宝阁 / 兴趣天地页 index.md 中的 <style> 部分

display: none 改为 display: auto

1
2
3

.card_box:hover .card_mask {
    display: auto !important;
}