这是我找到的一篇关于Waline动态说说的部署方法，我直接搬过来了,当然你不喜欢这个也可以去看安知鱼 的说说部署方式，看自己的喜好来布置。

也可以去看:BBtalk，Artitalk，小康哔哔。

由于我用的不是这个，其中有什么问题，可以留言，后面大家一起研究！

转自：

引用站外地址
Rootlex
Waline 实现动态说说

优点

没有本地局限性

支持 heo 同款瀑布流

无需额外部署

引入 js 代码

创建自定义js文件名，放到blog\themes\butterfly\source\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
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
var percentFlag = false; // 节流阀
var rootlex_musicPlaying = false;
var talksurl =  'https://xxx.xxx.xxx';
var talkspath = '/talks/';
function essayScroll() {
    let a = document.documentElement.scrollTop || window.pageYOffset; // 卷去高度
    const waterfallResult = a % document.documentElement.clientHeight; // 卷去一个视口
    result <= 99 || (result = 99);

    if (
        !percentFlag &&
        waterfallResult + 100 >= document.documentElement.clientHeight &&
        document.querySelector("#waterfall")
    ) {
        // console.info(waterfallResult, document.documentElement.clientHeight);
        setTimeout(() => {
            waterfall("#waterfall");
        }, 500);
    } else {
        setTimeout(() => {
            document.querySelector("#waterfall") && waterfall("#waterfall");
        }, 500);
    }

    const r = window.scrollY + document.documentElement.clientHeight;

    let p = document.getElementById("post-comment") || document.getElementById("footer");

    (p.offsetTop + p.offsetHeight / 2 < r || 90 < result) && (percentFlag = true);
}
function replaceAll(e, n, t) {
    return e.split(n).join(t);
}
var rootlex = {
    getTalks() {
        fetch(talksurl + '/comment?path=' + talkspath)
            .then((res) => {
                return res.json()
            })
            .then((json) => {
                let i = 0, talksdata = '';
                while (i < json.count){
                    if (json.data[i].type == 'administrator'){
                        talksdata += '<li class="bber-item"><div class="bber-content">' + json.data[i].comment + '</div><hr><div class="bber-bottom"><div class="bber-info"><div class="bber-info-time"><i class="far fa-clock"></i><time class="datatime" style="display: inline;">' + dayjs(json.data[i].createdAt).format('YYYY/MM/DD') + '</time></div></div></div></li>'
                    }
                    i++;
                }
                document.getElementById('waterfall').innerHTML=talksdata;
                rootlex.reflashEssayWaterFall()
            })
            .catch((err => {
                console.log(err)
            }))
    },
    reflashEssayWaterFall: function () {
        document.querySelector("#waterfall") &&
        setTimeout(function () {
            waterfall("#waterfall");
            document.getElementById("waterfall").classList.add("show");
        }, 500);
    }
};
rootlex.reflashEssayWaterFall();

同理,新建一个名为 waterfall.js 的文件，放到blog\themes\butterfly\source\js文件夹下。

1
function waterfall(a){function b(a,b){var c=window.getComputedStyle(b);return parseFloat(c["margin"+a])||0}function c(a){return a+"px"}function d(a){return parseFloat(a.style.top)}function e(a){return parseFloat(a.style.left)}function f(a){return a.clientWidth}function g(a){return a.clientHeight}function h(a){return d(a)+g(a)+b("Bottom",a)}function i(a){return e(a)+f(a)+b("Right",a)}function j(a){a=a.sort(function(a,b){return h(a)===h(b)?e(b)-e(a):h(b)-h(a)})}function k(b){f(a)!=t&&(b.target.removeEventListener(b.type,arguments.callee),waterfall(a))}"string"==typeof a&&(a=document.querySelector(a));var l=[].map.call(a.children,function(a){return a.style.position="absolute",a});a.style.position="relative";var m=[];l.length&&(l[0].style.top="0px",l[0].style.left=c(b("Left",l[0])),m.push(l[0]));for(var n=1;n<l.length;n++){var o=l[n-1],p=l[n],q=i(o)+f(p)<=f(a);if(!q)break;p.style.top=o.style.top,p.style.left=c(i(o)+b("Left",p)),m.push(p)}for(;n<l.length;n++){j(m);var p=l[n],r=m.pop();p.style.top=c(h(r)+b("Top",p)),p.style.left=c(e(r)),m.push(p)}j(m);var s=m[0];a.style.height=c(h(s)+b("Bottom",s));var t=f(a);window.addEventListener?window.addEventListener("resize",k):document.body.onresize=k}

这两个可以放在一起，不需要创建多余的文件，如果你觉得这样不方便管理，也可以自行创建一份新的文本文件。

这里需要配置talksurl和talkspath。

变量功能
talksurl你的 waline 链接
talkspath说说页面链接 /talks/

创建ccs文件

在css文件中引入以下代码：

css有设置顶部图，可以自行修改（CTRL+F搜索background）。

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
#page:has(#essay_page) {
  border: 0;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
}
.layout.hide-aside{
  max-width: 1400px !important;
}
#page:has(#essay_page) .page-title {
  display: none;
}
#web_bg ~ .page:has(#essay_page) {
  background: var(--rootlex-background);
}
#bber .bber-content .datacont {
  order: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--rootlex-fontcolor);
  width: 100%;
  line-height: 1.38;
  border-radius: 12px;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  text-align: justify;
}
#bber p {
  margin: 0px;
}
#bber div.bber-content {
  display: flex;
  flex-flow: wrap;
  border-radius: 12px;
  width: 100%;
  height: 100%;
}
#bber .timeline ul li.bber-item {
  position: relative;
  width: 32%;
  border: var(--style-border-always);
  border-radius: 12px;
  padding: 1rem 1rem 0.5rem;
  transition: all 0.3s ease 0s;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--rootlex-card-bg);
  box-shadow: var(--rootlex-shadow-border);
  margin-right: 2%;
}
#bber .timeline #waterfall.show {
  opacity: 1;
}
#bber .timeline #waterfall {
  opacity: 0;
  transition: all 0.3s ease 0s;
}
#bber ul.list {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
#bber {
  margin-top: 1rem;
  width: 100%;
}
#bber > section > ul > li.bber-item {
  margin-bottom: 1rem;
}

#bber-tips {
  font-size: 14px;
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

#bber .timeline ul li.bber-item hr {
  display: flex;
  position: relative;
  margin: 8px 0px;
  border: 1px dashed var(--rootlex-theme-op);
  width: 100%;
}

#bber .bber-info {
  display: flex;
  align-items: center;
}

#bber > section > ul > li > div .bber-info-time,
#bber > section > ul > li > div .bber-info-from {
  color: var(--rootlex-fontcolor);
  font-size: 0.7rem;
  background-color: var(--rootlex-background);
  padding: 0px 8px;
  border-radius: 20px;
  cursor: default;
  display: flex;
  align-items: center;
}

#bber .bber-info .far.fa-clock {
  margin-right: 4px;
}
#bber > section > ul > li > div .bber-info-from span,
#bber > section > ul > li > div .bber-info-from {
  margin-left: 4px;
  font-weight: 600;
}

#bber .bber-bottom {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 10px;
}
#bber .timeline ul li.bber-item:hover {
  border: var(--style-border-hover);
}
/* 顶部样式 */
.author-content.author-content-item.essayPage {
  height: 19rem;
  background: url(https://bu.dusays.com/2022/09/01/631068b943a16.jpg) left 28% / cover no-repeat;
  color: #fff;
  overflow: hidden;
  margin-top: 0px;
  border-radius: 10px;
}

创建说说pug文件

在themes/butterfly/layout/includes/page目录下创建一个talks.pug文件，加入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#essay_page
    .author-content.author-content-item.essayPage.single
        .card-content
            .author-content-item-tips 即刻短文
    #bber
        section.timeline.page-1
            ul#waterfall.list
                li.bber-item
                    .bber-content
                        p.datacont= '加载中'
    #bber-tips(style='color: var(--rootlex-secondtext);')
        | - 只展示最近30条短文 -

script.
    rootlex.getTalks()

修改page.pug文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    if top_img === false
      h1.page-title= page.title

    case page.type
+      when 'talks'
+        include includes/page/talks.pug
      when 'tags'
        include includes/page/tags.pug
      when 'link'
        include includes/page/flink.pug
      when 'categories'
        include includes/page/categories.pug
      default
        include includes/page/default-page.pug

新建说说页面

在终端中输入hexo new page talks创建说说页面

1
2
3
4
5
6
7
8
---
title: 说说
date: 2022-10-11 09:37:02
comments: true
aside: false
top_img: false
type: talks
---

这里可以用安知鱼的主界面部署样式，如果不喜欢直接跳过下面的隐藏步骤。

安知鱼🐟的部署方式

详情看此文

首页滚动显示即刻（可选）

创建themes/butterfly/layout/includes/bbTimeList.pug 部分fontawesome图标可能需要您自行修改（就是use(xlink:href=”#icon-chrome”)）。

1
2
3
4
5
6
7
8
9
10
11
12
#bbTimeList.bbTimeList.container
    svg.icon.bber-logo.iconfont.icon-chrome(onclick=`pjax.loadUrl("/essay/")`,title="即刻短文")
      use(xlink:href="#icon-chrome")
    #bbtalk.swiper-container.swiper-no-swiping.essay_bar_swiper_container(tabindex="-1")
      #bber-talk.swiper-wrapper(onclick=`pjax.loadUrl("/essay/")`)
        each i in site.data.essay
          each item, index in i.essay_list
            if index < 10
              - var contentText = item.image ? item.content + ' [图片]' : item.content
              .li-style.swiper-slide= contentText

    i.bber-gotobb.fas.fa-arrow-circle-right(onclick=`pjax.loadUrl("/essay/")`,title="查看全文")

引入swiper依赖

在_config.butterfly.yml引入依赖, 如果有使用轮播图插件的话此处无需引入

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/lib/swiper.min.css">
  bottom:
    - <script data-pjax src="https://npm.elemecdn.com/[email protected]/js/swiper.min.js"></script>

添加自定义css

在source/css/essay_page创建home_essay_bar.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
#bbTimeList {
  background: var(--icemyst-white);
  color: var(--icemyst-fontcolor);
  padding: 0.5rem 1rem;
  border-radius: 30px;
  box-shadow: var(--icemyst-shadow-lightblack);
  display: flex;
  transition: all 0.3s ease 0s;
  margin: 1rem auto 0;
  border: var(--style-border);
  align-items: center;
  height: 50px;
  width: 100%;
}
[data-theme="dark"] #bbTimeList {
  background: #000 !important;
}
#bbtalk {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#bber-talk {
  width: 100%;
  height: 25px;
  line-height: 25px;
  display: flex;
  flex-direction: column;
}
.bber-logo {
  font-size: 1.5rem;
  line-height: 22px;
  margin-right: 1rem;
  transition: all 0.3s ease 0s;
  cursor: url(/img/x2.cur), auto !important;
}

.bber-gotobb {
  line-height: 25px;
  margin-left: 1rem;
  transition: all 0.3s ease 0s;
  cursor: url(/img/x2.cur), auto !important;
}

#bber-talk .li-style {
  width: 100%;
  max-width: 100%;
  height: 25px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: 0.3s;
  font-weight: 700;
  margin: auto;
  cursor: url(/img/x2.cur), auto !important;
  white-space: nowrap;
}

#bbTimeList:hover {
  border: var(--style-border-hover);
  box-shadow: var(--icemyst-shadow-main);
}

/* 文章页H1-H6图标样式效果 */
.bbTimeList .bber-logo {
  -webkit-animation: rotate 1.6s linear infinite;
  animation: rotate 1.6s linear infinite;
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}

然后在_config.butterfly.yml中的inject下的head引入。

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/essay_page/home_essay_bar.css">

修改自定义js文件

这里需要进行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
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
var percentFlag = false; // 节流阀
function essayScroll() {
  let a = document.documentElement.scrollTop || window.pageYOffset; // 卷去高度
  const waterfallResult = a % document.documentElement.clientHeight; // 卷去一个视口
  result <= 99 || (result = 99);

  if (
    !percentFlag &&
    waterfallResult + 100 >= document.documentElement.clientHeight &&
    document.querySelector("#waterfall")
  ) {
    // console.info(waterfallResult, document.documentElement.clientHeight);
    setTimeout(() => {
      waterfall("#waterfall");
    }, 500);
  } else {
    setTimeout(() => {
      document.querySelector("#waterfall") && waterfall("#waterfall");
    }, 500);
  }

  const r = window.scrollY + document.documentElement.clientHeight;

  let p = document.getElementById("post-comment") || document.getElementById("footer");

  (p.offsetTop + p.offsetHeight / 2 < r || 90 < result) && (percentFlag = true);
}
function replaceAll(e, n, t) {
  return e.split(n).join(t);
}
var btf = {
  diffDate: function (d, more = false) {
    const dateNow = new Date();
    const datePost = new Date(d);
    const dateDiff = dateNow.getTime() - datePost.getTime();
    const minute = 1000 * 60;
    const hour = minute * 60;
    const day = hour * 24;
    const month = day * 30;

    let result;
    if (more) {
      const monthCount = dateDiff / month;
      const dayCount = dateDiff / day;
      const hourCount = dateDiff / hour;
      const minuteCount = dateDiff / minute;

      if (monthCount >= 1) {
        result = datePost.toLocaleDateString().replace(/\//g, "-");
      } else if (dayCount >= 1) {
        result = parseInt(dayCount) + " " + GLOBAL_CONFIG.date_suffix.day;
      } else if (hourCount >= 1) {
        result = parseInt(hourCount) + " " + GLOBAL_CONFIG.date_suffix.hour;
      } else if (minuteCount >= 1) {
        result = parseInt(minuteCount) + " " + GLOBAL_CONFIG.date_suffix.min;
      } else {
        result = GLOBAL_CONFIG.date_suffix.just;
      }
    } else {
      result = parseInt(dateDiff / day);
    }
    return result;
  },
  changeTimeInEssay: function () {
    document.querySelector("#bber") &&
      document.querySelectorAll("#bber time").forEach(function (e) {
        var t = e,
          datetime = t.getAttribute("datetime");
        (t.innerText = btf.diffDate(datetime, true)), (t.style.display = "inline");
      });
  },
  reflashEssayWaterFall: function () {
    document.querySelector("#waterfall") &&
      setTimeout(function () {
        waterfall("#waterfall");
        document.getElementById("waterfall").classList.add("show");
      }, 500);
  },
  commentText: function (e) {
    if (e == "undefined" || e == "null") e = "好棒！";
    var n = document.getElementsByClassName("el-textarea__inner")[0],
      t = document.createEvent("HTMLEvents");
    if (!n) return;
    t.initEvent("input", !0, !0);
    var o = replaceAll(e, "\n", "\n> ");
    (n.value = "> " + o + "\n\n"), n.dispatchEvent(t);
    var i = document.querySelector("#post-comment").offsetTop;
    window.scrollTo(0, i - 80),
      n.focus(),
      n.setSelectionRange(-1, -1),
      document.getElementById("comment-tips") && document.getElementById("comment-tips").classList.add("show");
  },
  initIndexEssay: function () {
    setTimeout(() => {
      let essay_bar_swiper = new Swiper(".essay_bar_swiper_container", {
        passiveListeners: true,
        direction: "vertical",
        loop: true,
        autoplay: {
          disableOnInteraction: true,
          delay: 3000,
        },
        mousewheel: true,
      });

      let essay_bar_comtainer = document.getElementById("bbtalk");
      if (essay_bar_comtainer !== null) {
        essay_bar_comtainer.onmouseenter = function () {
          essay_bar_swiper.autoplay.stop();
        };
        essay_bar_comtainer.onmouseleave = function () {
          essay_bar_swiper.autoplay.start();
        };
      }
    }, 100);
  },
};

btf.initIndexEssay();
btf.changeTimeInEssay();
btf.reflashEssayWaterFall();

引入到主页

1
2
3
4
5
6
7
block content
  include ./includes/mixins/post-ui.pug
  #recent-posts.recent-posts
    include includes/categoryList.pug
+   include includes/bbTimeList.pug
    +postUI
    include includes/pagination.pug

引入 swiper 依赖

在_config.butterfly.yml引入依赖, 如果有使用店长的轮播图插件的话此处无需引入

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/lib/swiper.min.css">
  bottom:
    - <script data-pjax src="https://npm.elemecdn.com/[email protected]/js/swiper.min.js"></script>

在_config.butterfly.yml中的inject加入以下代码:

1
2
3
4
5
6
head:
  - <link rel="stylesheet" href="/css/custom.css" type="text/css">
bottom:
  - <script async data-pjax src="/js/custom.js"></script> # 自定义js
  - <script async data-pjax src="/js/waterfall.js"></script>  # waterfall库
  - <script async data-pjax src="https://jsd.onmicrosoft.cn/npm/dayjs"></script> # 日期转换库

三连查看效果！