hexo-theme-hipaper-keyboarddaily 1.7.0 → 1.7.1

package/_config.yml

@@ -43,6 +43,8 @@ random_thumb: true
 # 两者互斥，同时为 true 时只生效 fancybox
 fancybox: false
 photo_swipe: true
+# img_grid: 正文 {% imggrid %} 九宫格图片组样式（1 张单列、2/4 张两列、其余三列）
+img_grid: true
 
 
 # Sidebar

package/layout/_partial/head.ejs

@@ -73,4 +73,8 @@
   <%- css('css/img-zoom.min') %>
   <% } %>
 
+  <% if (theme.img_grid){ %>
+  <%- css('css/img-grid.min') %>
+  <% } %>
+
 </head>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-hipaper-keyboarddaily",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "Bugfix for A newspaper theme for Hexo.",
   "author": "iTimeTraveler, bugfix by keyboarddaily",
   "repository": {

package/scripts/img-grid.js

@@ -0,0 +1,60 @@
+/**
+ * 九宫格图片组标签
+ *
+ *   {% imggrid %}
+ *   http://example.com/1.jpg
+ *   http://example.com/2.jpg
+ *   ...
+ *   {% endimggrid %}
+ *
+ * 可选参数 contain：整组图片改为完整显示（不裁切），适合截图/长图。
+ * 列数由图片数量决定（见 css/img-grid.min.css）：1 张单列、2/4 张两列、其余三列。
+ */
+hexo.extend.tag.register(
+  'imggrid',
+  function (args, content) {
+    var root = hexo.config.root || '/';
+    var contain = args.indexOf('contain') > -1;
+
+    var urls = String(content || '')
+      .split('\n')
+      .map(function (line) {
+        return line.trim();
+      })
+      .filter(function (line) {
+        return line && line.indexOf('#') !== 0;
+      });
+
+    if (!urls.length) return '';
+
+    var escape = function (str) {
+      return str
+        .replace(/&/g, '&')
+        .replace(/"/g, '"')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+    };
+
+    var items = urls
+      .map(function (url) {
+        var src = url;
+        if (!/^([a-z][a-z0-9+.-]*:)?\/\//i.test(src)) {
+          src = root + src.replace(/^\//, '');
+        }
+        src = escape(src);
+        return '<a class="fancybox" href="' + src + '"><img src="' + src + '" alt=""></a>';
+      })
+      .join('');
+
+    return (
+      '<div class="img-grid" data-count="' +
+      urls.length +
+      '"' +
+      (contain ? ' data-fit="contain"' : '') +
+      '>' +
+      items +
+      '</div>'
+    );
+  },
+  { ends: true }
+);

package/source/css/img-grid.min.css

@@ -0,0 +1,55 @@
+/* 微博九宫格图片组（配合 {% imggrid %} 标签使用）
+   列数按 data-count 决定：1 张单列不裁切、2/4 张两列、其余三列 */
+.article-entry .img-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 4px;
+  margin: 1em 0;
+}
+
+.article-entry .img-grid[data-count="2"],
+.article-entry .img-grid[data-count="4"] {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.article-entry .img-grid[data-count="1"] {
+  grid-template-columns: 1fr;
+}
+
+.article-entry .img-grid > a.fancybox {
+  display: block;
+  margin: 0;
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  background: #f2f2f2;
+}
+
+.article-entry .img-grid img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  margin: 0;
+}
+
+/* 单图与 contain 模式保留完整画面 */
+.article-entry .img-grid[data-count="1"] > a.fancybox {
+  aspect-ratio: auto;
+}
+
+.article-entry .img-grid[data-count="1"] img,
+.article-entry .img-grid[data-fit="contain"] img {
+  height: auto;
+  object-fit: contain;
+}
+
+/* 主题脚本按 alt 插入的 .caption 会破坏格子对齐 */
+.article-entry .img-grid .caption {
+  display: none;
+}
+
+@media (max-width: 600px) {
+  .article-entry .img-grid {
+    gap: 2px;
+  }
+}