作为开发人员，我们知道，在建设网站时，创造一个良好的用户体验是关键。而用户最喜欢的是什么？快速的网站，不浪费他们的时间。有了Astro，我们可以通过向浏览器发送更少的代码来实现这一目标。...它还允许我们在需要时加入动态的客户端JavaScript，这意味着我们可以在网站上拥有可交互的组件，但只在必要时进行。换句话说，Astro允许你从简单的开始，在需要时增加复杂性。... 但你不希望每次在导航中增加一个链接时都要更新所有的页面，对吗？ 这就是「组件」发挥作用的地方，让你不要重复你自己（DRY）。...获取数据 我们教程的这一部分，我们将使用Bejamas API从服务器获取一些数据，并在我们的主页上创建这些案例研究卡。 在Astro中获取数据是非常容易的。...你当然不希望你的文章看起来像这样，肯定希望把你的网站设计融入其中，对吗？让我们为我们的博客内容创建一个布局。
在一次换系统之后，项目终于构建不了了，包冲突处理起来非常头疼，也影响到了写博文的兴致。 拖延了一段时间后，终于开始考虑更换框架。...一般使用时只需要知道集合里每个项目的数据在 edges.node 中，同时通过 GraphiQL 浏览其它可以使用的数据。...我在修改 starter 时踩到一个坑是复制组件时忘了修改 static query 查询语句的名称，导致重名报错。 避免错误最好方式是在 GraphiQL 编辑器中写好运行无误再复制到组件中。...迁移博客需要考虑的一个重要问题便是路径兼容。我们当然不希望迁移后原有的链接无法访问，这不仅影响到 SEO ，更带来了不好的用户访问体验。本文将聊聊怎么让 Gatsby 兼容 Jekyll 式路径。...Gatsby 在生成 GraphQL 节点时提供了钩子 onCreateNode，我们利用这个钩子往 fields 中放自定义的数据。
如果您正在寻找一个功能强大又易于上手的工具来构建静态网站或在线文档，请考虑尝试其中之一。...用户可以将其作为命令行工具在本地构建图书，并且也可通过 legacy.gitbook.com 在线发布并进行更新。...简单轻量 智能全文搜索插件 多个主题可选 有用的插件 API 兼容 IE11 支持嵌入文件 mkdocs/mkdocs Stars: 16.7k License: BSD-2-Clause MkDocs...快速生成：利用预渲染技术，在每次部署时将页面转换为静态 HTML 文件，从而实现快速加载和响应式体验。 多平台适配：无论是在电脑上还是移动设备上浏览您的文档网站都能得到良好呈现。...如果你正在寻找一个方便易用又功能强大的工具来构建静态网站或者在线文档，请考虑尝试 VuePress Next。
使用 VuePress 工具，我们可以在 head 配置中添加网站 head 标签信息，比如设置站点图标、设置有利于 SEO（搜索引擎优化）的元信息、添加第三方统计分析代码等：head: [ // 站点图标...$page.frontmatter.image.startsWith("http")) || "") + $page.frontmatter.image, publishedAt:...($page) => $page.frontmatter.date && new Date($page.frontmatter.date), modifiedAt: ($page) =>...，我们也可以主动给搜索引擎推送文章，提高收录率。...github.com/tolking/vuepress-plugin--lazy最后这个插件我觉得最有用，只需要一行代码配置：['-lazy']就能给网站所有的图片添加懒加载功能，当页面滚动到图片位置时才会请求加载图片
更糟糕的是，当项目有不少页面时，服务器必须首先彻底编译每一个页面，而后才能显示任何内容Vite 很好地解决了这些问题:服务器几乎当即启动，按需编译只编译所服务的页面，以及快速的 HMR。...有了 Vite 和 Vue 3，真的是时候从新考虑“Vue 驱动的静态站点生成器（vue系列的说明文档几乎都是这样生成的）创建博客：mkdir blog-vitepresscd blog-vitepressnpm...front-matter/注意的是采用三虚线必须放置在 markdown 文件的 最上面---title: Blogging Like a Hackerlang: en-US---frontmatter...md.use(require('markdown-it-xxx')) } }}搜索配置先查看：https://vitepress.vuejs.org/config/algolia-search.html...docs/.vitepress/theme/index.ts 中写入如下代码，其中 register-components.js 不需要自己创建，在 package.json 中注入脚本，执行脚本自动生成在
具体操作，就是在markdown的frontmatter中把 permanentlink 设置成相对路径即可。...feed: enable: true 后面发布时，就能自动生成feed了。...页面的面包屑导航如果符合微数据 Breadcrum 格式，是会显著提示访问流量的，下厨房网站的案例可以参考，代码可以直接模仿之。...高阶技巧：使用JSON-ld结构化数据 Google推荐向页面的中加入json-ld代码。...$page.frontmatter.image ? this.
它通过在构建时通过服务器端渲染将动态的 react 组件呈现为静态 HTML 内容。...当然，我们的数据结构是在我们的Markdown文件开始时提供的 frontmatter。我们定义的每个键都可以被注入到查询中。...此时需要注意的一点是，GraphQL 查询是在构建时进行的。该组件被注入数据由 GraphQL 查询所得到。...我们将使用这些数据来构建一个包含盖茨比的页面。我们的 GraphQL“形状”直接反映在这个数据对象中，因此，当我们在GraphQL博客文章模板中查询时，我们从该查询中提取的每个属性都将可用。...每一次我们构建 Gatsby 时， createPage 将被调用，Gatsby 将会创建一个静态的 HTML 文件路径根据我们在帖子的前面专门写的 frontmatter。
新冠肺炎期间，约翰霍普金斯大学开发的疫情地图网站单日 PV 达 10 亿次，查看源代码可以看出它是一个单页应用（single-page application，缩写 SPA），JS 调用后端 API 返回动态数据...在云计算时代，静态网站已不再需要服务器，部署到云存储，开启 CDN 即可全球高速访问。...CSS/JS 作为简单的小文件，无需特殊处理，部署到云存储，再配合 CDN，成了静态网站架构最佳实践，有如下优点： 成本低：云存储/CDN 比服务器便宜很多（比如「腾讯云 对象存储 COS」约 0.1 元/...GB/月、腾讯云 CDN 每月赠送 10GB 流量），一个典型的公司官网一年费用不超过 10 元； 访问快：CDN 能在全国甚至全球快速访问，比服务器更快。...目前，静态网站有 2 种： 无内容的单页应用（SPA）：React/VUE 等框架开发的应用； 有内容的 HTML：手写或「程序生成 HTML」； 警告：React/VUE SPA 不带内容，难以被搜索引擎收录
该项目主要功能包括： 零分配路由器 快速响应 中间件支持 具备崩溃保护机制 JSON 数据验证 路由组合管理 错误处理 内置渲染引擎 可扩展 satwikkansal/wtfpython[3] Stars...在链操作时要小心顺序问题，因为比较操作按照从左到右依次执行，并可能导致意外结果。...squidfunk/mkdocs-material[5] Stars: 15.2k License: MIT 这个项目是一个强大的文档框架，建立在 MkDocs 之上。...它允许用户使用 Markdown 编写文档，并在几分钟内为开源或商业项目创建专业的静态网站 - 可搜索、可定制、支持 60 多种语言和所有设备。...高效轻量，在性能方面表现出色，并获得最佳搜索引擎排名。 支持辅助功能导航，确保任何人都能够正常阅读文档内容。
的云存储 新冠肺炎期间，约翰霍普金斯大学开发的疫情地图网站单日PV达10亿次，查看源代码可以看出它是一个单页应用(single-page application，缩写SPA)，JS调用后端API返回动态数据...在云计算时代，静态网站已不再需要服务器，部署到云存储，开启CDN即可全球高速访问。 ...HTML/CSS/JS作为简单的小文件，无需特殊处理，部署到云存储，再配合CDN，成了静态网站架构最佳实践，有如下优点： 成本低：云存储CDN比服务器便宜很多(比如腾讯云对象存储约0.1元/GB/月、腾讯云...CDN每月赠送10GB流量)，一个典型的公司官网一年费用不超过10元； 访问快：CDN 能在全国甚至全球快速访问，比服务器更快； 2010年起，AngularJS、Vue.js、React等框架陆续诞生...目前，静态网站有 2 种： 无内容的单页应用(SPA)：React/VUE等框架开发的应用； 有内容的HTML：手写或程序生成HTML； 提示：React/VUE SPA不带内容，难以被搜索引擎收录，不适合作为公司官网
HTML 模板文件 │ │ │ ├── dev.html # 用于开发环境的 HTML 模板文件 │ │ │ └── ssr.html # 构建时基于...VuePress 内置了基于 headers 的搜索 —— 它会自动为所有页面的标题、h2 和 h3 构建起一个简单的搜索索引。...在 VuePress 中，目前自带了一个默认的主题（正是你现在所看到的），它是为技术文档而设计的。...YAML：是一种表达数据序列化的格式。 Front matter：直译为“前置内容”，它是基于 YAML 格式的纯文本内容，放置在文档开头，用于标明文档的各种属性（元信息）。...{text: '文章B', link: '/vue/two'} ] } ] } } 可以通过 items 数组而不是一个单一的 link 时，
nav: - Home: 'index.md' - About: 'markdown.md' theme: readthedocs 当文档比较复杂时，...可以通过嵌套的方式对 nav 进行配置，例如在 Home 下还有子菜单，menu1 和 menu2： 当文档比较复杂时，可以通过嵌套的方式对 nav 进行配置，例如在 Home 下还有子菜单，menu1...Teadocs 提供内置的搜索技术，除了编写好你引以为豪的内容以外，你无需关注的任何额外的技术问题。 你可以使用它来编写开源书籍、API文档学习、笔记、学习心得、甚至可以用来写博客。...custom_theme) - [部署](/deploy) 符号介绍 语法完全使用markdown里的无序列表定义语法，但是要特别注意以下几点： [] 里的内容表示菜单的标题，如果不写...在 teadocs.config.js 文件的 theme.dir 配置项中指定你的自定义主题路径就可以了。
MkDocs MkDocs专注于创建项目文档，但也可用于创建简单的博客。 特点： 使用Markdown编写内容。 简单易用，适合文档项目。 有多种主题可供选择。...通过上面的Python静态网站生成器的介绍，我们可以看到，这些和 hexo等一些非常流行的静态网站生成器非常类似，所以我们思考下：我们可以使用Python自己实现一个类似hexo的吗静态网站生成器吗？...output_dir = 'output' env = Environment(loader=FileSystemLoader(templates_dir)) # 解析Markdown文件并提取元数据...[] in_metadata_section = False for line in lines: if line.strip() == '---': # 简单的元数据标记...当我们在md编写书数公式的时候，发现html并没有渲染，这里你能找到在哪里修改去支持这个特性吗？ 同理，如果在md里面编写mermaid呢？
它使用 GraphQL 查询数据，支持多种数据源和插件。 你可以查看它的 GitHub 和官网了解更多。 4.Jekyll star 数 45K+。...VuePress 还提供了内置的搜索、导航、侧边栏等功能，可以帮助用户快速浏览和搜索网站内容。 你可以查看它的 GitHub和官网了解更多。 11.Mkdocs star 数 16K+。...MkDocs 是一个简单易用的静态网站生成器，基于 Markdown 文档构建漂亮的 HTML 文档页面。 MkDocs具有以下特点： 采用Markdown格式编写文档，易于编写和维护。...本文列出了最受欢迎的 Top20 博客静态站点生成工具，它们在 GitHub 上的 star 数可以直接反映它们的受欢迎程度。...不同的工具都有各自的优缺点，适用于不同的需求和技能水平，因此在选择时需要根据自己的情况进行考虑。例如，如果您想要一个快速而简单的解决方案，那么 Jekyll 或 Hexo 可能是不错的选择。
Material for MkDocs 8.0 项目地址：https://github.com/squidfunk/mkdocs-material 在进行软件开发时，文档当然是必不可少的。...Material for MkDocs可以将你的markdown文档转化为一个静态网站。在最新的版本中， Material for MkDocs支持了代码注释等新特性。...它充当语言的编译器，甚至在应用程序运行之前就发现错误。 祝贺团队在经过 6 年的开发后发布了他们的第一个主要版本。...Material Design Icons 6.5.95 项目地址：https://github.com/Templarian/MaterialDesign/ 您的开源项目需要一些很酷的图标吗？...本文为从大数据到人工智能博主「xiaozhch5」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
前言 最近三个月我主要花时间在造一个轮子：深度学习库 Hamaa。...了解到TensorFlow的NHWC数据格式与Theano的NCHW数据格式之间的差异性。 弄懂了在训练卷积神经网络时影响速度与内存的因素。 学会了如何编写Python C Extension。...因为Hamaa的文档目前托管在ReadTheDocs上，而RTD只能要么使用Sphinx要么用MkDocs作为文档引擎。...考虑到文档编写、网站外貌（Sphinx很强大，但是他的autodoc功能导出的API文档在RTD主题下实在有点丑），最终选择了MkDocs+Markdown来编写文档。...但是这样又有了另外一个问题，MkDocs没有autodoc功能。如果手动编写，就意味着我要同时保持代码中的注释与API文档中的介绍一致。
改进的地方 1.利用了 Vue 3 的改进的模板静态分析来尽可能字符串化静态内容 2.静态内容以字符串模式而不是渲染函数代码发送，JS 负载更便宜，注水（SSR 时生成 js 交互逻辑代码）也更快 3....） 更轻量的页面 Vue 3 + Rollup 代码分离 不会把所有页面的元数据都在一个请求中发送出去。...客户端导航时再一起获得新页面的组件及元数据 其他不同点 1.VitePress 更武断且更少的配置。...外部链接 外部链接自动添加 target="_blank" rel="noopener noreferrer": vuejs.org VitePress on GitHub Frontmatter 支持...YAML frontmatter title: Blogging Like a Hacker lang: en-US GitHub-样式 表格 输入 Tables Are Cool col 3 is
在liunx中可能有几百个命令，最常用的就10多个。...-i：与 -f 选项相反，在覆盖目标文件之前给出提示，要求用户确认是否覆盖，回答 y 时目标文件将被覆盖。 -p：除复制文件的内容外，还把修改时间和访问权限也复制到新文件中。...在执行覆盖前，会为其创建一个备份。...使用说明 grep 搜索文本 文件名 参数： -n 显示匹配行以及行号 -v 显示不包含匹配文本得所有行 -i 忽略大小写 -nv 反向且行号 ^a 行首， 以a作为开头的行 ke$ 行尾...，搜索以ke结束的行 详细请见：https://www.runoob.com/linux/linux-comm-grep.html 案例 搜索 host@localhost static % ls -lh
一、前言 网站主题最初是在开发数据api的时候看到的，当时在学习Mybatis-Plus，最初也不知道这是个主题，就觉得Mybatis-Plus官网UI真的不错，直到后面发现另外一个类似的网站，我意识到这是个模板...2.基础网站配置 主页配置 打开以下目录的index.md,你可能会问咋是md格式的，不应该是html格式的吗？...部署时注意是部署云函数，不是该评论系统项目，被这个坑了好久好久。...id时需要添加自己的域名进行部署，类似xx.de7v.com。...只是随便输一个） 浏览器键入自己的域名就可以访问了，我的宝塔部署的站点IT七剑客,挺快的，比之前dev模式好多了 五、常用命令 安装node依赖 自动安装缺少的依赖 npm install 项目调试 在测试功能时使用
因为，之前未设立技术文档部门时，其他人来写这块内容呈现的效果非常差、用户体验不佳。因此，很多企业才会存在技术文档这个部门，来帮助企业解决人员分工问题。...目前，NebulaGraph 技术文档团队正在使用开源的文档编辑软件 MkDocs Material（参考延伸阅读），满足目前的内容复用需求。...在应用端（文档网站）可以做的用来提升用户体验的事情：语义化的搜索能力，搜索引擎可以根据用户的使用场景，搜索词语的意思检索到目标内容。知识模块化，基于 XML 体系的内容发布。...智能内容，智能机器人可以推送用户搜索的问题。考虑用户常搜索的关键字，考虑 SEO 创作内容。...图片2.矩阵结构矩阵结构允许用户沿着两 / 多个维度在节点之间移动，最终都可以帮助用户找到想要的信息。图片3.自然结构自然结构不遵循任何一致的模式。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
