在 Hugo 中集成 Memos 多用户微博系统

目录

摘要

本文详细阐述在 Hugo 静态网站生成器中集成 Memos 0.18.2 多用户微博系统的完整技术方案。通过 RESTful API 调用、Twikoo 评论系统集成、图片资源处理等关键技术，实现了在静态网站中展示动态微博内容的功能。本文涵盖系统架构设计、核心代码实现、性能优化策略以及部署配置指南，为开发者提供完整的实施参考。样例请见本站 说说页面 。

1. 主要流程

1.1 系统组成

  • 前端框架: Hugo 静态网站生成器
  • 微博服务: Memos 0.18.2 RESTful API
  • 评论系统: Twikoo 评论服务
  • 图片处理: ViewImage 灯箱 + Lozad 懒加载
  • 内容渲染: Marked.js Markdown 解析器

1.2 数据流架构

Memos API → 数据获取 → 内容处理 → 评论统计 → HTML 渲染 → 前端展示

2. 核心实现方案

2.1 多用户配置管理

在 Hugo 模板中定义用户配置数组：

var memosMyList = [
    {
        "creatorName": "用户A",
        "website": "https://example.com",
        "link": "https://memos.example.com",
        "creatorId": "1",
        "avatar": "/avatars/user-a.png",
        "twikoo": "https://twikoo.example.com"
    },
    {
        "creatorName": "用户B",
        "website": "https://example.org", 
        "link": "https://memos.example.com",
        "creatorId": "2",
        "avatar": "/avatars/user-b.png",
        "twikoo": "https://twikoo.example.com"
    }
];

2.2 API 集成与数据处理

2.2.1 并发数据获取

async function getAllUsersMemos() {
    const userPromises = currentUsers.map(user => 
        getUserMemos(user.link, user.creatorId, user.creatorName, user.avatar)
    );
    
    const allUserResults = await Promise.allSettled(userPromises);
    const successfulResults = [];
    
    allUserResults.forEach((result) => {
        if (result.status === 'fulfilled' && Array.isArray(result.value)) {
            successfulResults.push(...result.value);
        }
    });
    
    return successfulResults;
}

2.2.2 数据验证与标准化

function validateUserConfig() {
    const validUsers = currentUsers.filter(user => 
        user.creatorId && user.link && user.creatorName
    );
    return validUsers.length > 0;
}

function normalizeUrl(baseUrl, path) {
    const normalizedBase = baseUrl.endsWith('/') ? 
        baseUrl.slice(0, -1) : baseUrl;
    const normalizedPath = path.startsWith('/') ? path : '/' + path;
    return normalizedBase + normalizedPath;
}

2.3 评论系统集成

2.3.1 批量评论统计

async function getMemoCount(memos) {
    const twikooGroups = {};
    
    // 按 Twikoo 环境分组处理
    memos.forEach(item => {
        if (!item?.twikoo) return;
        
        const envId = item.twikoo;
        const memoUrl = normalizeUrl(item.link, `/m/${item.id}`);
        
        if (!twikooGroups[envId]) {
            twikooGroups[envId] = [];
        }
        twikooGroups[envId].push({ url: memoUrl });
    });
    
    const allTwikooCount = [];
    
    for (const [envId, items] of Object.entries(twikooGroups)) {
        try {
            const urls = items.map(item => item.url);
            const res = await twikoo.getCommentsCount({
                envId: envId,
                urls: urls,
                includeReply: false
            });
            
            if (Array.isArray(res)) {
                allTwikooCount.push(...res);
            }
        } catch (error) {
            console.error(`Twikoo 环境 ${envId} 评论数获取失败:`, error);
        }
    }
    
    // 关联评论数到对应 Memo
    memos.forEach(item => {
        if (!item?.twikoo) {
            item.count = 0;
            return;
        }
        
        const url = normalizeUrl(item.link, `/m/${item.id}`);
        const countData = allTwikooCount.find(o => o?.url === url);
        item.count = countData?.count || 0;
    });
    
    return memos;
}

2.4 内容渲染引擎

2.4.1 Markdown 内容处理

