hexo-theme-stellar 1.29.0 → 1.30.0

package/source/css/_components/tag-plugins/sites.styl

@@ -9,6 +9,7 @@
   width: 100%
   display: flex
   flex-direction: column
+  position: relative
   >img
     object-fit: cover
     aspect-ratio: 1.5
@@ -18,6 +19,7 @@
   .info
     margin-top: 0.5rem
     line-height: 1.2
+    position: relative
     >img
       width: 28px
       height: @width
@@ -46,6 +48,16 @@
       overflow: hidden
       -webkit-line-clamp: 1
 
+  .label
+    position: absolute
+    color: initial
+    font-weight: 600
+    top: 1px
+    right: 0
+    font-size: 10px
+    padding: 2px 4px
+    border-radius: 16px
+
 // transform
 .sites-wrap .site-card .card-link
   >img

package/source/css/_components/tag-plugins/tabs.styl

@@ -76,10 +76,13 @@
     text-align: justify
     margin-top: .5rem
     .tab-pane
+      display: block
       &:not(.active)
-        display: none
+        visibility: hidden
+        height: 0
       &.active
-        display: block
+        visibility: visible
+        height: auto
   .tab-content:has(.grid-box)
     width: 100%
 

package/source/css/_custom.styl

@@ -2,6 +2,7 @@
 
 // 通用主题色
 $color-theme = convert(hexo-config('style.color.theme'))
+$color-theme-opa = hsla(hue($color-theme), saturation($color-theme), lightness($color-theme), 0.3)
 $color-accent = convert(hexo-config('style.color.accent'))
 $color-link = convert(hexo-config('style.color.link'))
 $color-hover = convert(hexo-config('style.color.hover'))

package/source/css/_defines/func.styl

@@ -14,11 +14,11 @@ trans1($op, $time = 0.2s)
   -o-transition: $op $time ease-out
 
 // 为2个属性设置动画
-trans2($op1, $op2)
-  transition: $op1 0.2s ease-out, $op2 0.2s ease-out
-  -moz-transition: $op1 0.2s ease-out, $op2 0.2s ease-out
-  -webkit-transition: $op1 0.2s ease-out, $op2 0.2s ease-out
-  -o-transition: $op1 0.2s ease-out, $op2 0.2s ease-out
+trans2($op1, $op2, $time = 0.2s)
+  transition: $op1 $time ease-out, $op2 $time ease-out
+  -moz-transition: $op1 $time ease-out, $op2 $time ease-out
+  -webkit-transition: $op1 $time ease-out, $op2 $time ease-out
+  -o-transition: $op1 $time ease-out, $op2 $time ease-out
 
 trans2pro($op1, $t1, $op2, $t2)
   transition: $op1 $t1 ease-out, $op2 $t2 ease-out
@@ -78,7 +78,8 @@ scrollbar-codeblock($height = 4px)
   &::-webkit-scrollbar
     height: $height
     width: $height
-  &::-webkit-scrollbar-track-piece
+  &::-webkit-scrollbar-track-piece,
+  &::-webkit-scrollbar-corner
     background: transparent
   &::-webkit-scrollbar-thumb
     background: transparent

package/source/css/_defines/theme.styl

@@ -23,6 +23,7 @@ _dark_text()
   --text-p1: hsl($color-text-h, $color-text-s, $color-text-l)
   --text-p2: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 0.75)
   --text-p3: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 1.25)
+  --text-p3-opa: hsla($color-text-h, $color-text-s, $color-text-l / 0.5 * 1.25, 0.3)
   --text-p4: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 1.5)
   --text-meta: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 2)
   --text-code: hsl($color-code-h, $color-code-s, $color-code-l)
@@ -32,6 +33,7 @@ _light_text()
   --text-p1: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.5)
   --text-p2: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.75)
   --text-p3: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.2)
