首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Vuepress / Vuepress博客插件中自定义固定链接?

Vuepress是一个基于Vue.js的静态站点生成器,它允许开发者使用Markdown编写文档,并生成具有响应式布局的静态网站。在Vuepress中,可以通过自定义插件来实现对固定链接的定制。

在Vuepress中自定义固定链接的步骤如下:

  1. 创建一个Vuepress插件:首先,在Vuepress项目的根目录下,创建一个名为.vuepress的文件夹,然后在该文件夹中创建一个名为plugins的文件夹。
  2. 编写插件:在plugins文件夹中创建一个JavaScript文件,例如custom-link.js。在该文件中,可以通过Vuepress提供的API来实现对固定链接的定制。以下是一个简单的示例:
代码语言:txt
复制
module.exports = {
  extendPageData($page) {
    if ($page.path === '/path/to/page') {  // 自定义页面路径
      $page.frontmatter.permalink = '/custom-link/';  // 自定义固定链接
    }
  }
}

在上述示例中,extendPageData方法用于修改页面的元数据。通过判断页面的路径,可以选择性地对特定页面进行固定链接的定制。在示例中,如果页面的路径为/path/to/page,则将固定链接修改为/custom-link/

  1. 配置插件:在Vuepress项目的根目录中的.vuepress/config.js文件中,配置刚刚创建的插件。示例如下:
代码语言:txt
复制
module.exports = {
  plugins: [
    ['@vuepress/blog', {
      directories: [
        {
          id: 'post',
          dirname: '_posts',
          path: '/post/',
          itemPermalink: '/post/:year/:month/:day/:slug'
        }
      ],
      frontmatters: [
        {
          id: 'tag',
          keys: ['tag'],
          path: '/tag/',
          layout: 'Tags',
          scopeLayout: 'Tag'
        }
      ]
    }],
    ['./plugins/custom-link.js']  // 配置自定义插件
  ]
}

在示例中,配置了Vuepress的官方博客插件@vuepress/blog,并指定了文章目录的相关配置。然后,在plugins数组中添加了自定义插件./plugins/custom-link.js

  1. 启动开发服务器或构建静态网站:完成插件的配置后,通过命令行工具进入Vuepress项目的根目录,运行npm run dev启动开发服务器,或运行npm run build构建静态网站。

总结:通过编写自定义插件并在Vuepress配置文件中进行配置,可以实现对Vuepress或Vuepress博客插件中固定链接的定制。以上是一个简单示例,具体的实现方式可以根据需求进行调整。

请注意,上述答案中提到了Vuepress和Vuepress博客插件,但并未提及具体的腾讯云产品。根据要求,不涉及云计算品牌商的信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何快速搭建好看的个人博客(完整配置与源码)

(当然如果你想直接通过官网来学习, 可以直接看官网,点击链接就可以喔) 项目搭建 安装vuepress 第一步就是进行vuepress进行安装: 如果使用npm来安装, Node.js版本需要 >=8...上面采用了两个方式配置侧边栏, 一个侧边栏是node目录下直接是写的markdown文章, 而在web下又有多个分类, 所有有进行了分栏配置, 其实这两种方式在我们博客中都是比较常见的 自定义布局内容...比如就像我的博客左侧固定的内容, 就是自定义的全局组件....1.2.0版本, 这个版本已经将这个功能抽离出来作为插件的方式使用, 下面就看一下具体如何使用的: 首先需要安装插件: yarn add -D @vuepress/plugin-pwa # 或者 npm...在.vuepress下的config.js插件配置: module.exports = { plugins: [ [ 'vuepress-plugin-comment',

1.5K10

何在 vuePress添加博客导流公众号-即输入验证码解锁全站文章

id 文档的readmore.js用 openWrite 的链接也行,直接下载到本地,在头部全局方式引入也可以 02 博客设置 任选自己的一篇md文档,在文档末尾增加如下一段js代码 不要问为什么能在...自定义组件出....那博客里有很多文章,每篇md文件末尾都引入该组件,挺麻烦的 在vuepress中提供了全局注入组件,这里介绍两种方式全局注入组件的,一种是以插件的形式注入,另一种是在enhanceApp.js全局注入...方式 1-以插件形式全局注入组件 在/.vuepress/的config.js配置插件,以插件的方式全局引入的,具体插件的引入可以见文档vuepress 使用插件 module.exports =...,实现元素的隐藏并不陌生 不用插件,没有后端服务,也同样可以做到导流到公众号,可以在公众号后台自动回复里添加设置一个固定的值 在vuepress同样编写全局组件的方式,获取最外层的元素,然后如同 openWrite

3.5K10
  • 推荐几款好看又好用的开源博客

    Vuepress Auroravuepress-theme-aurora 是一款基于 Vuepress2 的博客主题,将本地 Markdown 文件解析成静态 html 页面,作为博客文章。...100%自定义简洁,漂亮高扩展多功能配置文档Github地址:https://github.com/vuepress-aurora/vuepress-theme-aurora文档地址:https://aurora.xcye.xyz...(包括关于我、文章统计图、我的项目、我的技能、相册等)可自定义的数据的友情链接页面支持文章置顶和文章打赏支持 MathJax可设置复制文章内容时追加版权信息Gitalk、Gitment、Valine 和...推荐区域 - 可以在文章的 meta 添加 feature 属性,让头 3 篇文章指定到首页推荐位置。实时多语言支持 - 可以实时切换博客内主要文字的语言。...图片瀑布流图片瀑布流 Pro灯箱大图自定义主题颜色闪亮的归档页面漂亮的友情链接页面内置/外置搜索侧栏备案信息网页访问统计支持多款评论插件内置多语言图片懒加载社交按钮Github地址:https://github.com

    1.9K30

    VuePress教程之官方博客主题与插件简介

    VuePress教程之官方博客主题与插件简介 别名: 介绍 VuePress 官方博客主题与插件 前言 VuePress Core Team 的成员 Billy: 除了 VuePress 核心以外,我负责官方博客插件与主题的开发...在过去 VuePress 只提供默认的文档主题,然而你可以通过它开发各种静态网站,除了文件以外,我最常看到的大概非博客莫属。 而我们在今天正式移除官方博客插件与主题的 WIP 状态。...实际上,官方博客主题是可以使用palette.styl,index.stly进行配置和自定义的,还能从VuePress的主题中继承一些feature。...例如,基于目录对帖子进行分类,例如,官方博客主题假定_posts下的所有.md文件均为博客文章,并在根目录/列出。...再次,你还可以自定义category之外的其他分类器,location, category等。

    1K30

    使用VuePress 搭建个人博客

    介绍 VuePress 是一个静态网站生成器,包含由Vue驱动的主题系统和插件API,同时还包含一个为书写技术文档而优化的默认主题。此篇文章只介绍如何使用VuePress 搭建个人博客的部分。...description: '顾斯比的博客', // 网站的描述,它将会以 标签渲染到当前页面的 HTML 。...推荐使用 permalink 指定文章的永久链接,可以使用全局配置来向所有页面应用永久链接: // .vuepress/config.js module.exports = { permalink...内容 博客内容格式为 markdown,markdown 语法参考:https://www.markdownguide.org/ 插件 搜索 VuePress 内置搜索,可以通过设置 themeConfig.search...RSS vuepress 包含rss 插件,可以直接在配置添加以下内容启用: module.exports = { ...

    1K20

    用我这套模板,几分钟做出文档网站!

    你要阅读 VuePress 的官方文档,还要在琳琅满目的插件做选择,很费时间。我出这期教程的目的,就是帮大家做做减法,不用阅读那老长的官方文档,我帮大家选好了插件。...,VuePress 是根据文档层级生成的访问链接,如下图:但如果文档存放的目录改变了,那么原有的链接就会失效,会影响 SEO 和用户访问。...Markdown 配置VuePress 的基本功能就是把我们写的 Markdown 文件渲染成网站,我们可以在 markdown 配置自定义网站的渲染规则,比如显示代码块的行号、支持更细层级的标题渲染等...自定义主题能力二次开发的功能,和导航栏、侧边栏配置一样,只用在 footer.ts 填写配置,就能自动在网页底部生成友情链接、备案信息等,非常方便!...自定义主题能力二次开发的功能,和前面讲的配置一样,只用在 extraSideBar.ts 填写配置,就能自动在网页右侧生成一个固定的侧边栏了,从而提供一些附加能力,比如对站长很重要的引流支持等。

    50510

    使用Vuepress和Nginx搭建个人博客

    使用Vuepress和Nginx搭建个人博客 ## Vuepress VuePress 由两部分组成:第一部分是一个极简静态网站生成器 (opens new window),它包含由 Vue 驱动的主题系统和插件...说白了,VuePress就是基于Vue,用了SSR渲染成本地静态页面,解决PWA在SEO方面的弱势。...而VuePress除了使用Vue外,还继承了Vue各项能力,比如使用stylus写css,也能通过enhanceApp来增强应用,比如在Vuepress中使用Vuex等等。...后续将介绍如果安装Vuepress,如果使用enhanceApp,如果使用stylus,如何在Vuepress自定义主题,并且最终将vuepress内容发布到Nginx供internet访问。...run docs:build 命令可以编译生成所有的静态html文件,这些静态文件可以配置在nginx服务器直接访问 vuepress目录结构 ├── docs │ ├── .vuepress (

    1.3K30

    借助 VuePress 和 GitBook ,10 分钟即可免费部署你的静态博客网站

    docs/.vuepress: 用于存放全局的配置、组件、静态资源等。 docs/.vuepress/components: 该目录的 Vue 组件将会被自动注册为全局组件。...pluginsConfig:网站使用的插件的额外配 笔者的 book.json: { "title": "夜尽天明的博客", "author": "biaochenxuying", "description...VuePress VS GitBook 相同点 目前只支持 markdown 格式,图片、视频 等静态资源可以保存在本地,或者保存到允许访问的第三方服务商(七牛云); 如果是 world 文档或者 html...VuePress 的配置成本稍稍大一点,不过可以使用 Vue 的语法与组件,定制化更自由一点,而且 VuePress 编写 Vue 和平时一样,学习成本几乎为零,可以本地用 VsCode 编辑,然后直接命令行部署...参考文章:为你的 VuePress 博客添加 GitTalk 评论

    2K30

    手把手教你用vuepress搭建自己的网站(3)

    配置插件 有时候,我们想让我们的网站博客更加顺畅,用户体验更好,可以结合一些第三方的插件,开箱即用 配置内置的全局 UI,首先需要在当前项目下使用npm或者yarn安装插件 // 回到顶部插件,推荐使用...": "^1.0.3", } 可配置的插件选项 在vuepress提供的插件系统,可以对插件进行一些额外的配置,进行控制,分别提供了Babel 式,对象式 module.exports = {....medium-zoom", // 指定含有medium-zoom的类缩放,后面这个类名可自定义,markdown的img的class类保持一致就可以了的,没有指明的图片类将不支持缩放...: 在.vuepress/public/目录下创建styles文件夹,并创建index.styl与palette.styl两个文件,文件的名字是固定的 index.styl:将会被自动应用的全局样式文件...如果要对默认设置的样式进行简单颜色替换, 或者自定义一些颜色变量供以后使用, 可以在.vuepress/styles的palette.styl文件进行更改,这个文件是你手动创建的 你可以调整的颜色变量

    1.2K20

    Docusaurus VS VuePress:哪一个更适合你的技术文档?

    在当今的开发世界,高质量的技术文档对于项目的成功至关重要。好的文档不仅能帮助开发者快速上手,还能大大提升项目的易用性和维护性。...强大的主题和插件:支持定制化的主题和插件扩展,满足各种需求。 内置搜索:默认集成Algolia搜索,提供快速准确的文档检索功能。 什么是VuePress?...主题和插件 Docusaurus Docusaurus拥有丰富的官方和社区提供的主题和插件库。例如,你可以使用官方提供的经典主题,或是使用社区开发的自定义主题。...案例分析 案例一:Facebook的开源项目文档 Facebook使用Docusaurus为其多个开源项目(React Native、Relay等)构建文档网站。...案例三:个人博客 对于个人博客或小型项目,选择VuePress可能更为合适。它的轻量级特性和简单配置可以快速搭建一个高性能的博客网站。

    32210

    手把手教你用vuepress搭建自己的网站(2)

    页面具体内容配置 基本配置 要让你的网站显示内容, 就需要进行配置, 需要在.vuepress文件夹下新建一个总的配置文件config.js, 这个文件的名字是固定的,即.vuepress/config.js...并不会自动帮你生成,在/.vuepress/public/images中放入您想要的图片就可以了的 警告 这个 public 目录文件夹的名称是固定的,就像docs目录下的config.js一样,名称是固定的...如果想 nav 二级下拉菜单,如下配置,link的属性值带有链接,会直接是链接,若不是那就是路由,在vuepress中提供了一个items属性,配置二级导航如下所示 themeConfig:{ nav...", "手把手教你用vuepress搭建博客"] ] } } } } 配置完后,具体效果如下所示 ?...的热更新存在一些问题(以后官方肯定会修复) 在对 vuepress不是特别熟练的情况下,不要配置了很多选项和插件,到最后才来启动,一旦遇到一些奇葩的问题,报错,你就搞不清楚是在哪一个环节出现问题的 为什么有必要将

    2.6K20

    手把手教你用vuepress搭建自己的网站(1)

    ) 为技术文档而优化内置 markdown 拓展 在md(Markdown) 可以写vue组件,甚至写原生JS,Ts,HTML,CSS`,无任何压力阻碍,更加的灵活,可定制化 可以自定义开发主题,任意修改...注意 目前VuePress版本并没有支持 typescript,并且没有提供类型定义,但如果想要用TS,可以安装vuepress-plugin-typescript插件,它提供了在 VuePress中使用...,到最终部署上线,自定义域名等,在这个过程,踩了很多坑 当然,也借鉴了不少网上的博客,但很多不是把配置写死,就是代码拓展性极其受限,而且每个人遇到的问题都是不一样的,而官方文档 VuePress的 API...,建议一步步的按阶段完成,有些配置你不必知道原因,你只需要知道按照官方文档那么配置,能出来,达到你想要的效果就可以了,至于内部原理,富有闲于时,可自行探索,不必深究 也不要一上来,就去折腾自定义主题,看到酷炫花销的博客...vuepress相关的配置,这个文件夹的名字你可以任意,与你启动项目和构建项目时的配置保持一致就可以了的 mkdir docs 进入docs文件夹中使用mkdir命令创建.vuepress文件夹,注意这个文件夹的名字时固定

    1.2K20

    vuepress建站过程遇到的一些问题

    侧边栏显示的是文件路径,而非文件名 当您的md文件没有任何内容时,就会显示文件路径,/read/lingdu/wanted.html),如下所示 ?...在当前项目中安装plugin-back-to-top-或-pwa-等插件后,发现不生效,其他插件也是如此 原因:本地项目未安装vuepress,因为一些第三方插件依赖vuepress,除了全局坏境下安装了...,若md文件或者其他配置文件(或自定义组件)有所更改,页面内容并不会马上更新,每次都需要重新npm run docs:dev,热更新存在一些问题 解决:只需使用npm升级vuepress的版本即可,在vuepress...提醒 推荐使用yarn进行安装某些插件和安装包,因为npm有时候,npm 会生成错误的依赖树,导致安装某些插件安装不上,即使安装上了,在执行npm run dev启动项目时,会报错,影响项目的启动 配置自定义域名不生效...doc.itclan.cn 提醒 这个 CNAME文件在本地活动仓库可以没有,但是在远端仓库必须要存在,这个·CNAME 文件可以在远端项目根目录下创建写入的 关于vuepress搭建网站到自定义域名部署上线

    3.1K20

    vuepresss建站过程遇到的一些问题

    侧边栏显示的是文件路径,而非文件名 当您的md文件没有任何内容时,就会显示文件路径,/read/lingdu/wanted.html),如下所示 ?...在当前项目中安装plugin-back-to-top-或-pwa-等插件后,发现不生效,其他插件也是如此 原因:本地项目未安装vuepress,因为一些第三方插件依赖vuepress,除了全局坏境下安装了...,若md文件或者其他配置文件(或自定义组件)有所更改,页面内容并不会马上更新,每次都需要重新npm run docs:dev,热更新存在一些问题 解决:只需使用npm升级vuepress的版本即可,在vuepress...提醒 推荐使用yarn进行安装某些插件和安装包,因为npm有时候,npm 会生成错误的依赖树,导致安装某些插件安装不上,即使安装上了,在执行npm run dev启动项目时,会报错,影响项目的启动 配置自定义域名不生效...doc.itclan.cn 提醒 这个 CNAME文件在本地活动仓库可以没有,但是在远端仓库必须要存在,这个·CNAME 文件可以在远端项目根目录下创建写入的 关于vuepress搭建网站到自定义域名部署上线

    1.4K20

    为什么人家的开源项目文档如此炫酷?原来用的是这款神器!

    Vdoing主题 一般我们使用VuePress搭建网站的时候,都会选择一个主题。这里选择的是vuepress-theme-vdoing,一款简洁高效的知识管理&博客主题,用来搭建文档网站绰绰有余。...我们先来看下我自定义后的首页效果,这个主题还是非常简洁的,看起来挺舒服; 项目文件基本都在docs目录下,我们来看下这些文件的作用; docs │ index.md -- 首页配置 ├─.vuepress...│ │ htmlModules.js -- 插入自定义html模块 │ │ nav.js -- 顶部导航栏配置 │ │ plugins.js -- 插件配置 │...Vdoing添加了很多插件,有些你用不上,可以通过修改plugins.js来禁用,比如禁用下百度统计插件,第二个参数改为false就行了; // 插件配置 module.exports = [ [...如果你想搭建多项目文档,或者博客网站的话,还是推荐你使用VuePress的。

    1.2K20
    领券