function processMemoContent(content) {
    const TAG_REGEX = /#([^#\s!.,;:?"'()]+)(?= )/g;
    const IMAGE_REGEX = /\!\[(.*?)\]\((.*?)\)/g;
    const LINK_REGEX = /(?<!!)\[(.*?)\]\((.*?)\)/g;
    
    let processed = content
        .replace(TAG_REGEX, '')
        .replace(IMAGE_REGEX, '')
        .replace(LINK_REGEX, '<a class="primary" href="$2" target="_blank">$1</a>');
    
    return marked.parse(processed);
}

2.4.2 图片资源处理

function processImageResources(content, memo) {
    let imageHtml = '';
    
    // 处理内联图片
    const inlineImages = content.match(IMAGE_REGEX);
    if (inlineImages?.length > 0) {
        const imageString = inlineImages.join('').replace(/,/g, '');
        imageHtml = imageString.replace(IMAGE_REGEX, 
            '<div class="memo-resource width-100">' +
            '<img class="lozad" data-src="$2" alt="$1">' +
            '</div>'
        );
    }
    
    // 处理附件图片
    if (memo.resourceList?.length > 0) {
        memo.resourceList.forEach(resource => {
            if (resource.type?.startsWith('image')) {
                const imageUrl = resource.externalLink || 
                    normalizeUrl(memo.link, `/o/r/${resource.uid || resource.id}`);
                imageHtml += '<div class="memo-resource w-100">' +
                    '<img class="lozad" data-src="${imageUrl}">' +
                    '</div>';
            }
        });
    }
    
    return imageHtml ? 
        '<div class="resource-wrapper">' +
        '<div class="images-wrapper my-2" view-image>' + imageHtml + '</div>' +
        '</div>' : '';
}

3. 性能优化策略

3.1 分页加载机制

function pagination(data, page, limit) {
    const startIndex = (page - 1) * limit;
    const endIndex = startIndex + limit;
    return data.slice(startIndex, endIndex);
}

function updateData(data) {
    const validData = data.filter(item => item && typeof item === 'object');
    validData.sort((a, b) => b.createdTs - a.createdTs);
    
    const pageData = pagination(validData, currentPage, itemsPerPage);
    renderMemoList(pageData);
    
    const totalPages = Math.ceil(validData.length / itemsPerPage);
    updatePaginationControls(currentPage, totalPages);
}

3.2 图片性能优化

function initializeImageOptimizations() {
    // 图片懒加载
    if (typeof lozad !== 'undefined') {
        const imageObserver = lozad('.lozad', {
            rootMargin: '50px 0px',
            threshold: 0.1
        });
        imageObserver.observe();
    }
    
    // 图片灯箱初始化
    if (typeof ViewImage !== 'undefined') {
        ViewImage.init('.images-wrapper img');
    }
}

3.3 缓存策略

class MemosCache {
    constructor() {
        this.cacheKey = 'memos-data-cache';
        this.cacheTimeout = 5 * 60 * 1000; // 5分钟
    }
    
    getCachedData() {
        const cached = localStorage.getItem(this.cacheKey);
        if (!cached) return null;
        
        const { data, timestamp } = JSON.parse(cached);
        if (Date.now() - timestamp > this.cacheTimeout) {
            localStorage.removeItem(this.cacheKey);
            return null;
        }
        
        return data;
    }
    
    setCachedData(data) {
        const cacheObject = {
            data: data,
            timestamp: Date.now()
        };
        localStorage.setItem(this.cacheKey, JSON.stringify(cacheObject));
    }
}

4. 错误处理与监控

4.1 健壮性设计

async function getUserMemos(link, userId, userName, userAvatar) {
    try {
        // 参数验证
        if (!link || !userId) {
            throw new Error('缺少必要参数');
        }
        
        const normalizedLink = link.endsWith('/') ? link : link + '/';
        const apiUrl = `${normalizedLink}api/v1/memo?creatorId=${userId}&rowStatus=NORMAL&limit=50`;
        
        const response = await fetch(apiUrl);
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        
        const data = await response.json();
        
        if (!Array.isArray(data)) {
            throw new Error('API 返回数据格式错误');
        }
        
        return data.filter(item => item && typeof item === 'object')
            .map(item => ({
                ...item,
                link: normalizedLink,
                avatar: userAvatar,
                creatorName: userName
            }));
            
    } catch (error) {
        console.error(`获取用户 ${userName} 数据失败:`, error);
        return []; // 优雅降级
    }
}

