格子表单GRID-FORM | 文档网站搭建(VitePress)与部署(Github Pages)

格子表单/GRID-FORM已在Github 开源,如能帮到您麻烦给个星🤝

GRID-FORM 系列文章

  • 基于 VUE3 可视化低代码表单设计器
  • 嵌套表单与自定义脚本交互
  • 文档网站搭建(VitePress)与部署(Github Pages)

效果预览

格子表单/GRID-FORM 文档站点已上线:https://0604hx.github.io/grid-form/,效果如下:

本文将介绍如何使用 VitePress、GithubPages 搭建静态网站,相关源码请查阅GRID-FORM。

文档开发

VitePress 简介

VitePress,由 Vite 和 Vue 驱动的静态站点生成器,基于 markdown 文件混搭 Vue 组件构建成 HTML,提供开箱即用的模板,特别适合做组件文档😄。下面是一些线上的实例:




VitePress 目录包含以下内容:

docs/					# 文档根目录.vitepress/			# VitePress 专用目录dist/			# 打包后产物目录theme/custom.css	# 自定义的样式文件index.js	# 自定义主题config.js		# VitePress 配置文件public/				# 静态资源index.md			# 首页README.txt			# 改用 txt(否则 vitepress 会生成对应的 READMD.html 😂)

首页

从上面几个官网就能看出,首页布局如出一辙😀,这是因为使用了 VitePress 默认的首页模板。

---
# https://vitepress.dev/reference/default-theme-home-page
layout: homehero:name: "格子表单/GRID-FORM"tagline: 基于 GRID 布局的 VUE3 表单工具<br>包含可视化设计器、渲染器(多UI库)actions:- theme: brandtext: 快速开始link: /guide/getting-started- theme: alttext: 在线可视化设计器link: /demo/designer- theme: alttext: 博客专栏link: https://blog.csdn.net/ssrc0604hx/category_12570844.htmlimage:src: /designer.pngalt: GRID-FORMfeatures:- title: 可视化设计器details: 基于 <a target=_blank href="https://www.naiveui.com">Naive UI</a> 组件库,所见即所得icon:src: /rocket.svgwidth: 40- title: Naive UIdetails: 默认渲染器,支持设计器中的全部组件icon:src: /naive-ui.svgwidth: 33- title: Element Plusdetails: 使用优秀 <a target=_blank href="https://element-plus.org/">Element Plus</a> 组件库的渲染器icon:src: /element-plus.svgwidth: 40- title: Vantdetails: 适配移动终端的渲染器(<a target=_blank href="https://vant-ui.github.io">Vant4</a> 以上版本)icon:src: vant.pngwidth: 40
---

VitePress 默认兼容移动端浏览(如下图),通过简单的定义,一个有模有样的首页就出来了👍。如果需要引入静态图片,可以将文件放置到public目录(构建时底下内容将被拷贝至根目录),然后直接通过 /文件名使用。

除此之外,还能自行定义首页(如引入组件、增加更多元素),有待各位看官自行探索。

文档详情页

一个 md 文件默认为doc(文档)布局,在大屏下文档页呈左中右三区(见下图),中等屏幕则左中(右侧目录藏于内容顶部),移动端则是只有中间内容区域。

在线DEMO页

有时候,我们需要完全自定义页面,没有自带的导航栏、底部横幅,此时可以通过设置layout: false,然后引入自己的组件即可。比如我配置的在线体验页面:

---
layout: false
---<script setup>
import Designer from '../components/Designer.vue'
</script><!-- 
避免出现 window/document not defined 的错误提示,使用 ClientOnly 包裹 
https://vitepress.dev/zh/guide/ssr-compat 
-->
<ClientOnly><NaiveWrapper><Designer /></NaiveWrapper>
</ClientOnly>

发布文档到互联网

文档网站打包完成后,需要部署到互联网才能被更多的人看到。通常有两种方式,一是使用各类厂家的服务(收费、免费),二是自行搭建服务器,如需 https 还得购买证书,相对门槛较高。

我使用的是 Github 提供的静态资源免费部署服务。对国内环境友好的码云(Gitee)也有类似的服务,但是需要实名验证(审核过程比较久)。

Github Pages 简介

GitHub Pages 是一项静态站点托管服务,它直接从 GitHub 上的仓库获取 HTML、CSS 和 JavaScript 文件,(可选)通过构建过程运行文件,然后发布网站。

有三种类型的 GitHub Pages 站点:项目、用户和组织。 项目站点连接到 GitHub 上托管的特定项目,例如 JavaScript 库或配方集合。 用户和组织网站已连接到 GitHub.com 上的特定帐户。

若要发布用户站点,必须创建名为 <username>.github.io 的个人帐户拥有的存储库。 若要发布组织站点,必须创建名为 <organization>.github.io 的组织帐户拥有的存储库。 除非使用的是自定义域,否则用户和组织站点在 http(s)://<username>.github.iohttp(s)://<organization>.github.io 中可用。

项目站点的源文件与其项目存储在同一个仓库中。 除非使用的是自定义域,否则项目站点在 http(s)://<username>.github.io/<repository>http(s)://<organization>.github.io/<repository> 中可用。

我的站点源文件跟项目代码为同一仓库,故访问的 URL 为:https://0604hx.github.io/grid-form/

更新资源

  1. 首先我们本地构建站点(通过 vitepress build)
  2. .vitepress/dist 的内容提交到代码仓库的 gh-pages 分支(对于具有项目网站的存储库)
  3. 登录 github 仓库,参考下图进行配置

    更多细节可查看:VitePress-Deploying a Static Site

