hexo-theme-hipaper-keyboarddaily 1.6.8 → 1.7.1

package/_config.yml

@@ -38,7 +38,13 @@ random_thumb: true
 
 
 # Content
-fancybox: true
+# fancybox: 主题自带的 jQuery Fancybox 2.x（只能放大，不能缩放/平移）
+# photo_swipe: 内置的 PhotoSwipe 5 灯箱（支持缩放、平移、手势、多图切换）
+# 两者互斥，同时为 true 时只生效 fancybox
+fancybox: false
+photo_swipe: true
+# img_grid: 正文 {% imggrid %} 九宫格图片组样式（1 张单列、2/4 张两列、其余三列）
+img_grid: true
 
 
 # Sidebar

package/layout/_partial/after-footer.ejs

@@ -22,6 +22,8 @@
 <% if (theme.fancybox){ %>
   <%- css('fancybox/jquery.fancybox') %>
   <%- js('fancybox/jquery.fancybox.pack') %>
+<% } else if (theme.photo_swipe){ %>
+<script type="module" src="<%- url_for('js/img-zoom.min.js') %>"></script>
 <% } %>
 
 <%- js('js/script') %>

package/layout/_partial/head.ejs

@@ -68,4 +68,13 @@
   <link rel="stylesheet" href="<%- config.root %>css/fashion.css" >
   <link rel="stylesheet" href="<%- config.root %>css/glyphs.css" >
 
+  <% if (theme.photo_swipe && !theme.fancybox){ %>
+  <%- css('css/photoswipe.min') %>
+  <%- 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.6.8",
+  "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;
+  }
+}

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

@@ -0,0 +1,40 @@
+/* 一行多图：md 里整行写
+   <div class="img-row"><img src="a.jpg"><img src="b.jpg"></div>
+   主题会把每张 img 包成 <a class="fancybox">，所以 <a> 才是 flex 项 */
+.article-entry .img-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 4px;
+  margin: 1em 0;
+}
+
+.article-entry .img-row > a.fancybox {
+  flex: 1 1 0;
+  min-width: 0;
+  margin: 0;
+}
+
+.article-entry .img-row img {
+  width: 100%;
+  height: auto;
+  margin: 0;
+  display: block;
+}
+
+/* 主题按 alt 插入的 .caption 会把行内图片顶开 */
+.article-entry .img-row .caption {
+  display: none;
+}
+
+/* 窄屏最多两列，三张及以上自动换行 */
+@media (max-width: 600px) {
+  .article-entry .img-row > a.fancybox {
+    min-width: calc(50% - 2px);
+  }
+}
+
+/* 可点击放大 */
+.article-entry a.fancybox img {
+  cursor: zoom-in;
+}

package/source/css/photoswipe.min.css

@@ -0,0 +1,420 @@
+/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
+
+.pswp {
+  --pswp-bg: #000;
+  --pswp-placeholder-bg: #222;
+  
+
+  --pswp-root-z-index: 100000;
+  
+  --pswp-preloader-color: rgba(79, 79, 79, 0.4);
+  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
+  
+  /* defined via js:
+  --pswp-transition-duration: 333ms; */
+  
+  --pswp-icon-color: #fff;
+  --pswp-icon-color-secondary: #4f4f4f;
+  --pswp-icon-stroke-color: #4f4f4f;
+  --pswp-icon-stroke-width: 2px;
+
+  --pswp-error-text-color: var(--pswp-icon-color);
+}
+
+
+/*
+	Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
+*/
+
+.pswp {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: var(--pswp-root-z-index);
+	display: none;
+	touch-action: none;
+	outline: 0;
+	opacity: 0.003;
+	contain: layout style size;
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+/* Prevents focus outline on the root element,
+  (it may be focused initially) */
+.pswp:focus {
+  outline: 0;
+}
+
+.pswp * {
+  box-sizing: border-box;
+}
+
+.pswp img {
+  max-width: none;
+}
+
+.pswp--open {
+	display: block;
+}
+
+.pswp,
+.pswp__bg {
+	transform: translateZ(0);
+	will-change: opacity;
+}
+
+.pswp__bg {
+  opacity: 0.005;
+	background: var(--pswp-bg);
+}
+
+.pswp,
+.pswp__scroll-wrap {
+	overflow: hidden;
+}
+
+.pswp__scroll-wrap,
+.pswp__bg,
+.pswp__container,
+.pswp__item,
+.pswp__content,
+.pswp__img,
+.pswp__zoom-wrap {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.pswp__img,
+.pswp__zoom-wrap {
+	width: auto;
+	height: auto;
+}
+
+.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
+	cursor: -webkit-zoom-in;
+	cursor: -moz-zoom-in;
+	cursor: zoom-in;
+}
+
+.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
+	cursor: move;
+	cursor: -webkit-grab;
+	cursor: -moz-grab;
+	cursor: grab;
+}
+
+.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: grabbing;
+}
+
+/* :active to override grabbing cursor */
+.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
+.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
+.pswp__img {
+	cursor: -webkit-zoom-out;
+	cursor: -moz-zoom-out;
+	cursor: zoom-out;
+}
+
+
+/* Prevent selection and tap highlights */
+.pswp__container,
+.pswp__img,
+.pswp__button,
+.pswp__counter {
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.pswp__item {
+	/* z-index for fade transition */
+	z-index: 1;
+	overflow: hidden;
+}
+
+.pswp__hidden {
+	display: none !important;
+}
+
+/* Allow to click through pswp__content element, but not its children */
+.pswp__content {
+  pointer-events: none;
+}
+.pswp__content > * {
+  pointer-events: auto;
+}
+
+
+/*
+
+  PhotoSwipe UI
+
+*/
+
+/*
+	Error message appears when image is not loaded
+	(JS option errorMsg controls markup)
+*/
+.pswp__error-msg-container {
+  display: grid;
+}
+.pswp__error-msg {
+	margin: auto;
+	font-size: 1em;
+	line-height: 1;
+	color: var(--pswp-error-text-color);
+}
+
+/*
+class pswp__hide-on-close is applied to elements that
+should hide (for example fade out) when PhotoSwipe is closed
+and show (for example fade in) when PhotoSwipe is opened
+ */
+.pswp .pswp__hide-on-close {
+	opacity: 0.005;
+	will-change: opacity;
+	transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
+	z-index: 10; /* always overlap slide content */
+	pointer-events: none; /* hidden elements should not be clickable */
+}
+
+/* class pswp--ui-visible is added when opening or closing transition starts */
+.pswp--ui-visible .pswp__hide-on-close {
+	opacity: 1;
+	pointer-events: auto;
+}
+
+/* <button> styles, including css reset */
+.pswp__button {
+	position: relative;
+	display: block;
+	width: 50px;
+	height: 60px;
+	padding: 0;
+	margin: 0;
+	overflow: hidden;
+	cursor: pointer;
+	background: none;
+	border: 0;
+	box-shadow: none;
+	opacity: 0.85;
+	-webkit-appearance: none;
+	-webkit-touch-callout: none;
+}
+
+.pswp__button:hover,
+.pswp__button:active,
+.pswp__button:focus {
+  transition: none;
+  padding: 0;
+  background: none;
+  border: 0;
+  box-shadow: none;
+  opacity: 1;
+}
+
+.pswp__button:disabled {
+  opacity: 0.3;
+  cursor: auto;
+}
+
+.pswp__icn {
+  fill: var(--pswp-icon-color);
+  color: var(--pswp-icon-color-secondary);
+}
+
+.pswp__icn {
+  position: absolute;
+  top: 14px;
+  left: 9px;
+  width: 32px;
+  height: 32px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.pswp__icn-shadow {
+  stroke: var(--pswp-icon-stroke-color);
+  stroke-width: var(--pswp-icon-stroke-width);
+  fill: none;
+}
+
+.pswp__icn:focus {
+	outline: 0;
+}
+
+/*
+	div element that matches size of large image,
+	large image loads on top of it,
+	used when msrc is not provided
+*/
+div.pswp__img--placeholder,
+.pswp__img--with-bg {
+	background: var(--pswp-placeholder-bg);
+}
+
+.pswp__top-bar {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 60px;
+	display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+	z-index: 10;
+
+	/* allow events to pass through top bar itself */
+	pointer-events: none !important;
+}
+.pswp__top-bar > * {
+  pointer-events: auto;
+  /* this makes transition significantly more smooth,
+     even though inner elements are not animated */
+  will-change: opacity;
+}
+
+
+/*
+
+  Close button
+
+*/
+.pswp__button--close {
+  margin-right: 6px;
+}
+
+
+/*
+
+  Arrow buttons
+
+*/
+.pswp__button--arrow {
+  position: absolute;
+  top: 0;
+  width: 75px;
+  height: 100px;
+  top: 50%;
+  margin-top: -50px;
+}
+
+.pswp__button--arrow:disabled {
+  display: none;
+  cursor: default;
+}
+
+.pswp__button--arrow .pswp__icn {
+  top: 50%;
+  margin-top: -30px;
+  width: 60px;
+  height: 60px;
+  background: none;
+  border-radius: 0;
+}
+
+.pswp--one-slide .pswp__button--arrow {
+  display: none;
+}
+
+/* hide arrows on touch screens */
+.pswp--touch .pswp__button--arrow {
+  visibility: hidden;
+}
+
+/* show arrows only after mouse was used */
+.pswp--has_mouse .pswp__button--arrow {
+  visibility: visible;
+}
+
+.pswp__button--arrow--prev {
+  right: auto;
+  left: 0px;
+}
+
+.pswp__button--arrow--next {
+  right: 0px;
+}
+.pswp__button--arrow--next .pswp__icn {
+  left: auto;
+  right: 14px;
+  /* flip horizontally */
+  transform: scale(-1, 1);
+}
+
+/*
+
+  Zoom button
+
+*/
+.pswp__button--zoom {
+  display: none;
+}
+
+.pswp--zoom-allowed .pswp__button--zoom {
+  display: block;
+}
+
+/* "+" => "-" */
+.pswp--zoomed-in .pswp__zoom-icn-bar-v {
+  display: none;
+}
+
+
+/*
+
+  Loading indicator
+
+*/
+.pswp__preloader {
+  position: relative;
+  overflow: hidden;
+  width: 50px;
+  height: 60px;
+  margin-right: auto;
+}
+
+.pswp__preloader .pswp__icn {
+  opacity: 0;
+  transition: opacity 0.2s linear;
+  animation: pswp-clockwise 600ms linear infinite;
+}
+
+.pswp__preloader--active .pswp__icn {
+  opacity: 0.85;
+}
+
+@keyframes pswp-clockwise {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+
+/*
+
+  "1 of 10" counter
+
+*/
+.pswp__counter {
+  height: 30px;
+  margin-top: 15px;
+  margin-inline-start: 20px;
+  font-size: 14px;
+  line-height: 30px;
+  color: var(--pswp-icon-color);
+  text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
+  opacity: 0.85;
+}
+
+.pswp--one-slide .pswp__counter {
+  display: none;
+}

package/source/js/img-zoom.min.js

@@ -0,0 +1,47 @@
+// 主题内置图片灯箱（PhotoSwipe 5，已 vendored 到 source/js，不依赖 CDN）
+// 由 _config.yml 的 photo_swipe 开关控制，需同时把 fancybox 置为 false（否则两套放大同时触发）。
+// script.js 会把 .article-entry 内的每张 img 包成 <a class="fancybox" href="原图">，
+// 这里直接以这些 <a> 作为灯箱条目；宽高在点击时从 img 的实际尺寸补齐（PhotoSwipe 必需）。
+// 文件名以 .min.js 结尾是为了命中站点 hexo-neat 的排除规则（uglify-js 不认 ESM 语法），内容未压缩。
+import PhotoSwipeLightbox from './photoswipe-lightbox.esm.min.js'
+
+const options = {
+  pswpModule: () => import('./photoswipe.esm.min.js'),
+  bgOpacity: 0.9,
+  showHideAnimationType: 'zoom',
+  initialZoomLevel: 'fit',
+  secondaryZoomLevel: 1.5,
+  maxZoomLevel: 3,
+  wheelToZoom: true
+}
+
+// 首页每篇文章的封面 <a class="article-gallery-img fancybox" href="文章地址"> 也在 .article-entry 里，
+// 必须排除，否则点封面就打不开文章了。
+const content = new PhotoSwipeLightbox({
+  ...options,
+  gallery: '.article-entry',
+  children: 'a.fancybox:not(.article-gallery-img)'
+})
+
+// 文章头部的 photos 相册（.article-gallery，位于 .article-entry 之外）
+const gallery = new PhotoSwipeLightbox({
+  ...options,
+  gallery: '.article-gallery',
+  children: 'a.fancybox'
+})
+
+const fillSize = (itemData, element) => {
+  const img = element.querySelector('img')
+  if (img && img.naturalWidth) {
+    itemData.src = img.currentSrc || img.src
+    itemData.width = img.naturalWidth
+    itemData.height = img.naturalHeight
+  }
+  return itemData
+}
+
+content.addFilter('domItemData', fillSize)
+gallery.addFilter('domItemData', fillSize)
+
+content.init()
+gallery.init()