知识库搭建中出现的问题

1. yarn build命令打包后,打开网页显示为空白的问题
   运行yarn build之后打开index.html网页显示空白，控制台显示如图：
   

   解决：在package.json文件中添加"homepage": "./"
   

   编译成功如下：
   

2. 页面加载仓库信息时github和gitee的token验证问题

• github：
  加载图片时可以直接获取download_url

if (isGithub) {
            // GitHub处理逻辑
            // 使用下载URL获取图片数据
            const imageResponse = await fetch(imageData.download_url);
            if (!imageResponse.ok) {
                throw new Error(`HTTP error! status: ${imageResponse.status}`);
            }
            const blob = await imageResponse.blob();
            const contentType = blob.type; // 获取MIME类型
            console.log('Image content type:', contentType); // 打印图片的MIME类型
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onloadend = () => {
                    const base64data = reader.result;
                    if (base64data) {
                        // 构建data URL
                        resolve(`data:${contentType};base64,${(base64data as string).split(',')[1]}`);
                    } else {
                        reject('Failed to read the blob as base64');
                    }
                };
                reader.onerror = reject;
                reader.readAsDataURL(blob);
            });
        }

• gitee:
  加载图片时无法直接获得private仓库中的图片，需要对请求响应内容进行解码

else {
            // Gitee处理逻辑
            // 直接使用响应中的Base64编码的图片数据
            if (imageData.encoding === 'base64' && imageData.content) {
                const base64data = imageData.content.replace(/\n/g, ''); // 清除Base64内容中的换行符
                const contentType = 'image/png'; // Gitee图片一般是PNG格式，根据实际情况调整
                return `data:${contentType};base64,${base64data}`;
            } else {
                throw new Error('Invalid image data from Gitee');
            }
        }

解码函数如下：

function base64Decode(str:string) {
        // 对Base64编码的字符串进行解码
        const text = atob(str);
        // 将字符转换为字符码
        const bytes = new Uint8Array(text.length);
        for (let i = 0; i < text.length; i++) {
            bytes[i] = text.charCodeAt(i);
        }
        // 使用TextDecoder将字节码转换为UTF-8字符串
        const decoder = new TextDecoder('utf-8');
        return decoder.decode(bytes);
    }

3. 获取仓库目录问题
   github 和 gitee 对目录获取的思路不一样

function getFolderData(folder: Folder, callback: (folders: Folder[], files: File[]) => void) {
    const query = getQuery()
    const folders = [] as Folder[]
    const files = [] as File[]
    const request = new XMLHttpRequest()
    let url = ''

    if (query.git === 'gitee') {
        // 确保 query.gitee 包含 {owner}/{repo}
        url = `https://gitee.com/api/v5/repos/${query.gitee}/contents/${encodeURI(getPath(folder))}`;
    } else {
        url = `https://api.github.com/repos/${query.github}/contents/${encodeURI(getPath(folder))}`;
    }
    
    request.open('GET', url);
    if (query.token) {
        if (query.git === 'gitee') {
            // 对于 Gitee，使用 'Bearer'
            request.setRequestHeader('Authorization', 'Bearer ' + query.token);
        } else if (query.git === 'github') {
            // 对于 GitHub，使用 'token'
            request.setRequestHeader('Authorization', 'token ' + query.token);
        }
    }

    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
            console.log(request.responseText);

            const tree = JSON.parse(request.responseText)
            tree.forEach((item: any) => {
                if (query.git === 'gitee' && item.type === 'dir') {
                    // 处理Gitee目录
                    folders.push({
                        name: item.name,
                        parent: folder,
                        folders: getFolderData,
                        files: []
                    });
                } else if (query.git === 'github' && item.type === 'dir') {
                    // 处理GitHub目录
                    folders.push({
                        name: item.name,
                        parent: folder,
                        folders: getFolderData,
                        files: []
                    });
                } else if ((query.git === 'gitee' && item.type === 'file') || (query.git === 'github' && item.type === 'file')) {
                    // 处理文件
                    files.push({
                        name: item.name,
                        parent: folder
                    });
                }
            })
            callback(folders, files)
        }
    }
    request.send(null)
}

4. 当代码跑不通时记得通过调试语句在控制台输出结果信息来进行debug

• console.log('Image meta data:', imageData);
• console.log('Image content type:', contentType);
• console.error('Error fetching image:', error);
• 打印当前处理的图片url:console.log('Processing image with URL:', imageUrl);
• 打印替换图片后的url: console.log('Content after replacing image URL:', content);
• console.log(request.responseText);
• console.log('Processed content:', result);
• console.error('Error processing content:', error);
• console.error('Error fetching GitHub private file:', error);
• console.error('Error fetching Gitee private file:', error);
• console.log(request.status);
• console.log(request.responseText);
• 打印渲染的markdown内容:console.log(decodedContent);