+  --text-p3-opa: hsla($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.2, 0.3)
   --text-p4: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.4)
   --text-meta: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.75)
   --text-code: hsl($color-code-h, $color-code-s, (100 - $color-code-l) * 1.2)
@@ -39,6 +41,8 @@ _light_text()
 _common_root()
   :root
     --theme-link: $color-link
+    --theme-color: $color-theme
+    --theme-color-opa: $color-theme-opa
 
 _light_root()
   --site-bg: hsl($color-background-h, $color-background-s, $color-background-l)
@@ -53,6 +57,18 @@ _light_root()
   --alpha60: rgba(white, 0.6)
   --alpha75: rgba(white, 0.75)
   --alpha100: white
+  // chat 标签
+  --chat-bg:     #f1f2f5
+  --chat-block:  #ffffff
+  --chat-border: #f2f2f2
+  --chat-qq-right-bg: #0099FF
+  --chat-qq-right-text: #ffffff
+  --chat-wechat-news-num: #d8dadf
+  --chat-video-button: #ffffffE6
+  --chat-wechat-right-bg: #91ED61
+  --chat-quote-blink-color: #185c6d1a
+  --chat-wechat-quote-color: #808080
+  --chat-wechat-quote-bg: #8080801a
   _dark_text()
 
 _dark_root()
@@ -68,6 +84,18 @@ _dark_root()
   --alpha60: rgba(black, 0.6)
   --alpha75: rgba(black, 0.75)
   --alpha100: black
+  // chat 标签
+  --chat-bg:     #1f2224  // #111111
+  --chat-block:  #25282a  // #191919
+  --chat-border: #303437  // #222222
+  --chat-qq-right-bg: #0099ff80
+  --chat-qq-right-text: #ffffff99
+  --chat-wechat-news-num: #25282a
+  --chat-video-button: #25282ad9  // #191919E6
+  --chat-wechat-right-bg: hsl(hue($c-green), 25, 25)
+  --chat-quote-blink-color: #185c6d26
+  --chat-wechat-quote-color: #858585
+  --chat-wechat-quote-bg: #8585851a
   _light_text()
   @media screen and (max-width: $device-mobile-max)
     --site-bg: black
@@ -82,3 +110,13 @@ _common_root()
   _light_root()
   @media (prefers-color-scheme: dark)
     _dark_root()
+
+@media (prefers-color-scheme: dark)
+  :root:not([color-scheme])
+    img,
+    .md-text .tag-plugin.chat>.content .chatcell .user-main .talk.file>.content>.top>.right>svg.icon>path
+      filter: brightness(75%)!important
+[color-scheme='dark']
+    img,
+    .md-text .tag-plugin.chat>.content .chatcell .user-main .talk.file>.content>.top>.right>svg.icon>path
+      filter: brightness(75%)!important

package/source/css/_plugins/katex.styl

@@ -1,5 +1,4 @@
 .md-text 
   p.katex-block
-  .katex-display
     overflow: scroll
     scrollbar(0, 0)

package/source/js/plugins/download-file.js

@@ -0,0 +1,198 @@
+// 传入一个字符串，返回对应的文件格式类型
+function extToMimes(ext) {
+    let type = undefined;
+    switch (ext) {
+      // 对应图片格式jpg
+      case 'jpg':
+        type = 'image/jpeg'
+        break;
+      // 对应图片格式png
+      case 'png':
+        type = 'image/png'
+        break;
+      // 对应图片格式jpeg
+      case 'jpeg':
+        type = 'image/jpeg'
+        break;
+       // 对应图片格式gif
+      case 'gif':
+        type ='image/gif'
+        break;
+      // 对应图片格式bmp
+      case 'bmp':
+        type = 'image/bmp'
+        break;
+      // 对应文本格式txt
+      case 'txt':
+        type = 'text/plain'
+        break;
+      // 对应表格格式xls
+      case 'xls':
+        type = 'application/vnd.ms-excel'
+        break;
+      // 对应word文档doc格式
+      case 'doc':
+        type = 'application/msword'
+        break;
+      // 对应文档格式pdf
+      case 'pdf':
+        type = 'application/pdf'
+        break;
+      // 对应表格格式xlsx
+      case 'xlsx':
+        type = 'application/vnd.ms-excel'
+        break;
+      // 对应表格格式csv
+      case 'csv':
+        type = 'text/csv'
+        break;
+      // 对应的视频格式一般是MPEG-4或者H.264编码的MP4格式
+      case 'mp4':
+        type = 'video/mp4'
+        break;
+      // 对应的视频格式一般是AVI格式
+      case 'avi':
+        type = 'video/x-msvideo'
+        break;
+      // 对应的视频格式一般是Windows Media Video格式
+      case 'WindowsMediaVideo':
+        type = 'video/x-ms-wmv'
+        break;
+      // 对应的视频格式一般是MOV格式，由苹果公司开发的
+      case 'mov':
+        type = 'video/quicktime'
+        break;
+      // 对应的视频格式一般是Flash视频格式，由Adobe公司开发的
+      case 'flash':
+        type = 'video/x-flv'
+        break;
+      // 对应的视频格式一般是MKV格式，开源免费的多媒体容器格式
+      case 'mkv':
+        type = 'video/x-matroska'
+        break;
+      // 对应音频格式mp3
+      case 'mp3':
+        type = 'audio/mpeg'
+        break;
+      // 对应音频格式wav
+      case 'wav':
+        type = 'audio/wav'
+        break;
+      // 对应音频格式flac
+      case 'flac':
+        type = 'audio/flac'
+        break;
+      // 对应音频格式aac
+      case 'aac':
+        type = 'audio/aac'
+        break;
+      // 对应音频格式WMA
+      case 'wma':
+        type = 'audio/x-ms-wma'
+        break;
+      default:
+        type = 'text/plain'
+        break;
+    }
+    return type;
+  }
+  
+  /**
+   * 根据字节数获取文件大小，并转换成 KB、MB、GB、TB 等形式
+   * @param {number} bytes - 文件的字节数
+   * @returns {string} - 文件大小的字符串表示形式
+   */
+  function formatFileSize(bytes) {
+    const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    let size = bytes;
+    let unitIndex = 0;
+  
+    while (size >= 1024 && unitIndex < units.length - 1) {
+      size /= 1024;
+      unitIndex++;
+    }
+  
+    // 保留两位小数，四舍五入
+    size = Math.round(size * 100) / 100;
+  
+    return `${size}${units[unitIndex]}`;
+  }
+  
+  var file_contents = {};
+  
+  function cacheDatas(url, data) {
+    let content = data.file;
+    let fileName = url.split("/").at(-1);
+    let fileType = fileName.split(".")[1];
+    let fileMimeType = extToMimes(fileType);
+    // 拿到二进制字符串 content
+    // 再利用 Buffer 转为对象
+    const length = content ? content.data.length : 0;
+    let buf = new ArrayBuffer(length)
+    let view = new Uint8Array(buf)
+    for (let i = 0; i < length; ++i) {
+      view[i] = content.data[i]
+    }
+    // 再输入到 Blob 生成文件
+    let blob = new Blob([buf], {type: fileMimeType});
+    let fileSize = formatFileSize(blob.size);
+  
+    let file_content = {};
+    file_content.name = fileName;
+    file_content.size = fileSize;
+    file_content.blob = blob;
+  
+    file_contents[url] = file_content;
+  }
+  
+  function renderFileDom(el, url) {
+    let fileSizeSpan = el.querySelector('.file-size');
+    let fileSize = file_contents[url].size;
+    if (fileSizeSpan && fileSize) {
+      fileSizeSpan.innerHTML = fileSize;
+    }
+  }
+  
+  function downloadFile(url) {
+    let file = file_contents[url];
+    let a = document.createElement('a')
+    // 指定生成的文件名
+    a.download = file.name;
+    a.href = URL.createObjectURL(file.blob)
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+  }
+  
+  function downloadFileEvent(fileDoms) {
+    for (let i = 0; i < fileDoms.length; ++i) {
+      let fileDom = fileDoms[i];
+      const api = ctx.tag_plugins.chat.api + '?type=file&url=' || 'https://api.vlts.cc/site_info/v1?type=file&url=';
+      const obverser = new IntersectionObserver((entries, observer) => {
+        utils.requestAnimationFrame(()=>{
+          entries.filter((entry)=>{return entry.isIntersecting}).sort((a,b)=>a.intersectionRect.y !== b.intersectionRect.y ? a.intersectionRect.y - b.intersectionRect.y : a.intersectionRect.x - b.intersectionRect.x).forEach((entry, index) => {
+            observer.unobserve(entry.target);
+            setTimeout(() => {
+              let url = entry.target.getAttribute('url');
+              fetch(api + url).then(function(response) {
+                if (response.ok) {
+                  return response.json();
+                }
+                throw new Error('Network response was not ok.');
+              }).then(function(data) {
+                cacheDatas(url, data);
+                renderFileDom(fileDom, url);
+              }).catch(function(error) {
+                console.log(error);
+              });
+              fileDom.addEventListener('click', ()=>{
+                  downloadFile(url);
+              });
+            }, Math.max(100, 16)*(index+1));
+          });
+        });
+      });
+      obverser.observe(fileDom);
+    }
+  }
+  

package/source/js/plugins/video.js

@@ -0,0 +1,65 @@
+function videoEvents(videos) {
+    for (let i = 0; i < videos.length; ++i) {
+        let video = videos[i];
+        video.loop = false;
+        let videoDom = video.parentElement;
+        let pauseBtn = videoDom.querySelector('.pause-btn');
+        let playBtn = videoDom.querySelector('.play-btn');
+        // videoDom.addEventListener('click', ()=>{
+        //     if (pauseBtn.style.display === 'flex') {
+        //         video.pause();
+        //         pauseBtn.style.display = "none";
+        //         playBtn.style.display = "flex";
+        //         playFlag = false;
+        //     } else {
+        //         if (video.requestFullscreen) {
+        //             video.requestFullscreen();
+        //         } else if (video.mozRequestFullScreen) {
+        //             video.mozRequestFullScreen();
+        //         } else if (video.webkitRequestFullScreen) {
+        //             video.webkitRequestFullScreen();
+        //         } else if (video.msRequestFullscreen) {
+        //             video.msRequestFullscreen();
+        //         }
+        //         video.play();
+        //         pauseBtn.style.display = "flex";
+        //         playBtn.style.display = "none";
+        //         playFlag = true;
+        //     }
+        // });
+
+        // video.addEventListener('ended', ()=>{
+        //     pauseBtn.style.display = "none";
+        //     playBtn.style.display = "flex";
+        // });
+
+        videoDom.addEventListener('click', ()=>{
+            if (video.requestFullscreen) {
+                video.requestFullscreen();
+            } else if (video.mozRequestFullScreen) {
+                video.mozRequestFullScreen();
+            } else if (video.webkitRequestFullScreen) {
+                video.webkitRequestFullScreen();
+            } else if (video.msRequestFullscreen) {
+                video.msRequestFullscreen();
+            }
+        });
+
+
+        document.addEventListener('fullscreenchange', () => {
+            if (checkIsFullScreen()) {
+                console.log("进入全屏");
+                video.play();
+            } else {
+                console.log("退出全屏");
+                video.currentTime = 0;			// 更改当前播放的时间点
+                video.pause();
+            }
+        });
+        function checkIsFullScreen(){
+            var isFullScreen = document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen;
+            return isFullScreen == undefined ? false : isFullScreen;
+        }
+    }
+}
+