Piclsit自定义链接

# 响应式图片卡片
<a href="$url" target="_blank">   <img src="$url" alt="$fileName" loading="lazy" style="width:100%;max-width:var(--size);height:auto;display:block;--size:600px;border:1px solid black;"> </a>

<!-- 外层锚点标签：使图片可点击 -->
<a href="$url" target="_blank">
  <!-- 图片标签 -->
  <img 
    src="$url" 
    alt="$fileName" 
    loading="lazy" 
    style="
      width:100%;                              /* 图片宽度占满容器 */
      max-width:var(--size);                   /* 最大宽度受 --size 变量限制 */
      height:auto;                             /* 高度自动适配，保持宽高比 */
      display:block;                           /* 块级显示，消除inline间距 */
      --size:600px;                            /* 自定义CSS变量，最大宽度为600px */
      border:1px solid black;                  /* 1px 纯黑色边框 */
    "
  >
</a>

<!-- 
说明：
- $url：图片链接（用于 href 和 src）
- $fileName：文件名（用于 alt 属性）
- target="_blank"：在新标签页打开链接
- loading="lazy"：图片懒加载，改善页面性能
-->

<a href="$url" target="_blank" style="display: inline-block; border: 0px solid black; padding: 8px; background-color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);"><img src="$url" alt="$fileName" loading="lazy" style="width:100%;max-width:var(--size);height:auto;display:block;--size:600px;"></a>

<!-- 外层锚点标签：使图片可点击，inline-block 使其宽度自适应 -->
<a href="$url" target="_blank" style="
  display: inline-block;                       /* 块级行内元素，支持宽高和边框 */
  border: 1px solid black;                     /* 1px 纯黑色边框 */
  padding: 8px;                                /* 黑框与图片之间的白色填充 */
  background-color: white;                     /* 填充区域背景色 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 投影：向下4px，模糊12px，透明度15% */
">
  <!-- 图片标签 -->
  <img 
    src="$url" 
    alt="$fileName" 
    loading="lazy" 
    style="
      width: 100%;                             /* 图片宽度占满容器 */
      max-width: var(--size);                  /* 最大宽度受 --size 变量限制 */
      height: auto;                            /* 高度自动适配，保持宽高比 */
      display: block;                          /* 块级显示，消除 inline 间距 */
      --size: 600px;                           /* 自定义 CSS 变量，最大宽度为 600px */
    "
  >
</a>

<!-- 
说明：
- $url：图片链接（用于 href 和 src）
- $fileName：文件名（用于 alt 属性）
- target="_blank"：在新标签页打开链接
- loading="lazy"：图片懒加载，改善页面性能
- padding: 8px：黑框和图片之间的白色间距，可调节
- box-shadow：投影效果，可调节深度和透明度
-->

<a href="$url" target="_blank" style="display: block; width: fit-content; max-width: 100%; margin: 1.5rem auto; padding: 8px; background-color: white; border: 1px solid black; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); text-decoration: none;"><img src="$url" alt="$fileName" loading="lazy" decoding="async" style="width:100%; max-width:600px; height:auto; display:block;"></a>

<!-- 
========================================
外层锚点标签 <a>：承载点击跳转和视觉卡片
========================================
-->
<a 
  href="$url" 
  target="_blank" 
  style="
    /* 
      display: block
      ----------------
      作用：将 <a> 设为块级元素
      原因：inline-block 虽然也能设宽高，但会受到行内基线影响，
            可能导致图片底部出现几像素的神秘间隙（ghost margin）。
            block 彻底消除这个问题，且支持 margin: auto 居中。
      替代：inline-block（有间隙风险）/ flex（需要父容器配合）
    */
    display: block;

    /* 
      width: fit-content
      -------------------
      作用：让元素宽度等于其内容宽度（即图片宽度）
      原因：如果不设，block 默认占满父容器 100%，黑框会拉得很长很难看。
            fit-content 让黑框"刚好包住"图片，实现完美包围。
      注意：IE 不支持，但 2024 年已无需考虑 IE。
      替代：width: max-content（不允许换行，更严格）
            width: min-content（取最小宽度，通常太窄）
    */
    width: fit-content;

    /* 
      max-width: 100%
      ----------------
      作用：限制最大宽度不超过父容器
      原因：防止图片比屏幕还宽时，fit-content 导致整体溢出视口。
            这是移动端适配的关键保险。
      配合：与 width: fit-content 一起，"自适应但不超过屏幕"。
    */
    max-width: 100%;

    /* 
      margin: 1.5rem auto
      --------------------
      作用：设置外边距
      拆解：
        - 1.5rem：上下边距，让图片与正文段落之间有呼吸空间
                  rem 是相对根元素(html)字体大小的单位，默认 1rem = 16px
                  所以 1.5rem ≈ 24px，可根据文章密度调整（1rem 紧凑 / 2rem 宽松）
        - auto：左右边距自动计算，实现水平居中
                原理：父容器剩余空间均分到左右两侧
                条件：必须配合 display: block 且宽度小于父容器
      替代：margin: 2rem 0（左对齐，上下留白更大）
    */
    margin: 1.5rem auto;

    /* 
      border: 1px solid black
      -------------------------
      作用：绘制黑框边框
      拆解：
        - 1px：边框粗细，1px 最精致，2px 更醒目
        - solid：实线样式，还有 dashed（虚线）、dotted（点线）
        - black：边框颜色，可替换为 #000000、rgb(0,0,0)、#333（深灰更柔和）
      注意：原版的 "0px solid black" 实际上不显示边框，这里改为 1px 才有黑框效果。
    */
    border: 1px solid black;

    /* 
      padding: 8px
      -------------
      作用：内边距，黑框与图片之间的白色留白
      原因：没有 padding，图片会贴边，显得拥挤。
            8px 是经典卡片间距，舒适不夸张。
      调节：
        - 4px：更紧凑，适合图片密集的场景
        - 12px：更宽松，更有"相框"感
        - 16px：留白充足，适合单图展示
      注意：padding 会增加元素总尺寸，但这里 width: fit-content 只看内容区。
    */
    padding: 8px;

    /* 
      background-color: white
      -----------------------
      作用：填充区域的背景色
      原因：padding 区域默认透明，会显示父容器背景（可能是灰/黑/花纹）。
            设为白色确保黑框内的留白是干净的白色，形成"白底黑框"的经典相框效果。
      替代：#fafafa（微灰，更柔和）、transparent（无填充，继承背景）
      注意：暗色模式下可能需要切换，见文末适配方案。
    */
    background-color: white;

    /* 
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)
      -------------------------------------------
      作用：投影效果，让卡片"浮"起来
      拆解：
        - 0：水平偏移，0 表示正下方投影，无左右偏移
        - 4px：垂直偏移，正值向下，越大投影越远
        - 12px：模糊半径，0 是硬边阴影，越大越柔和
        - rgba(0, 0, 0, 0.15)：颜色与透明度
            - 0,0,0：纯黑
            - 0.15：15% 不透明度，很轻柔
      调节：
        - 轻：0 2px 6px rgba(0,0,0,0.1)  — 几乎不可见，很克制
        - 中：0 4px 12px rgba(0,0,0,0.15) — 默认，自然悬浮
        - 深：0 8px 16px rgba(0,0,0,0.25) — 明显浮起，适合深色背景
      进阶：可叠加多层阴影增加真实感
            box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);
    */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* 
      text-decoration: none
      ----------------------
      作用：去除链接默认下划线
      原因：<a> 标签默认有下划线，会穿过图片底部很难看。
            设为 none 保持视觉干净。
      注意：如果全局已重置 a { text-decoration: none; }，这行可省。
    */
    text-decoration: none;
  "
>
  <!-- 
  ========================================
  图片标签 <img>：实际展示的图片内容
  ========================================
  -->
  <img 
    src="$url" 
    alt="$fileName" 
    loading="lazy" 
    decoding="async"
    style="
      /* 
        width: 100%
        ------------
        作用：图片宽度占满容器
        原因：容器宽度由 fit-content 决定（即图片原始宽度或 max-width 限制）。
              100% 确保图片不会小于容器，避免出现奇怪的空隙。
        配合：与 max-width: 600px 一起，"尽可能宽但不超过 600px"。
      */
      width: 100%;

      /* 
        max-width: 600px
        ------------------
        作用：限制图片最大显示宽度
        原因：防止高清大图（如 3000px）直接撑爆页面。
              600px 是适合博客正文的阅读宽度，不会太大也不会太小。
        调节：
          - 400px：更紧凑，适合小图/截图
          - 800px：更震撼，适合摄影/插画
          - 100%：取消限制，让图片随容器缩放
        注意：这是"显示尺寸"限制，不是"下载尺寸"，原图仍然高清。
      */
      max-width: 600px;

      /* 
        height: auto
        ------------
        作用：高度自动计算
        原因：与 width 配合，保持图片原始宽高比。
              如果不设，图片可能变形（被拉伸或压扁）。
        原理：浏览器根据 width 和原始宽高比，自动算出 height。
      */
      height: auto;

      /* 
        display: block
        --------------
        作用：将图片设为块级元素
        原因：img 默认是 inline 元素，底部会受到行高(line-height)影响，
              出现约 3-5px 的空白间隙（descender space）。
              block 彻底消除这个间隙，图片底部紧贴容器。
        这是解决图片底部白边的经典方案。
      */
      display: block;
    "
  >
</a>

<!-- 
========================================
变量说明（PicList 替换规则）
========================================
- $url：上传成功后返回的图片直链地址
        会被同时填入 href（点击跳转目标）和 src（图片源地址）
- $fileName：上传时的原始文件名（不含扩展名）
            用于 alt 属性，提升可访问性和 SEO
- target="_blank"：在新标签页打开图片原图
- loading="lazy"：浏览器视口外图片延迟加载，减少首屏流量和渲染压力
- decoding="async"：图片解码异步进行，不阻塞主线程，提升页面响应速度
-->

<!-- 
========================================
暗色模式适配（可选，需配合 CSS）
========================================
@media (prefers-color-scheme: dark) {
  .pic-card {
    background-color: #1e1e1e;    // 深灰背景替代纯白
    border-color: #444444;         // 边框变浅，避免太突兀
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);  // 投影加深
  }
}
-->