Gahing's blog Gahing's blog
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Gahing / francecil

To be best
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 个人简历

  • 人生总结

  • 实用技巧

  • 影剧观感

  • 教育

  • 服务搭建

    • Code Server搭建指南
    • deepfake 项目搭建
    • 博客

      • 几款好看的博客主题
      • 博客收录注意事项
      • vuepress踩坑记录
        • 1. 双大括号中的代码会被编译成模板取值
        • 2. <details> 代码块无法正常使用
        • 3. <s> 多行无法正常使用
        • 4. 图片资源路径问题
      • 博客分类脑图生成
      • 博客评论踩坑记录
      • 博客配置全文搜索
      • 博客配置资源缓存
      • 如何部署博客
      • 给网站添加一只看板娘
    • 域名解析常见问题
  • 灵感记录
  • 理财投资

  • 生活常识

  • 知识科普

  • 自媒体

  • 面试经验

  • 闲言碎语
  • 服务搭建
  • 博客
gahing
2023-04-12
目录

vuepress踩坑记录

# 1. 双大括号中的代码会被编译成模板取值

示例,文档中写了如下的代码引用,会导致 vuepress 解析并报错

`{{options}}`
1

# 2. <details> 代码块无法正常使用

需要改用 ::: details xxx

# 3. <s> 多行无法正常使用

示例,如下代码将导致文档无法正常解析

<s> 是是

是是</s>
1
2
3

# 4. 图片资源路径问题

两种情况会出现问题:

  1. 引用的图片如果不以 ./ 或者 ../ 开头
  2. 路径中包含URL 非法字符,比如中文字符

问题原因简述:

  1. 问题1:webpack url-loader 的问题,没有正常处理相关路径图片引用。
  2. 问题2:产物没有做 URL 编码,但引用路径却是编码过的,导致文件没找到。

一种解决方案是调整打包配置,具体可以看 Vuepress 图片资源中文路径问题 (opens new window)

还有另一种思路:保证粘贴的图片一定是相对路径引用,并且编码正确。需要用到 VSCode 1.79 版本更新的图片粘贴功能 (opens new window)。VSCode 配置如下:

"markdown.copyFiles.destination": {
    "/docs/**/*": "${documentWorkspaceFolder}/docs/@assets/img/image.${fileName/(.*)\\.(.*)$/$2/}"
}
1
2
3

测试下 ![一张工作区图片](../../../@assets/img/image.jpeg) => 一张工作区图片

编辑 (opens new window)
上次更新: 2024/09/01, 23:56:56
博客收录注意事项
博客分类脑图生成

← 博客收录注意事项 博客分类脑图生成→

最近更新
01
浅谈代码质量与量化指标
08-27
02
快速理解 JS 装饰器
08-26
03
Vue 项目中的 data-v-xxx 是怎么生成的
09-19
更多文章>
Theme by Vdoing | Copyright © 2016-2024 Gahing | 闽ICP备19024221号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式