静态页面用什么技术?

静态页面用什么技术?,第1张

静态页面可以使用各种技术实现,最常见的方式是使用 HTML、CSS 和 JavaScript。

HTML:用于创建页面的结构和内容,包括文本、图片、链接等。

CSS:用于样式设计,包括颜色、字体、排版、布局等。

JavaScript:用于页面的动态效果和交互,包括按钮点击、下拉框选择、表单验证等。

另外,还有一些静态页面生成器(Static Site Generator)可以自动生成静态页面,比如 Jekyll、Hugo、Hexo 等。这些工具可以将文本文件(如 Markdown)转换成 HTML 页面,并自动应用样式和布局。使用静态页面生成器可以提高开发效率和可维护性。

VuePress 由两部分组成:第一部分是一个极简静态网站生成器 (opens new window),它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加载性能和搜索引擎优化(SEO)。同时,一旦页面被加载,Vue 将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),其他的页面则会只在用户浏览到的时候才按需加载。

事实上,一个 VuePress 网站是一个由 Vue、Vue Router和 webpack驱动的单页应用。如果你以前使用过 Vue 的话,当你在开发一个自定义主题的时候,你会感受到非常熟悉的开发体验,你甚至可以使用 Vue DevTools 去调试你的自定义主题。

在构建时,我们会为应用创建一个服务端渲染(SSR)的版本,然后通过虚拟访问每一条路径来渲染对应的HTML。这种做法的灵感来源于 Nuxt (opens new window)的 nuxt generate 命令,以及其他的一些项目,比如 Gatsby

1、创建并进入一个新目录

2、使用你喜欢的包管理器进行初始化

3、将 VuePress 安装为本地依赖

我们已经不再推荐全局安装 VuePress

4、创建你的第一篇文档

5、在 package.json 中添加一些 scripts

这一步骤是可选的,但我们推荐你完成它。在下文中,我们会默认这些 scripts 已经被添加。

6、在本地启动服务器

VuePress 会在 http://localhost:8080 (opens new window)启动一个热重载的开发服务器。

现在,你应该已经有了一个简单可用的 VuePress 文档。接下来,了解一下推荐的 目录结构 和 VuePress 中的 基本配置。

VuePress 遵循 “约定优于配置” 的原则,推荐的目录结构如下:

如果没有任何配置,这个网站将会是非常局限的,用户也无法在你的网站上自由导航。为了更好地自定义你的网站,让我们首先在你的文档目录下创建一个 .vuepress 目录,所有 VuePress 相关的文件都将会被放在这里。你的项目结构可能是这样:

一个 VuePress 网站必要的配置文件是 .vuepress/config.js,它应该导出一个 JavaScript 对象:

对于上述的配置,如果你运行起 dev server,你应该能看到一个页面,它包含一个页头,里面包含一个标题和一个搜索框。VuePress 内置了基于 headers 的搜索 —— 它会自动为所有页面的标题、h2 和 h3 构建起一个简单的搜索索引。

你也可以使用 YAML (.vuepress/config.yml) 或是 TOML (.vuepress/config.toml) 格式的配置文件。

一个 VuePress 主题应该负责整个网站的布局和交互细节。在 VuePress 中,目前自带了一个默认的主题(正是你现在所看到的),它是为技术文档而设计的。同时,默认主题提供了一些选项,让你可以去自定义导航栏(navbar)、 侧边栏(sidebar)和 首页(homepage) 等,

由于 VuePress 是一个标准的 Vue 应用,你可以通过创建一个 .vuepress/enhanceApp.js 文件来做一些应用级别的配置,当该文件存在的时候,会被导入到应用内部。enhanceApp.js 应该 export default 一个钩子函数,并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件,或者增加额外的路由钩子等:

觉得效果不错的请帮忙加个关注点个赞,经常分享前端实用开发技巧

静态web:HTML + CSS 组合。(用户发送请求--->服务器接受并找到页面--->返回)

动态web:HTML + CSS + Javascript + PHP + 数据库组合。(请求内--->服务器查找数据--->返回)

发展容历程:CGI(公共网关接口):早期技术、过于消耗系统资源、目前很少使用

ASP:微软的动态服务器技术(少)

JSP:java服务器技术(安全性高)

PHP:超文本预处理器(使用广泛)


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6197606.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-17
下一篇 2023-03-17

发表评论

登录后才能评论

评论列表(0条)

保存