如何建立国际网站,网站建设价格明细表和网站预算,wordpress升级后等待,网站开发 工作量评估vuepress#xff0c;Vue 驱动的静态网站生成器#xff0c;以 Markdown 为中心的项目结构#xff0c;以最少的配置帮助你专注于写作。 vuepress官网 vuepress存在很多主题#xff0c;也可以自定义设计主题#xff0c;上传npm使用 这里采用vuepress-theme-hope主题模板进行制…vuepressVue 驱动的静态网站生成器以 Markdown 为中心的项目结构以最少的配置帮助你专注于写作。 vuepress官网 vuepress存在很多主题也可以自定义设计主题上传npm使用 这里采用vuepress-theme-hope主题模板进行制作 vuepress-theme-hope
创建项目命令yarn/npm/pnpm都可以
yarn create vuepress-theme-hope my-docs这里记录几个关键点
一、目录结构 src/.vuepress: 用于存放全局的配置、组件、静态资源等。 src/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。 src/.vuepress/theme: 用于存放本地主题。 src/.vuepress/styles: 用于存放样式相关的文件。 src/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件会生成在最终的 CSS 文件结尾具有比默认样式更高的优先级。 src/.vuepress/styles/palette.styl: 用于重写默认颜色常量或者设置新的 stylus 颜色常量。 src/.vuepress/public: 静态资源目录。 src/.vuepress/templates: 存储 HTML 模板文件。 src/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。 src/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。 src/.vuepress/config.js: 配置文件的入口文件也可以是 YML 或 toml。 src/.vuepress/enhanceApp.js: 客户端应用的增强。 以上就是基础的文件结构
二、重点文件分析
配置文件config.js
import { defineUserConfig } from vuepress;
import theme from ./theme.js;export default defineUserConfig({base: /docs/,lang: zh-CN,title: 云风网,description: 云风的知识库,theme,// 和 PWA 一起启用// shouldPrefetch: false,
});导航栏配置navbar.js
import { navbar } from vuepress-theme-hope;export default navbar([/,{text: node案例,icon: pen-to-square,prefix: /node/,children: [webBuild,],},// /node/,{text: 云风网,icon: book,link: http://www.niech.cn/,},{text: CSDN,icon: book,link: https://blog.csdn.net/qq_43206280/,}
]);
主题配置theme.js
import { hopeTheme } from vuepress-theme-hope;
import navbar from ./navbar.js;
import sidebar from ./sidebar.js;
import { MR_HOPE_AVATAR } from ./logo.js;export default hopeTheme({hostname: https://mister-hope.github.io,author: {name: Niech,url: http://www.niech.cn,},iconAssets: fontawesome-with-brands,logo: /logo.png,repo: vuepress-theme-hope/vuepress-theme-hope,docsDir: src,// 导航栏navbar,// 侧边栏sidebar,// 页脚footer: 默认页脚,displayFooter: true,// 博客相关blog: {description: 一个前端开发者,intro: /intro.html,medias: {GitHub: https://github.com/nch1994/,Gitee: https://gitee.com/niech_project},},// 加密配置encrypt: {config: {/demo/encrypt.html: [1234],},},// 多语言配置metaLocales: {editLink: ,},// 如果想要实时查看任何改变启用它。注: 这对更新性能有很大负面影响// hotReload: true,// 在这里配置主题提供的插件plugins: {blog: true,search: true,// 在启用之前需要安装 waline/client// 警告: 这是一个仅供演示的测试服务器在生产环境中请自行部署并使用自己的服务器// comment: {// provider: Waline,// serverURL: https://waline-comment.vuejs.press,// },components: {components: [Badge, VPCard],},// 此处开启了很多功能用于演示你应仅保留用到的功能。mdEnhance: {align: true,attrs: true,codetabs: true,component: true,demo: true,figure: true,imgLazyload: true,imgSize: true,include: true,mark: true,stylize: [{matcher: Recommended,replacer: ({ tag }) {if (tag em)return {tag: Badge,attrs: { type: tip },content: Recommended,};},},],sub: true,sup: true,tabs: true,vPre: true,search: true,copyCode:{},// 在启用之前安装 chart.js// chart: true,// insert component easily// 在启用之前安装 echarts// echarts: true,// 在启用之前安装 flowchart.ts// flowchart: true,// gfm requires mathjax-full to provide tex support// gfm: true,// 在启用之前安装 katex// katex: true,// 在启用之前安装 mathjax-full// mathjax: true,// 在启用之前安装 mermaid// mermaid: true,// playground: {// presets: [ts, vue],// },// 在启用之前安装 reveal.js// revealJs: {// plugins: [highlight, math, search, notes, zoom],// },// 在启用之前安装 vue/repl// vuePlayground: true,// install sandpack-vue3 before enabling it// sandpack: true,},// 如果你需要 PWA。安装 vuepress-plugin-pwa2 并取消下方注释// pwa: {// favicon: /favicon.ico,// cacheHTML: true,// cachePic: true,// appendBase: true,// apple: {// icon: /assets/icon/apple-icon-152.png,// statusBarColor: black,// },// msTile: {// image: /assets/icon/ms-icon-144.png,// color: #ffffff,// },// manifest: {// icons: [// {// src: /assets/icon/chrome-mask-512.png,// sizes: 512x512,// purpose: maskable,// type: image/png,// },// {// src: /assets/icon/chrome-mask-192.png,// sizes: 192x192,// purpose: maskable,// type: image/png,// },// {// src: /assets/icon/chrome-512.png,// sizes: 512x512,// type: image/png,// },// {// src: /assets/icon/chrome-192.png,// sizes: 192x192,// type: image/png,// },// ],// shortcuts: [// {// name: Demo,// short_name: Demo,// url: /demo/,// icons: [// {// src: /assets/icon/guide-maskable.png,// sizes: 192x192,// purpose: maskable,// type: image/png,// },// ],// },// ],// },// },},
});
公共侧边栏配置sidebar.js
import { sidebar } from vuepress-theme-hope;export default sidebar({/: [// ,// {// text: 如何使用,// icon: laptop-code,// prefix: demo/,// link: demo/,// children: structure,// },// {// text: 文章,// icon: book,// prefix: posts/,// children: structure,// },// intro,// {// text: 幻灯片,// icon: person-chalkboard,// link: https://plugin-md-enhance.vuejs.press/zh/guide/content/revealjs/demo.html,// },],
});
配置完npm run docs:dev就可以看到效果了 接下来就在.md编辑自己想要写的文章 1、src目录下新建一个文件夹自己规划一下文件名称我这里取名node,主要存放node相关文档
保存渲染之后就是现在这样 接下来就是打包部署npm run docs:build tips:打包根目录在config.js里面进行配置 如果直接域名访问base: “/” 如果不是这个地址需要对应比如base: /docs/对应的是http://www.niech.cn/docs/
如果想要部署到gitee或者github 新建一个仓库后选择服务里面有类似page文档的功能按照步骤创建最后启动就完成了。 云风的知识库