配置百度统计

此部分为可选😄
通过接入百度统计平台,能够分析网站的流量。

  1. 进入百度统计首页,登录(如无账号请先注册)
  2. 新建站点(填写 github 分配好的 url)
  3. 得到代码,插入到网站即可
import { defineConfig } from 'vitepress'
const isProd = process.env.npm_lifecycle_event==='build'const base = isProd ? "/grid-form/":"/"
const head = [ ['link', { rel: 'icon', href: `${base}logo.svg` }] ]if(isProd){console.log(`➕ 百度统计代码...`)//增加百度统计head.push(['script',{},`window._hmt = window._hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?2011a384a05d083dddbac20462902ad2";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();`])
}export default defineConfig({base,head
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/460032.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FPGA高端项目:解码索尼IMX327 MIPI相机转USB3.0 UVC 输出,提供FPGA开发板+2套工程源码+技术支持

目录 1、前言免责声明 2、相关方案推荐我这里已有的 MIPI 编解码方案 3、本 MIPI CSI-RX IP 介绍4、个人 FPGA高端图像处理开发板简介5、详细设计方案设计原理框图IMX327 及其配置MIPI CSI RX图像 ISP 处理图像缓存UVC 时序USB3.0输出架构FPGA逻辑设计工程源码架构SDK软件工程源…

CentOS镜像如何下载?在VMware中如何安装?

一、问题 CentOS镜像如何下载&#xff1f;在VMware中如何安装&#xff1f; 二、解决 1、CentOS镜像的下载 &#xff08;1&#xff09;官方网站 The CentOS Project &#xff08;2&#xff09;官方中文官网 CentOS 中文 官网 &#xff08;3&#xff09;选择CentOS Linux…

yarn/npm certificate has expired

目录 报错 原因&#xff1a;HTTPS 证书验证失败 方法 a.检查网络安全软件&#xff1a;可能会拦截或修改 HTTPS 流量 b.strict-ssl:false关闭验证【临时方法】 报错 info No lockfile found. [1/4] Resolving packages... error Error: certificate has expired at TLS…

【MySQL进阶之路】BufferPool底层设计(上)

欢迎关注公众号&#xff08;通过文章导读关注&#xff1a;【11来了】&#xff09;&#xff0c;及时收到 AI 前沿项目工具及新技术的推送&#xff01; 在我后台回复 「资料」 可领取编程高频电子书&#xff01; 在我后台回复「面试」可领取硬核面试笔记&#xff01; 文章导读地址…

设计模式2-对象池模式

对象池模式&#xff0c;Object Pool Pattern&#xff0c;当你的应用程序需要频繁创建和销毁某种资源&#xff08;比如数据库连接、线程、socket连接等&#xff09;时&#xff0c;Object Pool 设计模式就变得很有用。它通过预先创建一组对象并将它们保存在池中&#xff0c;以便在…

【Godot4.2】文件系统自定义控件 - GroupButtons

GroupButtons 概述 读者朋友们好&#xff0c;我是巽星石&#xff0c;这是我的Godot4.2文件系统自定义控件系列文章。 在很多程序或插件设计中&#xff0c;都会用到一堆按钮的形式&#xff0c;好处是比较直观&#xff0c;用啥点啥&#xff0c;本质上相当于一个简化的二级树形…

re:从0开始的CSS学习之路 5. 颜色单位

0. 写在前面 没想到在CSS里也要再次了解这些颜色单位&#xff0c;感觉回到了大二的数字图像处理&#xff0c;可惜现在已经大四了&#xff0c;感觉并没有学会什么AI的东西 1. 颜色单位 预定义颜色名&#xff1a;HTML和CSS规定了147种颜色名。例如&#xff1a;red yellow green …

米贸搜|关于Facebook广告受限:在这些情况下,Meta会限制广告主的广告能力!

如果你被限制了投放广告&#xff0c;那么你会在Facebook上收到通知。 除了审查广告之外&#xff0c;Meta还监控和调查广告主在Meta技术上的行为&#xff0c;在某些情况下&#xff0c;Meta可能会对广告主施加限制&#xff0c;限制广告主的广告能力&#xff0c;这些限制旨在帮助保…

【QT学习十三】QChart

目录 一、概述 二、头文件及配置 实例演示 三、基本功能 1. 图表组件管理 2. 系列和数据处理 3. 坐标轴管理 4. 图表绘制和显示 5. 主题和样式&#xff1a; 四、QChart 类中的一些方法 1. addSeries(QAbstractSeries *series) 2. removeSeries(QAbstractSeri…

波卡 2023 四季度报告:开发者数量位列加密生态前三,五项新技术将于今年发布

作者&#xff1a;Nicholas Garcia&#xff5c;Messari 研究分析师 编译&#xff1a;OneBlock 原文&#xff1a;https://messari.io/report/state-of-polkadot-q4-2023?utm_mediumorganic_social&utm_sourcetwitter_messari&utm_campaignstate_of_polkadot_q4_2023 …

Python Paramiko 使用交互方式获取终端输出报错

近期接到一个需求&#xff0c;要批量登录网络设备获取配置。 原计划使用 Paramiko exec即可&#xff0c;但是后来发现&#xff0c;有些设备命令也执行了&#xff0c;但是没有回显。 于是尝试使用 invoke_shell() 方式。 前期调试倒是OK&#xff0c;直到遇见一个输出内容较长的…

[VulnHub靶机渗透] dpwwn: 1

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏…