pref: 优化图片效果

src/css/addon/commons.scss

@@ -381,9 +381,7 @@ main {
  p {
  > img[data-src],
  > a.popup {
- &:not(.normal):not(.left):not(.right) {
- @include align-center;
- }
+ display: inline-block;
  }
  }
 

src/css/style.scss

@@ -8,3 +8,4 @@
 @import "bootstrap/dist/css/bootstrap.css";
 @import "@fortawesome/fontawesome-free/css/all.css";
 @import "tocbot/dist/tocbot.css";
+@import "magnific-popup/dist/magnific-popup.css";

src/js/modules/components/img-popup.js

@@ -3,8 +3,11 @@
  *
  * See: https://github.com/dimsemenov/Magnific-Popup
  */
+import {preImg} from "../../patch/pre-img";
 
 export function imgPopup() {
+ preImg();
+
  if ($('.popup') <= 0) {
  return;
  }

src/js/patch/index.js

@@ -1,10 +1,12 @@
 import {codeClass, codeBlock} from './codeClass';
 import {addClassToTable} from "./table";
 import {activeSidebar} from "./sidebar";
+import {preImg} from "./pre-img";
 
 export const patch = {
  codeClass: codeClass,
  codeBlock: codeBlock,
  addTableClass: addClassToTable,
- activeSidebar: activeSidebar
+ activeSidebar: activeSidebar,
+ preImg: preImg,
 };

src/js/patch/pre-img.js

@@ -0,0 +1,25 @@
+export function preImg() {
+ const imgSelector = '.content p img';
+ const images = document.querySelectorAll(imgSelector);
+ images.forEach((img) => {
+ let anchorElement = document.createElement('a')
+ let divElement = document.createElement('div')
+ anchorElement.setAttribute('href', img.getAttribute('src'));
+ anchorElement.classList.add('popup');
+ anchorElement.classList.add('img-link')
+ setWidth(img, anchorElement)
+
+ img.parentNode.insertBefore(divElement, img);
+ divElement.appendChild(anchorElement);
+ anchorElement.appendChild(img);
+ })
+}
+
+const setWidth = (img, anchorElement) => {
+ if (img.getAttribute('width'))
+ anchorElement.style.width = img.getAttribute('width')
+ if (img.getAttribute('height'))
+ anchorElement.style.height = img.getAttribute('height')
+ img.removeAttribute('width')
+ img.removeAttribute('height')
+}

src/main.js

@@ -13,7 +13,7 @@ import {initTopbar} from "./js/modules/layouts/topbar";
 import {categoryCollapse} from "./js/modules/components/category-collapse";
 import {imgLazy} from "./js/modules/components/img-lazyload";
 import {toc} from "./js/modules/components/toc";
-import {initClipboard} from "./js/modules/plugins";
+import {imgPopup, initClipboard} from "./js/modules/plugins";
 // 因为 patch/index 中有内容且没有引用, 所有没有在 index 中引入
 import { patch } from "./js/patch/";
 
@@ -26,6 +26,6 @@ patch.addTableClass();
 patch.activeSidebar();
 categoryCollapse();
 imgLazy();
-// imgPopup();
+imgPopup();
 initClipboard();
 toc();