使用pelican搭建博客的三种图片使用方式

# 进入blog/content目录
cd blog/content
mkdir images

# pelicanconf.py 中添加以下内容
STATIC_PATHS = ['images']  # 图片存储目录

# 示例：引用本地图片
这是一张直接引用的本地图片：
![示例图片1](images/tutorial/local_test.jpg)
# 可选：添加图片标题（鼠标悬浮时显示）
![示例图片1-带标题](images/tutorial/local_test.jpg "这是直接引用的本地图片")

# 博客根目录执行，生成静态文件
pelican content
# 进入output目录，启动本地服务
cd output
python -m pelican.server

pip install pelican-photos

# pelicanconf.py 中添加以下配置
PLUGINS = ['photos']  # 启用pelican-photos插件（注意：实际注册名为'photos'）

# 图片存储目录（在content下创建）
PHOTO_LIBRARY = 'content/photos'
# 缩略图尺寸（宽x高，单位px，按比例缩放，质量）
PHOTO_THUMB = (250, 180, 60)
# 大图最大尺寸（避免图片过大影响加载，质量）
PHOTO_GALLERY = (1200, 900, 85)
# 图片URL路径
PHOTO_URL = '/photos/'
PHOTO_LIBRARY_URL = '/photos/'
# 启用内联图片和画廊
PHOTO_INLINE_ENABLED = True
PHOTO_INLINE_GALLERY_ENABLED = True
# 图片加水印（按需开启）
PHOTO_WATERMARK = False
PHOTO_WATERMARK_TEXT = "你的水印文字"

# 进入blog/content目录
cd blog/content
mkdir photos
# 复制图片到photos目录（本地操作，无需命令行）

# 在主题模板目录下创建inline_gallery.html文件
mkdir -p themes/Flex/templates

<div class="gallery">
    {% for gallery in galleries %}
        {% for img in gallery.images %}
            <figure>
                <a href="{{ SITEURL }}/{{ img.image.dst }}">
                    <img src="{{ SITEURL }}/{{ img.thumb.dst }}" alt="{{ img.caption }}">
                </a>
                {% if img.caption %}
                    <figcaption>{{ img.caption }}</figcaption>
                {% endif %}
            </figure>
        {% endfor %}
    {% endfor %}
</div>

#!/usr/bin/env python3
"""
Fix image paths in generated HTML files by replacing Windows backslashes with forward slashes.
"""

import os
import re

# Configuration
OUTPUT_DIR = 'output'


def fix_html_file(file_path):
    """Fix image paths in a single HTML file."""
    try:
        with open(file_path, 'r', encoding='utf-8') as f:
            content = f.read()

        # Replace backslashes in image URLs with forward slashes
        # This targets URLs like: https://example.com/photos/image.jpg
        fixed_content = re.sub(r'(https?://[^"\']+)\\([^"\'\\]+)', r'\1/\2', content)

        # Add .jpg extension to image URLs that don't have it
        # This targets URLs like: https://example.com/photos/image
        fixed_content = re.sub(r'(https?://[^"\']+/photos/[^"\'\\/]+?)([^."\']+)"', r'\1\2.jpg"', fixed_content)

        # Fix image paths with thumb suffixes
        # This targets URLs like: https://example.com/photos/image..jpg and https://example.com/photos/imagethumb
        fixed_content = re.sub(r'(https?://[^"\']+/photos/[^"\'\\/]+?)(a|t)\b', r'\1.\2.jpg', fixed_content)

        # Remove unwanted suffixes from image filenames in URLs
        # This targets URLs like: https://example.com/photos/image..jpg.jpg (remove 'a' suffix)
        # and https://example.com/photos/imagethumb.jpg (remove '..jpg' suffix)
        fixed_content = re.sub(r'(https?://[^"\']+/photos/[^"\'\\/]+?)(a|t)\.jpg\b', r'\1.jpg', fixed_content)

        # Fix None captions
        fixed_content = fixed_content.replace('alt="None"', '')

        if fixed_content != content:
            with open(file_path, 'w', encoding='utf-8') as f:
                f.write(fixed_content)
            print(f"Fixed: {file_path}")

    except Exception as e:
        print(f"Error processing {file_path}: {e}")


def fix_all_html_files():
    """Fix image paths in all HTML files in the output directory."""
    for root, dirs, files in os.walk(OUTPUT_DIR):
        for file in files:
            if file.endswith('.html'):
                file_path = os.path.join(root, file)
                fix_html_file(file_path)


if __name__ == '__main__':
    print("Fixing image paths in HTML files...")
    fix_all_html_files()
    print("Done!")

# 示例1：单张图片展示（直接显示大图）
<img src="{photo}branch-deploy/branch-intro.jpg" alt="三个分支的功能分工示意图">

# 示例2：单张图片展示（带lightbox效果）
<img src="{lightbox}branch-deploy/main-branch-files.jpg" alt="main分支的源文件结构">

# 示例3：多张图片批量展示（自动生成缩略图网格）

    
    

        

            
            
None
        
    
    
    
    

        

                    

                        
                    
                    

                        
                    
                    

                        
                    
                    

                        
                    
        
    
    
    
    <
    >
    
    
    

        ×
        
        

    

# 生成静态文件
pelican content
# 修复图片路径
python fix_image_paths.py

cd output
python -m pelican.server

# 示例：引用github图床的图片
这是一张来自github图床的技术笔记截图：
![舞者剪影](https://raw.githubusercontent.com/unclevicky/unclevicky-image-bed/main/dancer/silhouette.jpg "芭蕾舞者剪影图片")