4.2 性能监控

class PerformanceMonitor {
    static async measureApiCall(apiCall) {
        const startTime = performance.now();
        try {
            const result = await apiCall();
            const duration = performance.now() - startTime;
            
            if (duration > 1000) { // 超过1秒记录警告
                console.warn(`API 调用耗时较长: ${duration.toFixed(2)}ms`);
            }
            
            return result;
        } catch (error) {
            const duration = performance.now() - startTime;
            console.error(`API 调用失败，耗时 ${duration.toFixed(2)}ms:`, error);
            throw error;
        }
    }
}

5. 部署配置指南

5.1 文件结构规范

hugo-site/
├── layouts/
│   └── _default/
│       └── memos.html
├── static/
│   └── memos/
│       ├── js/
│       │   ├── memos-core.js
│       │   ├── twikoo.min.js
│       │   ├── marked.min.js
│       │   └── lozad.min.js
│       └── css/
│           └── memos-styles.css
└── content/
    └── memos.md

5.2 Hugo 模板配置

<!-- layouts/_default/memos.html -->
{{ define "main" }}
<div class="memos-container">
    <header class="memos-header">
        <h1>{{ .Title }}</h1>
    </header>
    
    <div class="memos-content">
        <div id="memo-list" class="memo-list-container"></div>
        <button id="load-more" class="load-more-button">加载更多</button>
    </div>
</div>

<script src="/memos/js/marked.min.js"></script>
<script src="/memos/js/lozad.min.js"></script>
<script src="/memos/js/twikoo.min.js"></script>
<script src="/memos/js/memos-core.js"></script>
{{ end }}

5.3 环境变量配置

// 生产环境配置
const MEMOS_CONFIG = {
    apiEndpoints: {
        memos: 'https://memos.example.com/api/v1',
        twikoo: 'https://twikoo.example.com'
    },
    performance: {
        cacheTimeout: 300000,
        paginationSize: 10,
        imageLazyLoad: true
    },
    features: {
        multiUser: true,
        comments: true,
        imageZoom: true
    }
};

6. 安全考虑

6.1 输入验证

function sanitizeUserInput(input) {
    if (typeof input !== 'string') return '';
    
    return input
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#x27;')
        .replace(/\//g, '&#x2F;');
}

6.2 CSP 配置建议

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; 
               script-src 'self' https://memos.example.com https://twikoo.example.com;
               img-src 'self' https: data:;
               style-src 'self' 'unsafe-inline';
               connect-src 'self' https://memos.example.com https://twikoo.example.com">

7. 测试方案

7.1 单元测试示例

describe('Memos Integration', () => {
    test('URL normalization', () => {
        expect(normalizeUrl('https://example.com/', '/m/123'))
            .toBe('https://example.com/m/123');
        
        expect(normalizeUrl('https://example.com', 'm/123'))
            .toBe('https://example.com/m/123');
    });
    
    test('Content processing', () => {
        const input = 'Hello [world](https://example.com)';
        const processed = processMemoContent(input);
        expect(processed).toContain('href="https://example.com"');
    });
});

8. 结论

本文提出的 Hugo 与 Memos 多用户微博系统集成方案，通过系统的架构设计和严谨的代码实现，成功在静态网站环境中引入了动态社交功能。关键技术贡献包括：

  1. 多用户数据聚合: 实现了多 Memos 用户内容的统一获取和展示
  2. 评论系统集成: 通过 Twikoo 服务为动态内容添加评论功能
  3. 性能优化: 采用分页加载、图片懒加载等策略确保用户体验
  4. 错误恢复: 完善的错误处理机制保证系统稳定性

该方案具有良好的可扩展性，可根据实际需求进一步集成内容搜索、用户筛选、数据分析等功能。通过模块化设计和标准化接口，为静态网站的社交功能扩展提供了可靠的技术基础。

关键参考

来自林木木老师： 哔哔广场

© 转载需附带本文链接，依据 CC BY-NC-SA 4.0 发布。

猜你喜欢

借助 GitHub Actions 自动...
评论