Hexo博客的使用方法(3)


阅读数: 次   

添加“心知天气”

添加”helper-live2d动态模型 “

知心天气

file

參考：https://letmequadrakill.github.io/post/843b0170.html#more

1.注册账号，设置天气样式：

官网：https://www.seniverse.com/widgetv3，需要先注册账号，然后选择样式，如下：

file

生成js代码，复制代码，如下（我的免费版的代码）:

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
<div id="tp-weather-widget"></div>
<script>
    (function(a, h, g, f, e, d, c, b) {
        b = function() {
            d = h.createElement(g);
            c = h.getElementsByTagName(g)[0];
            d.src = e;
            d.charset = "utf-8";
            d.async = 1;
            c.parentNode.insertBefore(d, c)
        };
        a["SeniverseWeatherWidgetObject"] = f;
        a[f] || (a[f] = function() {
            (a[f].q = a[f].q || []).push(arguments)
        });
        a[f].l = +new Date();
        if (a.attachEvent) {
            a.attachEvent("onload", b)
        } else {
            a.addEventListener("load", b, false)
        }
    }(window, document, "script", "SeniverseWeatherWidget", "//cdn.sencdn.com/widget2/static/js/bundle.js"));
    window.SeniverseWeatherWidget('show', {
        flavor: "slim",
        location: "WS06YNEMPP18",
        geolocation: true,
        language: "zh-Hans",
        unit: "c",
        theme: "auto",
        token: "a579c7ea-507d-41d7-b578-3537882d20c2",
        hover: "enabled",
        container: "tp-weather-widget"
    })
</script>

以下是复制的另一个人的代码，可能是升级版的(感觉效果很不错，就用了这个，可能会出现问题，因为应该是用他的秘钥，要是他修改你就会变)：

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
<!-- 《添加“心知天气”-->
<div id="tp-weather-widget"></div>
<script>
        (function(T, h, i, n, k, P, a, g, e) {
            g = function() {
                P = h.createElement(i);
                a = h.getElementsByTagName(i)[0];
                P.src = k;
                P.charset = "utf-8";
                P.async = 1;
                a.parentNode.insertBefore(P, a)
            };
            T["ThinkPageWeatherWidgetObject"] = n;
            T[n] || (T[n] = function() {
                (T[n].q = T[n].q || []).push(arguments)
            });
            T[n].l = +new Date();
            if (T.attachEvent) {
                T.attachEvent("onload", g)
            } else {
                T.addEventListener("load", g, false)
            }
        }(window, document, "script", "tpwidget", "//widget.thinkpage.cn/widget/chameleon.js"))
    </script>
    <script>
        tpwidget("init", {
            "flavor": "slim",
            "location": "WM6N2PM3WY2K",
            "geolocation": "enabled",
            "language": "zh-chs",
            "unit": "c",
            "theme": "chameleon",
            "container": "tp-weather-widget",
            "bubble": "enabled",
            "alarmType": "badge",
            "color": "#FFFFFF",
            "uid": "U88B4B2797",
            "hash": "c9d7cb43b80ffece52c9a1ebbfbca65f"
        });
        tpwidget("show");
    </script>
<!-- 添加“心知天气”》-->

2.添加到左侧边栏

修改themes/yilia/layout/_partial/left-col.ejs，将上面的js代码添加到指定位置，位置如下：

1
2
3
4
5
6
<div class="overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>">

<!-- 添加“心知天气”-->

</div>
<div class="intrude-less">

3.设置成方便开启和关闭的形式

如果主题中开启了这个设置，才开启这个功能：

1
2
3
4
5
6
7
8
<!-- 《添加“心知天气”-->
<% if(theme.xinzhi_weather){ %>
<div id="tp-weather-widget"></div>
……
        tpwidget("show");
    </script>
<% } %>
<!-- 添加“心知天气”》-->

themes/yilia/_config.yml中添加如下配置：

1
2
# 心知天气(如果不用为false):https://www.seniverse.com
xinzhi_weather: true

helper-live2d动态模型

Tips:前导必备
1、安装模块

​ 在hexo根目录执行命令

hexo博客根目录选择cmd命令窗口或者git bash 输入以下代码，安装插件

操作：

1
npm install --save hexo-helper-live2d
2、下载模型

​ 作者各种模型包展示 ➡️ hexo live2d插件 2.0 !

live2d模型仓库

  • live2d-widget-model-chitose
  • live2d-widget-model-epsilon2_1
  • live2d-widget-model-gf
  • live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
  • live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
  • live2d-widget-model-haruto
  • live2d-widget-model-hibiki
  • live2d-widget-model-hijiki
  • live2d-widget-model-izumi
  • live2d-widget-model-koharu
  • live2d-widget-model-miku
  • live2d-widget-model-ni-j
  • live2d-widget-model-nico
  • live2d-widget-model-nietzsche
  • live2d-widget-model-nipsilon
  • live2d-widget-model-nito
  • live2d-widget-model-shizuku
  • live2d-widget-model-tororo
  • live2d-widget-model-tsumiki
  • live2d-widget-model-unitychan
  • live2d-widget-model-wanko
  • live2d-widget-model-z16

使用npm install {packagename}安装模型

命令为:npm install live2d-widget-model-模型名，模型为可参考上面的预览内容。 

1
2
---博主使用的模型
# npm install live2d-widget-model-unitychan
3、详细配置

在Hexo的 _config.yml 文件或主题的 _config.yml 文件中添加配置.
参阅 live2d-widget.js API

  • 博主配置文件示例

    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
    #模型
    # Live2D
    ## https://github.com/EYHN/hexo-helper-live2d
    ## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
    live2d:
      enable: true
      #enable: false
      scriptFrom: local # 默认
      pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
      pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
      pluginModelPath: assets/ # 模型文件相对与插件根目录路径
      # scriptFrom: jsdelivr # jsdelivr CDN
      # scriptFrom: unpkg # unpkg CDN
      # scriptFrom: https://cdn.jsdelivr.net/npm/[email protected]/lib/L2Dwidget.min.js # 你的自定义 url
      tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
      debug: false # 调试, 是否在控制台输出日志
      model:
        use: live2d-widget-model-unitychan
        # use: live2d-widget-model-wanko # npm-module package name
        # use: wanko # 博客根目录/live2d_models/ 下的目录名
        # use: ./wives/wanko # 相对于博客根目录的路径
        # use: https://cdn.jsdelivr.net/npm/[email protected]/assets/wanko.model.json # 你的自定义 url
      display:
        position: right
        width: 145
        height: 315
      mobile:
        show: true # 是否在移动设备上显示
        scale: 0.5 # 移动设备上的缩放       
      react:
        opacityDefault: 0.7
        opacityOnHover: 0.8

    注意这里的use参数是上面安装的那个模型全名。

取消看板娘

暂时不用

将配置中的enable设置成false即可。

卸载插件

运行命令下载插件，删除配置信息：

  1. 卸载模型：npm install live2d-widget-model-模型名
  2. 卸载live2d插件：npm uninstall hexo-helper-live2d
  3. 去掉站点_config.yml下的配置信息即可。

中级版

比起简易版添加了对话框功能。

长这样（↓）

img

1.jpg

首先下载大佬的github代码，把下载下来的文件更名为live2d，然后放到themes\next\source文件里。

打开\themes\next\layout下的_layout.swig，在body标签内添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<link rel="stylesheet" href="/live2d/css/live2d.css" />
<div id="landlord">
    <div class="message" style="opacity:0"></div>
    <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
    <div class="hide-button">隐藏</div>
</div>

<script type="text/javascript">
    var message_Path = '/live2d/'
    var home_Path = 'https://soyawww.github.io/'  //此处修改为你的域名
</script>

<script type="text/javascript" src="/live2d/js/live2d.js"></script>
<script type="text/javascript" src="/live2d/js/message.js"></script>
<script type="text/javascript">
    loadlive2d("live2d", "/live2d/model/tia/model.json");  //此处为你是用的模型文件，可以修改
</script>

如要修改模型，修改上面代码的loadlive2d路径即可。

如要修改点击时看板娘或者鼠标放在某个元素上的对话，打开live2d文件中的message.json进行修改。

高级版

img

1.gif

拥有换装、换人、飞机大战小游戏等功能的看板娘（也就是我现在正在用的。）

首先下载大佬的github文件，修改好名字放置于\themes\next\source下（当然你也可以选择直接fork仓库，如果你不想下载文件的话就直接跳过这一段吧）。

打开_layout.swig文件，先在head标签下添加依赖，否则无法正常显示：

1
2
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

然后再在footer标签下添加：

1
<script src="https://soyawww.github.io/live2d/autoload.js"></script>

打开live2d文件下的autoloads.js文件，修改绝对路径：

1
const live2d_path = "/live2d/";

其他的就按照自己的需求修改。

例如waifu.css修改看板的大小和位置，waifu-tips.json修改对话。

img

screenshot.1.jpg

总之，更多的内容就自己摸索吧！

~关于fork仓库和api

其实不用下下来文件也可以直接用，用法是添加在添加依赖后直接添加一行代码在footer标签。

1
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>

这个是直接用的大佬的仓库，你可以选择把仓库fork下来，然后自行修改（如下，修改username为你的github名称）。

1
<script src="https://cdn.jsdelivr.net/gh/username/live2d-widget/autoload.js"></script>

无论是用fork仓库的方法还是下载文件，都是无法改变模型的，如果想要改变模型，就需要自建api（详情参考这里）。

赏

感谢支持!

微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

正因为没有翅膀，<br>人们才会寻找飞翔的方法。