网站魔改

1. 自定义字体

1.1 导入自定义字体

本文中[BlogRoot]代表博客根目录，字体文件如果是本地资源，新建并导入至[BlogRoot]\source\font\即可

声明：非商免字体未经授权仅限个人使用，不得用于商业用途！

  1. 准备好字体文件后，在[BlogRoot]\source\css\custom.css（没有就自己创建）中添加以下代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    @font-face {
      /* 为载入的字体取名字(随意) */
      font-family: 'YSHST';	
      /* 字体文件地址(相对或者绝对路径都可以) */
      src: url(/font/优设好身体.woff2);
      /* 定义加粗样式(加粗多少) */
      font-weight: normal;
      /* 定义字体样式(斜体/非斜体) */
      font-style: normal;
      /* 定义显示样式 */
      font-display: block;
    }
  2. 各个属性的定义：
    • font-family属性值中使用webfont来声明使用的是服务器端字体，即设置文本的字体名称。
    • src属性值中首先指定了字体文件所在的路径。
    • format声明字体文件的格式，可以省略文件格式的声明，单独使用src属性值。
    • font-style：设置文本样式。取值：normal:不使用斜体；italic:使用斜体；oblique:使用倾斜体；inherit：从父元素继承。
    • 支持格式：.eot(老版本IE)，.otf，.ttf，.woff，*.woff2(推荐)
  3. 创建[BlogRoot]\source\js\font.css并添加以下代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 设置字体
    if (localStorage.getItem("font") == undefined) {
        localStorage.setItem("font", "LXGW");
      }
      setFont(localStorage.getItem("font"));
      function setFont(n) {
        localStorage.setItem("font", n)
        if (n == "default") {
          document.documentElement.style.setProperty('--global-font', '-apple-system');
          document.body.style.fontFamily = "-apple-system, Consolas_1, BlinkMacSystemFont, 'Segoe UI' , 'Helvetica Neue' , Lato, Roboto, 'PingFang SC' , 'Microsoft JhengHei' , 'Microsoft YaHei' , sans-serif";
        }
        else {
          document.documentElement.style.setProperty('--global-font', n);
          document.body.style.fontFamily = "var(--global-font),-apple-system, IBM Plex Mono ,monosapce,'微软雅黑', sans-serif";
        }
        try { setFontBorder(); } catch (err) { };
      }

    因为主题自带字体的原因，按照大多数教程直接修改并没有效果，故加这段代码强制更换，并自定义--global-font方便全局对字体的调用

  4. 在主题配置文件_config.[theme].yml中的font配置项以及blog_title_font配置项写上你刚刚引入的字体名称，系统会根据先后次序从前到后依次加载这些字体：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    # Global font settings
    # Don't modify the following settings unless you know how they work (非必要不要修改)
    font:
      global-font-size: '15px'
      code-font-size: '14px'
      font-family: var(--global-font), -apple-system, 'Quicksand', 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;
      code-font-family: Consolas, "Microsoft YaHei", Menlo, "PingFang SC", "Microsoft JhengHei", sans-serif

    # 左上角網站名字 主頁居中網站名字
    blog_title_font:
      font_link: 
      font-family: --global-font, -apple-system, BlinkMacSystemFont, "Segoe UI" , "Helvetica Neue" , Lato, Roboto, "PingFang SC" , "Microsoft JhengHei" , "Microsoft YaHei" , sans-serif
  5. 重启项目即可
    1
    hexo cl; hexo s

1.2 JS文件与CSS文件的引入

1
2
3
4
5
6
7
8
9
10
11
12
13
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # 自定义css
    - <link rel="stylesheet" href="/css/custom.css">
    # - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

  bottom:
    # 自定义js
    - <script src="/js/font.js"></script>
    # - <script src="/js/xxx"></script>

2. 添加欢迎信息

2.1 获取位置key

参考： 给博客添加腾讯地图定位并制作个性欢迎

获取API Key：进入腾讯位置服务应用管理界面，点击创建应用，应用名称和类型随便填。在新创建的应用中点击添加key，产品选择WebServiceAPI，域名白名单填自己的域名或不填。把得到的key记下。

如果开启白名单记得把localhost也加上,以便在本地预览查看效果。


code

