图片标题对齐

// 创建临时元素测量实际渲染宽度
const testElement = document.createElement('span');
testElement.style.cssText = `
  position: absolute;
  visibility: hidden;
  font-size: 0.95rem;
  font-style: italic;
  white-space: nowrap;
`;
testElement.textContent = text;
document.body.appendChild(testElement);
const textWidth = testElement.offsetWidth;

// 检测是否会发生换行
const containerWidth = container.offsetWidth;
const actuallyWraps = textWidth > containerWidth * 0.9;

// 检测换行后是否分布不均（末行字数过少）
if (actuallyWraps && isMobile) {
  const words = text.split(/[\s\u3000]+/);
  const lastWord = words[words.length - 1];
  const avgWordLength = textLength / words.length;
  hasUnevenWrapping = lastWord.length < avgWordLength * 0.4;
}

// 中文字符宽度权重优化
const chineseCharCount = (text.match(/[\u4e00-\u9fff]/g) || []).length;
const englishCharCount = textLength - chineseCharCount;
const effectiveLength = englishCharCount + (chineseCharCount * 1.8);

// 根据屏幕尺寸和换行情况动态调整阈值
let threshold;
if (isMobile) {
  threshold = actuallyWraps ? 20 : 30; // 移动端更严格
} else if (isTablet) {
  threshold = actuallyWraps ? 35 : 50; // 平板端中等
} else {
  threshold = actuallyWraps ? 50 : 70; // 桌面端宽松
}

assets/scss/partials/_content.scss

assets/js/figcaption-alignment.js

layouts/partials/js-bundle.html

<figure>
  <img src="example.jpg" alt="示例图片">
  <figcaption>这是一个短标题</figcaption> <!-- 自动居中 -->
</figure>

<figure>
  <img src="example.jpg" alt="示例图片">
  <figcaption>这是一个很长的图片说明文字，包含了详细的描述信息，在移动端会换行，会自动左对齐以获得更好的阅读体验</figcaption> <!-- 自动左对齐 -->
</figure>

<figure>
  <img src="example.jpg" alt="示例图片">
  <figcaption class="force-left">短文本但强制左对齐</figcaption>
</figure>

<figure>
  <img src="example.jpg" alt="示例图片">
  <figcaption class="force-center">长文本但强制居中对齐</figcaption>
</figure>

figcaption {
  // 默认居中对齐
  text-align: center;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;

  // JavaScript 控制类
  &.js-long-caption {
    text-align: left;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  // 手动覆盖类
  &.force-center {
    text-align: center !important;
    max-width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

function alignFigcaptions() {
  const figcaptions = document.querySelectorAll('figcaption');

  figcaptions.forEach(caption => {
    const text = caption.textContent.trim();
    const effectiveLength = calculateEffectiveLength(text);
    const actuallyWraps = checkIfWraps(text, caption);
    const hasUnevenWrapping = checkUnevenWrapping(text, actuallyWraps);

    if (actuallyWraps && (isMobile || hasUnevenWrapping)) {
      caption.classList.add('js-long-caption');
    } else {
      caption.classList.add('js-short-caption');
    }
  });
}

let resizeTimeout;
window.addEventListener('resize', function() {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(alignFigcaptions, 200);
});

if (caption.classList.contains('force-center') ||
    caption.classList.contains('force-left')) {
  return; // 跳过处理
}

try {
  // 实际宽度测量
  textWidth = testElement.offsetWidth;
} catch (error) {
  // fallback: 基于字符数估算
  textWidth = effectiveLength * 12;
}

const DEBUG_MODE = true; // 开启调试信息

// 手动触发重新计算
window.alignFigcaptions();

// 临时禁用自动对齐
window.disableFigcaptionAlignment();

// 重新启用自动对齐
window.enableFigcaptionAlignment();

// 移动端阈值
if (isMobile) threshold = actuallyWraps ? 25 : 35; // 调整这些数值

// 桌面端阈值
else threshold = actuallyWraps ? 60 : 80; // 调整这些数值