上海建设网站的公司,桂林两江四湖景区,wordpress最多文章数,帮做非法网站现在#xff0c;读者应该对 VuePress、主题和插件等有了基本的认识#xff0c;除了插件#xff0c;VuePress 自身也有很多有用的配置#xff0c;这里简单说明下。
VuePress 的介绍
在介绍了 VuePress 的基本使用、主题和插件的概念之后#xff0c;我们再来看看官…现在读者应该对 VuePress、主题和插件等有了基本的认识除了插件VuePress 自身也有很多有用的配置这里简单说明下。
VuePress 的介绍
在介绍了 VuePress 的基本使用、主题和插件的概念之后我们再来看看官网对于 VuePress 的介绍就很好理解了 VuePress 由两部分组成第一部分是一个极简静态网站生成器 它包含由 Vue 驱动的主题系统和插件 API另一个部分是为书写技术文档而优化的默认主题它的诞生初衷是为了支持 Vue 及其子项目的文档需求。 每一个由 VuePress 生成的页面都带有预渲染好的 HTML也因此具有非常好的加载性能和搜索引擎优化SEO。同时一旦页面被加载Vue 将接管这些静态内容并将其转换成一个完整的单页应用SPA其他的页面则会只在用户浏览到的时候才按需加载。
因此我们可以自己选择一个主题使用并且使用丰富的插件来完善我们的网站。同时默认主题自带了很多功能很多第三方主题都是基于默认主题增强的我们介绍几个常用的配置。
最后更新时间
有时候我们想要看到文章的更新时间此时可以配置 themeConfig.lastUpdated 字段
// .vuepress/config.js
module.exports {themeConfig: {lastUpdated: 上次更新, // string | boolean}
}
效果在文章底部有一个更新时间
补充说明
themeConfig.lastUpdated 默认是关闭的如果给定一个字符串它将会作为前缀显示默认值 Last Updated。themeConfig.lastUpdated 的时间是读取每个文件最后一次 git 提交的 UNIX 时间戳所以只能在一个基于 git 的项目中启用它。此外由于使用的时间戳来自 git commit因此它将仅在给定页的第一次提交之后显示并且仅在该页面后续提交更改时更新。
可以看到时间显示的格式是西方的这是因为 VuePress 默认的 lang 为 en-US我们修改一下 config.js
module.exports {// ...locales: {/: {lang: zh-CN}},// ...
}
效果就是根据国内的时间来展示时间了例如上次更新: 2023/2/21 22:07:21
如果想自定义时间格式或做其他修改可以参考官网文档默认主题配置-最后更新时间
Git 仓库和编辑链接
当配置了 themeConfig.repo 选项将会自动在每个页面的导航栏生成生成一个 GitHub 链接以及在页面的底部生成一个 Edit this page 链接。
module.exports {themeConfig: {repo: vuejs/vuepress,editLinks: true,docsDir: docs,// 默认为 Edit this pageeditLinkText: 编辑此页
}
效果文章底部有一个编辑此页的链接
点击该链接后跳转
有了这个链接如果读者想要修改文章可以直接点击后修改
例如读者看到有什么想要补充的或者修改错别字之类的就可以点击然后 fork 项目并 PR。
可以通过 YAML front matter 来禁用指定某个页面的编辑链接
---
editLink: false
---
footer
如果是在默认主题你可以定义一个全局组件来定义页脚或者针对某个页面定制页脚。参考
Configuration | Theme默认主题配置 | VuePress
在 vdoing 主题中可以直接在配置文件里配置页脚 themeConfig.footer例如备案信息作者信息等。例如这是本博客的备案信息
themeConfig: {// 页脚footer:{createYear: 2022,copyrightInfo: a hrefhttps://beian.miit.gov.cn粤ICP备2022067627号-1/a a hrefhttp://www.beian.gov.cn/portal/registerSystemInfo?recordcode44011302003646粤公网安备 44011302003646号/a},},
效果在每个页面的底部都有页脚
参考主题配置 | vuepress-theme-vdoing
代码块中的行高亮
在 VuePress 中针对 Markdown 有扩展例如行高亮。
有时候我们想着重标出是哪几行代码是关键此时可以用代码高亮的形式来。我们可以这样写 Markdown
js {4}
export default {data () {return {msg: Highlighted!}}
}输出
除了单行以外你也可指定多行行数区间或是两者都指定。
行数区间: 例如 {5-8}, {3-10}, {10-17}多个单行: 例如 {4,7,9}行数区间与多个单行: 例如 {4,7-13,16,23-27,40}
参考Markdown 拓展 | VuePress
分离配置
随着博客功能的不断完善config.js 文件会变的很长笔者因此将配置文件分成了几个部分。有需要的读者可以看情况拆分。
首先在.vuepress 目录下新建 config 文件夹然后依次新建 head.ts、plugin.ts 和 themeConfig.ts。此时项目结果如下
vuepress-learn
├── docs
│ ├── .vuepress
│ │ ├── config
│ │ │ ├── head.ts
│ │ │ ├── plugin.ts
│ │ │ └── themeConfig.ts
│ │ └── config.ts
│ ├── 01.Basic
│ │ ├── 01.Basic1.md
│ │ └── 02.Basic2.md
│ ├── 02.Java
│ │ ├── 01.JavaEE.md
│ │ └── 02.JavaSE.md
├── package-lock.json
└── package.json
head.ts 的内容其实就是将原本配置文件里的 head 部分挪到这里
import { HeadTags } from vuepress/config;export default HeadTags [[link, { rel: icon, href: https://s3.bmp.ovh/imgs/2023/02/16/8d42caf2b4ba3334.png }],]
plugins.ts 的内容就是将原本配置文件里的 plugins 部分挪到这里
import { UserPlugins } from vuepress/configexport default UserPlugins[// 复制代码块的插件[vuepress-plugin-code-copy, true],// 阅读进度条的插件reading-progress,//光标效果的插件[cursor-effects, {size: 2, // size of the particle, default: 2shape: star, // [star | circle], // shape of the particle, default: starzIndex: 999999999, // z-index property of the canvas, default: 999999999}],//网站动态标题[dynamic-title, {// showIcon: ,showText: 欢迎回来 O(∩_∩)O~~,// hideIcon: ,hideText: 等等你别走啊 ::_::,recoverTime: 2000,}],]
themeConfig.ts 的内容同理将 themeConfig 的内容挪到这里
import { VdoingThemeConfig } from vuepress-theme-vdoing/types;export default VdoingThemeConfig{logo: https://s3.bmp.ovh/imgs/2022/12/02/bc7428e3916c3a4c.jpg,nav: [{ text: 首页, link: / },{ text: 计算机基础, link: /CouputerBasic },{text: Java, items: [{ text: JavaSE, link: /JavaSE },{ text: JavaEE, link: https://www.peterjxl.com/JavaEE }]},],sidebar: structuring,// 编辑此页配置repo: Peter-JXL/vuepress-learn,docsDir: docs,editLinks: true,editLinkText: 编辑此页,// 页脚footer: {createYear: 2022,copyrightInfo: a hrefhttps://beian.miit.gov.cn粤ICP备2022067627号-1/a a hrefhttp://www.beian.gov.cn/portal/registerSystemInfo?recordcode44011302003646粤公网安备 44011302003646号/a},
}
最后是 config.ts 的内容引入其他配置文件的配置
import head from ./config/head
import themeConfig from ./config/themeConfig
import plugins from ./config/plugins
module.exports {title: 网站标题,theme: vdoing,head,themeConfig,plugins
}
最后重启下博客观察运行是否正常。
本人主攻后端对于前端的 Node 和 TS 不太熟悉只会依葫芦画瓢。这里拆分配置文件的方法主要参考Kele-Bingtang其他的功能如首页大图、站点信息等也是参考这个博客非常感谢他。
自定义样式
VuePress 基于 Vue所以主题色用的是 Vue 的绿色那如何修改 VuePress 的主题色呢
你可以创建一个 .vuepress/styles/palette.styl 文件文件代码如下
$accentColor #3178c6更多的颜色修改参考 VuePress 的 palette.styl。
如果你想自定义修改一些 DOM 元素的样式呢VuePress 提供了一种添加额外样式的简便方法。你可以创建一个 .vuepress/styles/index.styl 文件。这是一个 Stylus 文件但你也可以使用正常的 CSS 语法。
我们在 .vupress 文件夹下创建这个目录然后创建 index.styl 文件。如果想要修改页面上的某个元素直接用浏览器控制台查看样式即可然后就可以修改了例如修改代码块的默认样式。
// 通过检查查看元素样式声明
.dark .content__default code {background-color: rgba(58,58,92,0.7);color: #fff;
}
所有配置
更多关于配置请参考官网默认主题配置 | VuePress
本文也参考了其他博主的博客
本站 - 首页大图模块 | Young Kbt blog本站 - 站点信息模块 | Young Kbt blog本站 - 全局时间提示模块 | Young Kbt blog本站 - 代码块隐藏模块 | Young Kbt blog
使用 Markdown 语法可以说明代码块是什么编程语言的这样可以做到代码高亮。具体支持什么语言可以参考Supported languages VuePress 使用了 Prism 来为 markdown 中的代码块实现语法高亮。Prism 支持大量的编程语言你需要做的只是在代码块的开始倒勾中附加一个有效的语言别名. 引自官网Markdown 拓展-代码块中的语法高亮 如果没有在支持的语言中则也没什么问题顶多不会高亮并且会在编译的过程中有个提示。
Github Calendar
GitHub 或 Gitee 会在每个人的主页里放上一个提交记录图
有时候将其放到个人博客上面也是不错的选择。其实获取起来很简单
img srchttps://ghchart.rshah.org/你的用户名/只需在上述地址上替换为你的 GitHub 用户名即可。
如果是用 hexo可以参考这篇博客的效果Gitcalendar | Akilar の糖果屋
获取源码
为了写本系列的博客博主特地新建了一个项目用于演示相关代码已放到 Gitee 和 GitHub 上。
并且不同功能创建了不同分支想要获取本篇文章演示的源码只需切换分支即可
例如你想运行本篇文章所创建的博客可以这样做
打开命令行拉取代码git clone gitgitee.com:peterjxl/vuepress-learn.git 也可拉取 GitHub 的跳转目录cd vuepress-learn切换分支git switch -c VuePressDemo5Settings origin/VuePressDemo5Settings安装依赖npm i运行博客npm run docs:dev
参考
vuepress 热更新失效研究_禅思院的博客-CSDN 博客年轻人的第一篇博客 - SegmentFault 思否java - 「奇怪的教程」年轻人的第一个博客搭建指南 - 个人文章 - SegmentFault 思否vuepress 使用简介及个人博客搭建_穆瑾轩的博客-CSDN 博客_vuepressVuePress 博客优化之 last updated 最后更新时间如何设置用可爱的插件装饰你的 Vuepress~-阿里云开发者社区
