-
Notifications
You must be signed in to change notification settings - Fork 4.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
搭建 VuePress 博客,你可能会用到的一些插件 #261
Labels
Comments
This was referenced Mar 23, 2022
太好用啦~ 一站式服务 |
这里第七个包名错了,应该是 |
想寻找一个添加loading的插件.... |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
前言
在 《一篇带你用 VuePress Github Pages 搭建博客》中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档。
为了丰富站点的功能,我们可以直接使用一些现有的插件,本篇我们讲讲一些常用的插件。
1. 公告栏弹窗
插件地址:https://vuepress-theme-reco.recoluan.com/views/plugins/bulletinPopover.html
安装:
使用:
效果截图:
注意事项:
查看插件源码可以得知,公告栏弹窗是使用
sessionStorage
控制的展示频次,在本地测试时,如果关闭了,可以通过清除sessionStorage
再次展示出来。2. 代码复制
插件地址:https://www.npmjs.com/package/vuepress-plugin-nuggets-style-copy
安装:
使用:
效果类似于掘金的代码复制:
其他样式的代码复制插件还有:
3. 添加著作权信息
使用
vuepress-plugin-copyright
可以禁用文字复制或者在复制时添加著作权信息。插件地址:https://vuepress-community.netlify.app/zh/plugins/copyright
安装:
使用:
当你复制超过 30 个字符的时候,就会出现:
4. 背景音乐
插件地址:https://vuepress-theme-reco.recoluan.com/views/plugins/bgmPlayer.html
安装:
使用:
效果截图:
其他音乐插件:
5. 看板娘
插件地址:https://vuepress-theme-reco.recoluan.com/views/plugins/kanbanniang.html
安装:
使用:
效果截图:
其他看板娘插件:
6. 修改光标效果
插件地址:https://github.com/moefyit/vuepress-plugin-cursor-effects
安装:
使用:
效果截图:
7. 动态标题展示
插件地址:https://github.com/moefyit/vuepress-plugin-dynamic-title
安装:
使用:
效果截图:
8. 优化代码展示
插件地址:https://vuepress-theme-reco.recoluan.com/views/plugins/extractCode.html
安装:
使用:
效果截图:
当你需要使用这种方式展示代码的时候,你需要在 md 文件中添加:
其中的
@
表示当前项目目录的别名,即源码的根目录,而非docs
或者.vuepress
更多插件寻找
系列文章
博客搭建系列,讲解如何使用 VuePress 搭建、优化博客,并部署到 GitHub、Gitee、私有服务器等平台。系列预计 20 篇左右,本篇为第 21 篇,全系列文章地址:https://github.com/mqyqingfeng/Blog
微信:「mqyqingfeng」,加冴羽好友,进一个神奇的前端学习交流群。
如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎 star,对作者也是一种鼓励。
The text was updated successfully, but these errors were encountered: