Memos (#856)

Co-authored-by: Colsrch <[email protected]>

_cdn.yml

@@ -436,3 +436,10 @@ pace_css:
   npm: true
   static: false
   cdnjs: true
+memos_carousel_js:
+  name: penndu
+  file: memos_carousel.js
+  version: 3.0.0
+  npm: true
+  static: false
+  cdnjs: false

_config.yml

@@ -671,6 +671,29 @@ sidebar:
       header:
         icon: fa-solid fa-clock WISTERIA
         title: 最近更新
+    # ---------------------------------------
+    # Artalk widget
+    artalk:
+      class: artalk
+      stickys: true
+      display: [desktop, mobile]
+    # ---------------------------------------
+    # Memos widget
+    memos_carousel:
+      class: memos_carousel
+      display: [desktop, mobile]
+      header:
+        icon: fa-solid fa-volume-high
+        title: 说说
+        url: /blog/memos/ # 说说页面的地址
+      url: 'https://s.dusays.com/' # 替换城自己的域名，也可以用杜老师的平台托管
+      limit: '10' # 展示数量限制
+      creatorId: '1' # 替换成自己的用户的ID
+      tag: '' # 要展示的内容的标签
+      image: 'fa-solid fa-image' # 图片替换成图标
+      link: 'fa-solid fa-link' # 链接替换成图标
+      placeholder: '说说加载中...' # 占位符
+
 ############################### Sidebar ############################### > end
 
 
@@ -921,6 +944,13 @@ plugins:
     # color2: #说说背景颜色2&按钮颜色2
     # color3: #说说字体颜色
     # cssUrl: #自定义css接口
+
+  # Memos https://usememos.com
+  memos:
+    # Set `plugins: ["memos"]` to enable in front-matter
+    url: 'https://s.dusays.com/' # 替换成自己的域名，也可以用杜老师的平台托管
+    limit: '10' # 展示数量限制
+    id: '1' # 替换成自己的用户的ID
 
   # BBtalk https://bb.js.org
   bbtalk:

layout/_plugins/_page_plugins/memos/index.ejs

@@ -0,0 +1,15 @@
+<script>
+  volantis.layoutHelper("page-plugins", `<div id="bber"></div>`)
+</script>
+<script>
+  var bbMemos = {
+    memos: '<%- theme.plugins.memos.url %>',
+    limit: '<%- theme.plugins.memos.limit %>',
+    creatorId: '<%- theme.plugins.memos.id %>',
+    domId: '#bber',
+  }
+</script>
+<script src="https://npm.elemecdn.com/[email protected]/memos.js"></script>
+<script src="https://npm.elemecdn.com/marked/marked.min.js"></script>
+<script src="https://jsd.onmicrosoft.cn/gh/Tokinx/ViewImage/view-image.min.js"></script>
+<script src="https://jsd.onmicrosoft.cn/gh/Tokinx/Lately/lately.min.js"></script>

layout/_widget/memos_carousel.ejs

@@ -0,0 +1,22 @@
+<%- partial('_pre') %>
+<section class="widget <%- page.widget_platform %>">
+    <%- partial('header', {item: item}) %>
+    <div class='content'>
+        <div class='bber-talk'>
+            <ul class='talk-list'><%- item.placeholder %></ul>
+        </div>
+    </div>
+    <script>
+        <% var api = item.url; %>
+        <% var params = 'api/memo?creatorId=' + item.creatorId + '&tag=' + item.tag + '&limit=' + item.limit %>
+        <% if (!api.endsWith("/")) { %>
+            <% api += "/"; %>
+        <% } %>
+        var bbCarouselMemos = {
+            api: '<%- api %>' + '<%- params %>',
+            image_icon: '<i class="fa-solid fa-image"></i>',
+            link_icon: '<i class="fa-solid fa-link"></i>',
+        }
+    </script>
+    <script>volantis.js("<%- theme.cdn.memos_carousel_js %>");</script>
+</section>

source/css/_style/_layout/sidebar.styl

@@ -363,3 +363,23 @@
   position: sticky
   top: $navbar-height + $gap
   z-index 10
+
+.bber-talk
+  padding 0.2rem 1rem
+  :hover
+    border-color: #49b1f5
+    box-shadow: none
+  a
+    color: var(--font-color)
+  .talk-list
+    display: block !important
+    max-height: 25px
+    overflow: hidden
+    :hover
+      color: #49b1f5 !important
+      transition: all .2s ease-in-out
+    .item
+      text-overflow: ellipsis
+      white-space: nowrap
+      width: 98%
+      overflow: hidden