2.2 添加相应文件并引入

  1. 新建[BlogRoot]\source\js\txmap.js，并写入如下代码，记住替换key的内容：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    //get请求
    $.ajax({
        type: 'get',
        url: 'https://apis.map.qq.com/ws/location/v1/ip',
        data: {
          key: '',  // 这里要写你的KEY!!!
          output: 'jsonp',
        },
        dataType: 'jsonp',
        success: function (res) {
          ipLoacation = res;
        }
    })
    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() {
      
        let dist = getDistance(000.00000000, 00.00000000, ipLoacation.result.location.lng, ipLoacation.result.location.lat); //这里换成自己的经纬度
        let pos = ipLoacation.result.ad_info.nation;   
        let ip;
        let posdesc;
        //根据国家、省份、城市信息自定义欢迎语
        switch (ipLoacation.result.ad_info.nation) {
          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 = ipLoacation.result.ad_info.province + " " + ipLoacation.result.ad_info.city + " " + ipLoacation.result.ad_info.district;
            ip = ipLoacation.result.ip;
            switch (ipLoacation.result.ad_info.province) {
              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 (ipLoacation.result.ad_info.city) {
                  case "南京市":
                    posdesc = "这是我挺想去的城市啦。";
                    break;
                  case "苏州市":
                    posdesc = "上有天堂，下有苏杭。";
                    break;
                  default:
                    posdesc = "散装是必须要散装的。";
                    break;
                }
                break;
              case "浙江省":
                posdesc = "东风渐绿西湖柳，雁已还人未南归。";
                break;
              case "河南省":
                switch (ipLoacation.result.ad_info.city) {
                  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 "江西省":
                switch (ipLoacation.result.ad_info.city) {
                  case "南昌市":
                    posdesc = "落霞与孤鹜齐飞，秋水共长天一色。";
                    break;
                  case "九江市":
                    posdesc = "九江悠悠万古情 古人行尽今人行。";
                    break;
                  default:
                    posdesc = "千里来寻故地，旧貌变新颜。";
                    break;
                }
                break;
              case "山东省":
                posdesc = "遥望齐州九点烟，一泓海水杯中泻。";
                break;
              case "湖北省":
                posdesc = "来碗热干面！";
                break;
              case "湖南省":
                posdesc = "74751，长沙斯塔克。";
                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() < 15) timeChange = "<span>下午好</span>，懒懒地睡个午觉吧！";
        else if (date.getHours() >= 15 && date.getHours() < 16) timeChange = "<span>三点几啦</span>，一起饮茶呀！";
        else if (date.getHours() >= 16 && date.getHours() < 19) timeChange = "<span>夕阳无限好！</span>";
        else if (date.getHours() >= 19 && date.getHours() < 24) timeChange = "<span>晚上好</span>，夜生活嗨起来！";
        else timeChange = "夜深了，早点休息，少熬夜。";
      
        try {
          //自定义文本和需要放的位置
          document.getElementById("welcome-info").innerHTML =
            `<b><center>🎉 欢迎信息 🎉</center>&emsp;&emsp;欢迎来自 <span style="color: #333333;font-weight: bold;">${pos}</span> 的小伙伴，${timeChange}您现在距离站长约 <span style="color: #333333">${dist}</span> 公里，当前的IP地址为： <span style="color: #333333">${ip}</span>。<center> ${posdesc}</center></b>`;
        } catch (err) {
          // console.log("Pjax无法获取#welcome-info元素🙄🙄🙄")
        }
    }

    window.onload = showWelcome;
      // 如果使用了pjax在加上下面这行代码
    document.addEventListener('pjax:complete', showWelcome);

  2. 在主题配置文件[BlogRoot]\_config.[theme].yml中引入jQuery依赖和刚刚的js文件：
    1
    2
    3
    4
    inject: 
      bottom: 
    +    - <script src="https://cdn.staticfile.org/jquery/3.6.3/jquery.min.js"></script> # jQuery
    +    - <script async data-pjax src="/js/txmap.js"></script> # 腾讯位置API
  3. 在需要展示文本的容器上添加相应id（welcome-info）就可以了，例如我想添加在网站公告栏信息的下方，于是就在
    [BlogRoot\themes\butterfly\layout\includes\widget\card_announcement.pug的最后一行加上这个，缩进与上一行相同即可
    1
    2
    3
        .announcement_content!= theme.aside.card_announcement.content
        //- 添加欢迎访客的信息
    +    #welcome-info
  4. 在custom.css自定义样式里添加如下代码，可以根据你自己的喜好去改
    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* 欢迎信息 */
    #welcome-info {
      background: linear-gradient(45deg, #b9f4f3, #e3fbf9);
      border-radius: 18px;
      padding: 8px;
    }
    [data-theme="dark"] #welcome-info {
      background: #212121;
    }
  5. hexo三连
    1
    hexo cl; hexo g; hexo s

    注意：填写key需要稍等一会，未出现信息大概率是位置信息还未获得

3. Live2D教程

详细参考：OhMyLive2D

3.1 ohMyLive2D

效果较好，高度自定义

  1. 在Hexo根目录[BlogRoot]下打开终端，输入以下指令安装必要插件：
1
npm install hexo-oh-my-live2d
  1. 打开站点配置文件[BlogRoot]\config.yml
    把以下内容复制到最底部。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
# hexo-oh-my-live2d 配置
OhMyLive2d:
  enable: true
  CDN: https://unpkg.com/oh-my-live2d
  option:
    dockedPosition: 'right' # 模型停靠位置 默认值: 'right' 可选值: 'left' | 'right'
    # menus: |
    #   (currentModel) =>{
    #     console.log(currentModel);
    #   }

    # menus:
    #   items: |
    #     (defaultItems)=>{
    #      return [
    #        ...defaultItems,
    #        {
    #          id: 'github',
    #          icon: 'github-fill',
    #          title: '我的github',
    #          onClick: ()=>window.open('https://github.com/hacxy')
    #        }
    #      ]
    #     }

    #   items:
    #     - id: 'github'
    #       icon: 'github-fill'
    #       title: '我的github'
    #       onClick: ()=>window.open('https://github.com/hacxy')

    mobileDisplay: true # 是否在移动端显示
    models:
      - path: https://unpkg.com/[email protected]/assets/shizuku.model.json
        mobilePosition: [-10, 23] # 移动端时模型在舞台中的位置。 默认值: [0,0] [横坐标, 纵坐标]
        mobileScale: 0.1 # 移动端时模型的缩放比例 默认值: 0.1
        mobileStageStyle: # 移动端时舞台的样式
          width: 180
          height: 166
        motionPreloadStrategy: IDLE # 动作预加载策略 默认值: IDLE 可选值: ALL | IDLE | NONE
        position: [-10, 35] # 模型在舞台中的位置。 默认值: [0,0] [横坐标, 纵坐标]
        scale: 0.15 # 模型的缩放比例 默认值: 0.1
        # showHitAreaFrames: false # 是否显示点击区域 默认值: false
        stageStyle:
          width: 250
          height: 250
      - path: 'https://unpkg.com/[email protected]/assets/koharu.model.json'
        scale: 0.12
        position: [0, 0]
        stageStyle:
          width: 250
        mobileScale: 0.08
        mobilePosition: [0, 0]
        mobileStageStyle: # 移动端时舞台的样式
          width: 180
    parentElement: document.body #为组件提供一个父元素，如果未指定则默认挂载到 body 中
    primaryColor: 'var(--btn-bg)' # 主题色 支持变量
    sayHello: false # 是否在初始化阶段打印项目信息
    tips:
      style:
        width: 230
        height: 120
        left: calc(50% - 20px)
        top: -100px
      mobileStyle:
        width: 180
        height: 80
        left: calc(50% - 30px)
        top: -100px
      idleTips:
        interval: 15000
        # message:
        #   - 你好呀~
        #   - 欢迎来到我的小站~
        # 自定义提示语 需要 引入 axios 库 ,也可以使用其他方法
        message: |
          function(){
            return axios.get('https://v1.hitokoto.cn?c=i')
              .then(function (response) {
                return response.data.hitokoto ;
              })
              .catch(function (error) {
                console.error(error);
              });
          }
        # wordTheDay: true
        # 自定义  https://v1.hitokoto.cn  数据
        # wordTheDay: |
        #   function(wordTheDayData){
        #     return `${wordTheDayData.hitokoto}    by.${wordTheDayData.from}`;
        #   }
  # 具体方法请看: https://oml2d.com/guide/loadModel.html#oml2d-%E5%AE%9E%E4%BE%8B
  # then: |
  #    oml2d.onStageSlideIn(() => {
  #    oml2d.tipsMessage('Oh My Live2D !!!', 3000, 10);
  #    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
# _config.yml
OhMyLive2d:
  enable: true
  CDN: https://registry.npmmirror.com/oh-my-live2d/latest/files
  # CDN: https://registry.npmmirror.com/oh-my-live2d/0.13/files/dist/index.min.js
  option:
    # importType: 'cubism2' #  导入类型, 默认使用全量导入: complete , 可选值: complete, cubism2, cubism5
    libraryUrls: # 自定义 Cubism SDK 外部资源地址
      complete: https://registry.npmmirror.com/oh-my-live2d/latest/files/lib/complete.js
      cubism2: https://registry.npmmirror.com/oh-my-live2d/latest/files/lib/cubism2.js
      cubism5: https://registry.npmmirror.com/oh-my-live2d/latest/files/lib/cubism5.js
    # menus:
    # items: |
    #   (defaultItems)=>{
    #    return [
    #      ...defaultItems,
    #      {
    #        id: 'github',
    #        icon: 'github-fill',
    #        title: '我的github',
    #        onClick: ()=>window.open('https://github.com/hacxy')
    #      }
    #    ]
    #   }

    # items:
    #   - id: 'github'
    #     icon: 'github-fill'
    #     title: '我的github'
    #     onClick: ()=>window.open('https://github.com/hacxy')

    mobileDisplay: true # 是否在移动端显示
    models:
      - path: https://registry.npmmirror.com/live2d-widget-model-shizuku/1.0.5/files/assets/shizuku.model.json
        mobilePosition: [-10, 23] # 移动端时模型在舞台中的位置。 默认值: [0,0] [横坐标, 纵坐标]
        mobileScale: 0.1 # 移动端时模型的缩放比例 默认值: 0.1
        mobileStageStyle: # 移动端时舞台的样式
          width: 180
          height: 166
        motionPreloadStrategy: IDLE # 动作预加载策略 默认值: IDLE 可选值: ALL | IDLE | NONE
        position: [-10, 35] # 模型在舞台中的位置。 默认值: [0,0] [横坐标, 纵坐标]
        scale: 0.15 # 模型的缩放比例 默认值: 0.1
        # showHitAreaFrames: false # 是否显示点击区域 默认值: false
        stageStyle:
          width: 250
          height: 250
      - path: 'https://registry.npmmirror.com/live2d-widget-model-koharu/1.0.5/files/assets/koharu.model.json'
        scale: 0.12
        position: [0, 0]
        stageStyle:
          width: 250
        mobileScale: 0.08
        mobilePosition: [0, 0]
        mobileStageStyle: # 移动端时舞台的样式
          width: 180
      - path: 'https://registry.npmmirror.com/live2d-widget-model-haruto/1.0.5/files/assets/haruto.model.json'
        scale: 0.12
        position: [0, 0]
        mobileScale: 0.08
        mobilePosition: [0, 0]
        mobileStageStyle: # 移动端时舞台的样式
          width: 180
        stageStyle:
          width: 250
    parentElement: document.body #为组件提供一个父元素，如果未指定则默认挂载到 body 中
    primaryColor: 'var(--btn-bg)' # 主题色 支持变量
    sayHello: false # 是否在初始化阶段打印项目信息
    tips:
      style:
        width: 230
        height: 120
        left: calc(50% - 20px)
        top: -100px
      mobileStyle:
        width: 180
        height: 80
        left: calc(50% - 30px)
        top: -100px
      idleTips:
        interval: 15000
        # message:
        #   - 你好呀~
        #   - 欢迎来到我的小站~
        # 自定义提示语 需要 引入 axios 库 ,也可以使用其他方法
        message: |
          function(){
            return axios.get('https://v1.hitokoto.cn?c=i')
              .then(function (response) {
                return response.data.hitokoto ;
              })
              .catch(function (error) {
                console.error(error);
              });
          }
        # wordTheDay: true
        # 自定义  https://v1.hitokoto.cn  数据
        # wordTheDay: |
        #   function(wordTheDayData){
        #     return `${wordTheDayData.hitokoto}    by.${wordTheDayData.from}`;
        #   }
  # then: |
  #   (oml2d)=>{
  #      setTimeout(() => {
  #     oml2d.tipsMessage('hello world', 3000, 10);
  #   }, 8000);
  #   }

模型官网

  1. 完成后保存修改，hexo三连

3.2 更换模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
models:
  - path: https://registry.npmmirror.com/live2d-widget-model-shizuku/1.0.5/files/assets/shizuku.model.json
    mobilePosition: [-10, 23] # 移动端时模型在舞台中的位置。 默认值: [0,0] [横坐标, 纵坐标]
    mobileScale: 0.1 # 移动端时模型的缩放比例 默认值: 0.1
    mobileStageStyle: # 移动端时舞台的样式
      width: 180
      height: 166
    motionPreloadStrategy: IDLE # 动作预加载策略 默认值: IDLE 可选值: ALL | IDLE | NONE
    position: [-10, 35] # 模型在舞台中的位置。 默认值: [0,0] [横坐标, 纵坐标]
    scale: 0.15 # 模型的缩放比例 默认值: 0.1
    # showHitAreaFrames: false # 是否显示点击区域 默认值: false
    stageStyle:
      width: 250
      height: 250
+ - path:

3.3 模型配置

参考配置选项。

4. 添加灯笼

给过年添加一点氛围，废话不说直接开始

  1. 新建CSS样式：在[BlogRoot]\themes\[themename]\source\css文件下新建 CSS 文件，并命名为 lantern.css，将以下代码复制到新建的lantern.css中：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
/* 灯笼 Start */

* {
    box-sizing: border-box;
}


/* 移动端显示/隐藏 /none/block，可自定义显示一个 */

@media screen and (max-width: 970px) {
    .d-box1 {
        display: none;
    }
    .dengl .d-box {
        right: 0px;
        top: -40px;
        /* 自定义灯笼大小 */
        transform: scale(0.4);
    }
}

.dengl {
    position: fixed;
    z-index: 9;
}


/* .d-box,.d-box1{
    z-index: 9;
  } */

.d-box {
    position: fixed;
    /* 自定义灯笼的位置 */
    right: 85px;
    top: 0;
    /* 自定义灯笼大小 */
    transform: scale(0.8);
}

.d-box1 {
    position: fixed;
    /* 自定义灯笼的位置 */
    left: 0;
    top: 0;
    /* 自定义灯笼大小 */
    transform: scale(0.8);
}


/* 修改灯笼的字体 */

.d-box .d1::after {
    content: '兔年大吉';
}

.d-box1 .d1::after {
    content: '心想事成';
}

.d-box1 .d1,
.d-box1 .d2,
.d-box1 .d1::after,
.d-box1 .d1::before,
.d-box1 .d2::after,
.d-box1 .d2::before,
.d-box1 .d2 ul li span,
.d-box1 .d1 ul li span {
    background-color: #f01f1a;
    border: 5px solid #5c1713;
    /* 自定义灯笼的阴影 */
    /* box-shadow: 0 5px 61px rgba(255, 240, 29, 0.88); */
}

.d1,
.d2,
.d1::after,
.d1::before,
.d2::after,
.d2::before,
.d2 ul li span,
.d1 ul li span {
    background-color: #f01f1a;
    border: 5px solid #5c1713;
    /* 自定义灯笼的阴影 */
    box-shadow: 0 5px 61px #ff1d1d;
}

.d1::after,
.d1::before {
    height: 82px;
    position: absolute;
    top: 0;
    content: '';
    font-size: 17px;
}

.d1,
.d2 {
    position: relative;
    animation: swing 4s linear infinite;
    transform-origin: top center;
}

.d1 {
    width: 160px;
    top: 100px;
    height: 90px;
    right: 0;
    border-radius: 80px/49px;
}

.d1::before {
    top: -5px;
    right: 7px;
    width: 123px;
    border-radius: 62px/52px;
}

.d1::after {
    text-align: center;
    line-height: 90px;
    color: #ffe31d;
    font-weight: 600;
    top: -5px;
    right: 35px;
    width: 69px;
    border-radius: 41px/49px;
}

.d1 span {
    position: absolute;
    top: 84px;
    left: 49px;
    width: 50px;
    height: 16px;
    z-index: 2;
    border-radius: 0 0 10px 10px;
    background-color: #ffe31d;
    border: 5px solid #5c1713;
}

.d1 span:nth-child(2) {
    top: -17px;
    border-radius: 10px 10px 0 0;
}

.d1 p {
    position: absolute;
    top: -31px;
    left: 13px;
    width: 16px;
    height: 13px;
    border-radius: 25px;
    border: 5px solid #5c1713;
    border-bottom: 0;
}

.d1 ul {
    position: relative;
    top: 80px;
    left: 13px;
    width: 54px;
    display: flex;
}

.d1 li {
    flex: 1;
    list-style: none;
    height: 24px;
    margin: 0px 2.5px;
    width: 5px;
    border-radius: 5px;
    border-right: 3.5px solid #5c1713;
}

.d1 ul li:nth-child(3) {
    content: '';
    height: 50px;
}

.d1 ul li:nth-child(3)::before {
    content: '';
    position: absolute;
    top: 47px;
    left: 54px;
    width: 5px;
    height: 5px;
    border-radius: 5px 5px 10px 10px;
    background-color: #ffe31d;
    border: 5px solid #5c1713;
}

.d1 ul li span {
    position: absolute;
    top: 20px;
    left: 55px;
    width: 13px;
    height: 19px;
    border-radius: 14px;
}

.d2::after,
.d2::before {
    position: absolute;
    height: 128px;
    top: -3px;
    content: '';
}

.d2 {
    width: 199px;
    height: 128px;
    top: -61px;
    right: -122px;
    border-radius: 98px/70px;
}

.d2::before {
    top: -8px;
    right: 18px;
    width: 143px;
    border-radius: 69px/67px;
}


/* 自定义背景图片 */

.d2::after {
    top: -8px;
    right: 51px;
    width: 75px;
    border-radius: 57px/89px;
    background-position: center;
    background-size: 105px auto;
}

.d2 span {
    position: absolute;
    top: 123px;
    left: 68px;
    width: 55px;
    height: 14px;
    z-index: 2;
    border-radius: 0 0 10px 10px;
    background-color: #ffe31d;
    border: 5px solid #5c1713;
}

.d2 span:nth-child(2) {
    top: -16px;
    border-radius: 10px 10px 0 0;
}

.d2 p {
    position: absolute;
    top: -32px;
    left: 13px;
    width: 19px;
    height: 13px;
    border-radius: 25px;
    border: 5px solid #5c1713;
    border-bottom: 0;
}

.d2 ul {
    position: relative;
    top: 121px;
    left: 32px;
    width: 53px;
    display: flex;
}

.d2 li {
    flex: 1;
    list-style: none;
    height: 24px;
    margin: 0px 3px;
    width: 4px;
    border-radius: 7px;
    border-right: 3px solid #5c1713;
}

.d2 ul li:nth-child(3) {
    content: '';
    height: 60px;
}

.d2 ul li:nth-child(3)::before {
    content: '';
    position: absolute;
    top: 59px;
    left: 53px;
    width: 9px;
    height: 6px;
    border-radius: 5px 5px 10px 10px;
    background-color: #ffe31d;
    border: 5px solid #5c1713;
}

.d2 ul li span {
    position: absolute;
    top: 21px;
    left: 54px;
    width: 18px;
    height: 17px;
    border-radius: 20px;
}

@keyframes swing {
    0% {
        transform: rotate(0);
    }
    25% {
        transform: rotate(-13deg);
    }
    50% {
        transform: rotate(0);
    }
    75% {
        transform: rotate(13deg);
    }
    100% {
        transform: rotate(0);
    }
}

/* 灯笼 END */
  1. 在[BlogRoot]\themes\[themename]\source\css\index.styl文件最后加入如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
// search
if hexo-config('algolia_search.enable')
  @import '_search/index'
  @import '_search/algolia'

if hexo-config('local_search') && hexo-config('local_search.enable')
  @import '_search/index'
  @import '_search/local-search'

+// 灯笼
+if hexo-config('lantern') && hexo-config('lantern.enable')
+  @import './lantern.css'
  1. 新建PUG：在[BlogRoot]\themes\butterfly\layout\includes文件夹下新建lantern.pug，文件内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.dengl
  .d-box
    .d1
      span
      span
        p
      ul
        li
        li  
        li
          span
        li  
        li  
    .d2
      span
      span
        p
      ul
        li
        li  
        li
          span
        li  
        li  
  .d-box1
    .d1
      span
      span
        p
      ul
        li
        li  
        li
          span
        li  
        li  
    .d2
      span
      span
        p
      ul
        li
        li  
        li
          span
        li  
        li
  1. 在[BlogRoot]\themes\[themename]]\layout\includes\layout.pug中引入lantern.pug，加在head的后面即可，缩进层级为直接删掉加号即可：

具体位置请参考下图：

1
2
3
4
5
6
7
8
9
  head
    include ./head.pug
+    //- 灯笼
+    if(theme.lantern.enable)
+      include ./lantern.pug
  body
    //- if theme.preloader
    if theme.preloader.enable
      !=partial('includes/loading/loading', {}, {cache: true})
  1. 最后在主题配置文件_config.[Theme].yml加入如下配置项，灯笼开关是在这里决定的：
1
2
3
# 灯笼开关 建议只在过年期间开启
lantern:
  enable: true
  1. 经典hexo三连👌，随后可以看到效果。