「开发：用 markdown 列表实现 hexo 照片墙」

开发：用 markdown 列表实现 hexo 照片墙

2022/12/13 字数统计： 1.5k 阅读时间： 2 mins 访问次数： ... 评论统计： ...

　　做给塔塔的照片墙实验——
　　挑几张珍藏的龙娘美照出来晒一晒【手动 emoji，这个用 JS 替换的字符会浮在封面上的设定实在是太弱智了……

测试效果

测试一下图文混排

　　jQuery 好，jQuery 妙，我的命都是 jQuery 给的，谢谢 jQuery【

碎碎念

　　哎呀一不小心又通宵了……但写代码真的比打游戏有趣多了【
　　折腾这个东西的时候发现之前写的图片脚本真的很不合理，比如把图片的 alt 简单粗暴地转换成 id，然后用 id 的选择器写样式，很显然是不符合规范的，需要找时间重置一下。
　　总之现在有点困，睡醒再来补上代码笔记吧……

总结笔记

　　*更新于 2022/12/14 凌晨
　　那么小结一下折腾的成果：

markdown 原文

1
2
3

- ![](/img/221213/11.png)
- ![终途行者](/img/221213/12.png)
- ![](/img/221213/13.png)

渲染结果

　　还修正了图片样式渲染的逻辑，之前的版本是在 markdown 图片标签的描述里插入 img-left 等样式标签控制图片悬浮在左侧或右侧。显然这样做就没办法给图片添加描述了，不过当时写的时候并没有给图片添加文字描述的打算，毕竟那时候发的图基本都是画稿，一张图要写一整篇文章的废话【……
　　这次创造需求主要是因为塔塔说想做个相册，于是我就开始折腾重新利用这个 alt 了。
　　此外还有 chrome 浏览器无法正确处理 calc 计算出的非整数的宽高的的 bug，体现在部分图片与描边之间会出现诡异的 1px 空白，呃……这个~~暂时想不到方法修~~其实我知道只要把 calc 变成 margin 就可以，但我平时也不用 chrome 所以开摆 :4o-6:
　　那么最终结果如下：

在 class 为 gallery 的 div 下使用 markdown 列表插入图片可以自动转换为瀑布流相册
并且将 alt 渲染为文字描述
虽然这个瀑布它……是横着流的…… :4o-3:
markdown 图片描述包含 img- 会作为图片的 classname 输出
将图片 id 与相关的样式删除，全部规范为 class
其实还有一些逻辑上的错误（比如先规定了边框大小再用 calc 计算图片尺寸）
但是能跑就行，摆了！:4o-7:

顺便还得到了这样一个很简约但高级的附带描述的图片样式，看之前做的甚至有些嫌弃了 x

　　那么接下来是 JS 的部分（需要引入 jQuery）：

$('img').each(function(){
  if ($(this).closest('figure').hasClass('article-gallery-img')) {
    return;
  }
  var alt = this.alt;
  // 输入 markdown 标签的文字描述
  $(this)
    .wrap('<figure class="article-gallery-img" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"></figure>')
    // photoSwipe 用的代码
    .wrap('<a href="' + this.src + '"></a>');
    // 在图片外添加显示大图链接
    if (!alt.includes('img-') && alt.length != 0) {
    // 如果描述中不包含【img-】且不为空
    // 去掉第二个条件的话会给每个图片都生成一个空的描述
      $(this).parent().after('<span>' + alt + '</span>');
      // 将描述生成为 span 追加在链接中
    }
    if (alt.includes('img-')) {
    // 如果描述中包含【img-】
      $(this).parents('a').addClass(alt);
      // 则为图片外层的链接添加与描述相同的 classname
    }
});

　　虽然我觉得这个 if 写得有点脑蚕但是一时半会也不知道怎么改了，我们的目标是：能跑就行！
　　CSS 的部分，因为有原主题自带的 photoSwipe 代码所以可能会比较抽象，总之元素的嵌套结构是这样的：

article-gallery-img
- a
  - img
- span

// 注：这里用的是 .styl 格式
// 如果是普通 css 要把括号拆出来

.article-gallery-img {
  display: inline-flex;
  flex-direction: column;
  a {
    line-height: 0;
    flex-shrink: 1;
    flex-grow: 1;
    min-height: 0;
    img {
      object-fit: cover;
    }
  }
  span {
    display: block;
    flex-shrink: 0;
    line-height: 1.3em;
  }
}

// gallery

.gallery ul{
  display: flex;
  gap: 1em;
  // 这个样式是只有部分浏览器支持
  // 手机上大概率显示不了
  margin-bottom: 1em;
  padding: 0;
}
.gallery .article-gallery-img,
.gallery .article-gallery-img a img {
  height: 100%;
  width: 100%;

后续计划

　　做到这里我的需求其实已经全部实现了，但是塔塔的没有……【那你到底在做些什么啊喂 x
　　塔塔的需求是在保持描述的同时为图片追加分类 tag，并且能在点击 tag 后只显示有相同 tag 的图片。这个需求确实有些复杂但应该也不是实现不了？
　　核心问题应该是如何将 alt 处理成 tag 与 描述 两部分，大概可以用标识符来截断？
　　如果 alt 是 [tag1,tag2|description] 的话，先用 .slipt('-') 切分 tag 和描述，然后用 .slipt(',') 切分 tag1 和 tag2，大概就可以完成字符串的处理了……？
　　然后把 tag 变成链接渲染出来也很简单，问题就在于如何只显示同标签的图片，同时保证页面美观与可复原，啊好复杂……

　　查到 css 可以识别中文类名？试试

　　真的可以诶……那就把 tag 变成 classname，点击 tag 后隐藏所有图片再显示带当前 tag 的图片应该就可以了？然后再在最前面追加一个显示全部的按钮，好等有空了试试……

　　和塔塔商量了一下最后的结果是把不需要的图片变窄 + 半透明，可以在保持排版错落有致的前提下凸显出需要的图片，好，好，但总之先睡觉，又要通宵到中午了【

無色人間。