为什么用 GraphQL 在上一节介绍了选择 Gatsby 的原因，其中提到了 Gatsby 使用 GraphQL 。大家可能会有疑惑，不是建静态博客么，怎么会有 GraphQL？...在 Gatsby 中，根据 js 文件的位置不同，使用 GraphQL 有两种形式，且 Gatsby 对其做了魔法，在 src/pages 下的页面可以直接 export GraphQL 查询，在其它页面需要用...创建页面 回到我们前面的查询[25]，得到需要的数据之后只需要对每个页面调用 actions.createPage 即可。...通过实现自定义路径基本上可以了解 Gatsby 页面生成的方式了。下节中我会继续谈谈其它个性化的配置，如草稿模式和显示上下篇博文。 草稿模式 草稿模式即可以将文章保存为草稿而不被渲染出来。...这是[27]我的例子。 通过实现这几个功能我们了解了 Gatsby 页面生成的方式以及其 Node APIs 的基本使用。
添加必要的插件 Gatsby 支持使用丰富的插件，很多非常有用的插件都是为了完成普通任务而编写的。...因为博客的大部分内容都使用 Markdown 格式，让我们添加 gatsby-source-filesystem，与我们之前的步骤类似，我们将安装插件，然后将其注入到我们的 gatsby-config.js...我们不能期望用户猜测每个帖子的路径，我们需要有一个索引或列表页面来展示每个博客文章，简短的介绍，以及一个完整的博客文章的链接。...注意，我们正在提取一个稍微不同的数据集，具体来说，我们将提取250个字符的摘要，而不是完整的HTML，同时我们还在用格式字符串格式化拖拽日期！GraphQL是很优雅的。...添加一个 tag 列表和 tag 查询页 提示： gatsby-node.js 文件中的 createPages API 在这里很有用，还有之前的 frontmatter 在特定的博客文章之间添加导航（
如果浏览器需要解析 296kb 的 JavaScript 代码才能显示出博客文章的列表，这就不是什么"渐进增强”，而是用错了工具。...这篇文章并不是要批判 Gatsby 而写的。它的背后有一些聪明的头脑，他们已经承认了本文中提到的许多问题，并试图解决它们。...我挑选了一些不需要添加客户端 JavaScript 也能添加功能的插件： 在帖子中显示代码段时，通常会包含特定于语言的语法高亮显示。...Eleventry 还有一些让我感到困惑的事情：我有一阵子一直搞不懂它的分页功能，认为它只是将帖子分页到指定大小的一些组中，之后才意识到它可以动态生成全新的页面；我还发现自己在同一文件中混用了模板语言：...我并不是推荐大家都删除自己网站上的所有 JavaScript 文件，但从现在开始，在构建网站时我会尝试将 JavaScript 视为可选的额外功能，而不是体验的基本组成部分。我鼓励你也这样做。
让我们举个具体的列子。想象一下，你需要在正在构建的社交网络框架中显示帖子列表，以及用户的喜好（点赞、收藏等）。在实现方面，这个例子很简单，你只需从下一个数据库端点发出请求。...这就是GraphQL的用武之地，使用GraphQL而不是使用单独的端点来访问每个资源。你可以使用单个端点，该端点能够同时处理涉及多个数据源的复杂查询。...Gatsby 如果你的预算比较紧张，但是同时又希望在你的项目中只使用高级技术，那么你一定要尝试 Gatsby。Gatsby 是 Kyle Matthews 为静态网站的创建而构建的新型解决方案。...因此，你可以获得自动更新和即时页面转换等优势。从1.0版本开始，Gatsby 使用了上面提到的 GraphQL。...现在，让我们从枯燥的特征列表转移到真正的问题，看看 Gatsby 是否适合你。 Web 开发者使用现成的引擎并不总是那么容易。
目录 Gatsby.js设置 配置 页面布局 机器学习设置与谷歌Colab 假文章代 Google Drive API 编程式页面生成 部署 改进的领域 如果您想要更深入地了解这个项目，或者想要添加到代码中...基本上，Gatsby.js将帮你创建一个有完整的骨架的网站，你可以调整和重新配置，而不是从头开始构建整个东西。...其他的插件不太重要，就不介绍了。 gatsby-node.js 此文件用于实现api。这些api可以使用GraphQL从数据层中获取数据。在处理程序化页面生成时，我们将更深入地研究这个文件的内容。...我们可以使用名为Gatsby -source-drive的插件将文件直接导入到Gatsby的本地文件系统中。这需要在谷歌api中设置一个服务帐户。...编程式页面生成 我们已经使用谷歌Colab生成了文章，并且使用gatsby-source-drive插件将文件直接归档到我们的本地文件系统中。现在我们需要使用markdown文件以编程方式生成网页。
Hexo -- 灵活性欠缺 没有使用hexo开源的博客系列的原因在于，hexo是一个专注于博客的产品，它的灵活性非常欠缺，而我对微言码道的构思中，远不止博客一个内容，还包括电子书，myddd开源项目，视频及音频多种形式...但考虑到WordPress是一个基于PHP及MySQL的产品，其产品形态过重，而微言码道的东西，虽然内容是动态更新，但以静态页面来展现会更轻，更快，更好。...但在使用getStaticProps生成静态页面的开发过程中，每次都会重新请求与处理，这个非常影响体验，导致开发下速度非常慢。难以接受。...但问题是tailwind css全是原子化的css，没有成套的组件，这意味着诸如弹出框，进度条等可能要自己写或网上找第三方，这非常不方便。而MUI则有一整套组件可供使用。...所以，在尝试与权衡后，决定仍然使用了Gatsby+MUI的搭配。 永不停止的折腾 当然，微言码道的官网不会就折腾到此为止。对它的折腾仍然是永不停止的。 而我最迫切想折腾的其实是UI。
（译注：也就是“页面静态化”） static-rendering-tti.png 静态渲染的解决方案选择很多，像 Gatsby 这样的工具旨在让开发人员感觉他们的应用程序是动态渲染的，而不是构建过程生成的...（译注：简单的说静态渲染不依赖客户端JS，适用于静态页面，而预渲染则依赖JS，更多是为了富应用的初始界面加速） 如果不确定选择静态渲染还是预渲染方案，请尝试此测试：禁用JavaScript并加载创建的网页...所有逻辑、数据获取、模板和路由都在客户端处理，而不是服务器上。 客户端渲染很难在移动端做到很快。...页面请求交由服务器处理，将应用程序渲染为 HTML，然后把用于渲染的 JavaScript 和数据，嵌入到生成的文档中。...使用这种方法，服务器渲染后的页面各部分，随着时间推移被“启动”，而不是通常一次初始化整个应用程序的做法。
因此用最通俗易懂的话来描述JAMStack就是：使用JavaScript，APIs和Markdown三种技术来构建Web应用。所以JAMStack是一种问题解决方案，而不是一个具体的实现。...博客网站包含以下的功能： 博客列表页面：展示我发表的所有博客。（静态内容） 博客详情页面：展示每一篇博客的具体内容。（静态内容） 博客评论列表：游客评论博客以及展示游客对这篇博客的评论列表。...例如现在pages底下有两个路由，404的路由对应着的是没找到资源的页面，而index路由则是博客的主页面。...这类应用的内容除了频繁更新之外，还有就是动态内容多于静态内容，例如用户的主页只会展示他关注的人发表的动态，所以也不适合使用JAMStack。 一些不需要SEO的应用。...可是使用了JAMStack或者说是Gatsby后这些问题就迎刃而解了，因为我可以继续使用我熟悉的React技术栈来快速开发Web应用，还无需考虑服务端渲染的问题就可以达到SEO的效果，这不是美滋滋？
一个强大的工具包，能够做出丰富的拖拽页面应用，而且代码具有解耦性。...，可以轻易地创造骨架式的 加载页面（loading）（有点像 Facebook 的卡片加载) 突出的功能 很多插件: 有许多预设可供使用。...使用 React构建快速、现代的应用程序和网站 突出的功能 以极低代价托管: Gatsby站点不需要服务器，因此您可以以服务器呈现站点的一小部分成本在CDN上托管整个站点。...从任何地方定位数据: 从任何数据源 (Markdown文件，像Contentful或WordPress和REST API这样的无头CMS) 中提取数据。 超越静态站点: 无任何限制的静态网站的好处。...React 组件将管理您对文档头的所有更改。
这也将更新 blogrolls（即在您的主页或博客页面上）以显示新帖子。 更新帖子： 启用- 在更新帖子或页面时清除缓存文件。...虽然浏览器需要在您第一次访问站点时下载这些文件，但在后续访问时加载页面会更快，因为浏览器可以使用其本地缓存中的文件，而不是从您的服务器下载它们。...选择 URI 的类型（无论是主页还是以特定 URL 开头）并选择删除该区域的缓存的频率。我们将转到“排除”选项卡。这里的第一个选项是从缓存中排除某些页面。...一个CDN使您的网站通过举办它在全国和世界各地的多台服务器，而不是1个原始服务器，减少服务器和观众之间的地理距离更快。...接下来也可以在 Cloudflare 仪表板中添加的页面规则，设置完成后转到Cloudflare 缓存设置并清除单个文件。
这一篇完成后的 DEMO 如下： 具体有三个页面： 主页：展示了所有帖子，以及添加新帖子的按钮。 帖子详情：展示单个帖子的全部内容。 个人主页：展示当前用户的个人信息。...Github[2] 上，如果您觉得我们写得还不错，希望您能给 ❤️ 这篇文章点个在看+Github 仓库加星 ❤️ 哦~ 来一打页面 在这一步中，我们将开始实现项目的其他页面，包括： 帖子详情 post...：进入单篇帖子的详情页面 我的 mine：显示当前用户的个人信息（在后面的步骤中将实现登录注册哦） 其中，帖子详情页面中将复用前面编写的 PostCard 组件。...为了方便管理，我们需要引入一个新的 prop（isList），用于判断此组件是显示在首页列表中，还是在帖子详情页面中。...在 PostCard 中添加跳转逻辑 我们首先在 PostCard 组件中添加跳转逻辑，使得它被点击后将进入该帖子的详情页面。
注意：在某些环境中，您可能需要使用python而不是python3来调用Python 3.x. 如果您只有Python 2.7，请输入以下命令： ?...这是由于这个项目中的一个示例博客有一些用Markdown编写的帖子。 要正确渲染它们，请使用以下命令安装commonmark软件包： ? 然后再次尝试上一步。...注意：在某些环境中，您可能需要使用python而不是python3来调用Python 3.x. 如果你只有python，输入这个命令： ? _site目录包含整个生成的网站。...layout/item.html：它包含博客列表页面中每个博客文章项目的模板。 make_list()函数使用此模板呈现每个博客文章项目，并将它们插入到列表布局模板中以创建博客列表页面。...加载完所有布局模板后，它会调用render()以将帖子布局模板与页面布局模板组合起来，以形成最终的独立帖子模板。 同样，它将列表布局模板模板与页面布局模板组合在一起以形成最终列表模板。
他们将测试的每个页面（包括主页）的首次内容绘制（First Contentful Paint，FCP）时间降低了大约 100 毫秒。他们还最小化了后端慢查询对加载时间的影响。...Airbnb 一直在尝试进行可能的改进，以便尽可能快地向网站用户呈现内容。他们发现，只在完全渲染后才发送页面主体并不能提供最佳的用户体验，特别是当页面主体内容依赖后端查询时。...HTML 页面头部的标签中。...尽管尽早冲刷并不是什么新技术，但也并没有被广泛使用，因为它需要渲染和发送不完整的 HTML 页面（有些标签没有关闭）。...Airbnb 使用基于 Express 的 NodeJS 服务器来渲染 React 开发的网页，并将之前用于渲染整个 HTML 页面的单个 React 组件重新设计拆分为三个单独的组件。
Astro 的文档 将“岛屿”定义为“页面上的任何交互式 UI 组件”，并邀请开发者将岛屿视为“漂浮在一片静态、轻量级、服务器渲染的 HTML 海洋中的交互式小部件”。...正如 Scanlon 在他的帖子中所说，“React 很棒，但你的网站每一页都需要它吗，还是只需要在网站周围的几个“岛屿”中？”...在 1 月份的Modern Web播客的 一集中，Quick 解释了 Astro 如何成为一种下一代 Gatsby。...他的个人博客之前在 Gatsby 上，他开始将其迁移到 Next.js，这是他在工作中花费大量时间使用的框架。但在此过程中，他试用了 Astro，并很快被开发者体验所吸引。...“我敢打赌，他们将继续在服务器上添加特性和功能，但他们会考虑到出色的开发者体验，因为他们已经通过他们已经完成的所有其他事情证明了这一点。”
这可能会导致不一致，特别是如果我们在代码中使用查询相关的过滤器，因为你在页面中不期望的帖子可能会被该函数返回。 使用WP_Query类 在我看来，这是从数据库中检索帖子的最佳方式。...为了实现这一点，我们使用posts_per_page参数。 WordPress允许我们将-1表示为该参数的合理值，在这种情况下，系统将尝试获取满足定义条件的所有帖子。...虽然这种灵活性是一个强大的功能，但应谨慎使用，因为参数化可能会转化为复杂的表连接和昂贵的数据库操作。 在下一节中，我们将概述一种在不影响性能的情况下仍然实现类似功能的优雅方式。...我们也可以做一个小的改变，并使用transients 而不是options。 Transients 工作类似，但允许我们指定一个到期时间。...例如，如果我们在用户滚动我们的主页时动态加载更多的帖子，那么最好直接调用其他前端页面，这将获得被缓存的好处。 然后，我们可以通过浏览器中的JavaScript来解析结果。
当您将新内容发布到您的网站时，之前的帖子会关闭并最终移动到存档页面。粘性帖子允许您在WordPress中添加精选帖子，并在您的网站主页上以不同的方式显示它们。...如果您想确保人们阅读重要的通知或帖子，请将其放在顶部。 同样，您可以使用置顶帖/文章子恢复旧博客帖子。定期创建内容可能具有挑战性。您可以恢复旧帖子并将其放置在您网站的顶部，而不是创建新内容。...（帖子或自定义帖子类型）选择开关图标的颜色显示开关图标的列的自定义顺序仅使用内置的WordPress功能星形图标开关立即使用 ajax 将帖子保存为置顶状态可选地，将帖子的所有翻译设置为置顶，支持 Polylang...在WordPress中为类别添加置顶帖/文章的最简单方法是使用WordPress Sticky Posts Switch插件，可让您在主页、存档页面和分类页面上设置置顶文章。 ...Sticky Posts Switch插件教程WordPress中为分类添加置顶文章 此外还可以选择在主页、帖子存档页面或分类页面（如类别和标签）上显示粘性帖子的位置。
此外，您可以使用GIF使这个滑块更加美观！为您的帖子添加徽章您可以标记自己的帖子。我们将这些徽章设置为“新”，“热门”和“赞助”，但您可以根据需要更改这些词。...可用的样式是：经典（特色图片）英雄与灯光标题黑暗标题的英雄没有特色图片画廊帖子将您的图库添加到帖子中，然后选择“图库”帖子格式。它将显示在帖子页面的最顶部，在一个有用的滑块中。...视频帖子您可以直接嵌入任何YouTube或Vimeo视频的网址，然后选择“视频”帖子格式。Gliu将在内容中找到第一个视频并显示它而不是特色图像。...您可以直接嵌入任何YouTube或Vimeo视频的网址，然后选择“视频”帖子格式。Gliu将在内容中找到第一个视频并显示它而不是特色图像。...横幅管理我们的主题有一个排行榜横幅管理系统，可让您将横幅添加到主页，页面和帖子页面的10个不同位置。我们的主题有一个排行榜横幅管理系统，可让您将横幅添加到主页，页面和帖子页面的10个不同位置。
，在苹果开发软件中，所有视图可以被放在一个叫做storyboard的“面板”中，并通过视图把每一个页面联系起来，让用户一下就可以看清楚怎么使用，对功能了如指掌，只是把页面做好还不是所有的任务，还要通过相关代码...控件的动作可以触发类中的属性或方法，需要打开Xcode的storyboard面板，在左侧将类列表打开，在列表中找到刚才保存好的类；先选中页面“view”,在右侧打开“custom class”窗口，在“...class”列表中，选择相关的类，可以将类与相关页面关联，下一步要关联每个控件与类中的属性及方法；这时右键点击左侧打开的类名，会出现一个属性及方法列表，用左键点击某一属性的名字，经过这个37摄区项目的开发...图3.3喜好功能需求图 （1）我的群组功能主要可以查看到我添加的群组列表，和进入群组进行聊天； （2）我的关注功能，可以关注周边的朋友等功能，即时聊天功能是可以和朋友进行实时聊天； （3）添加好友功能是添加朋友和搜索周边朋友进行添加聊天...图4.3喜好页面流程图 （1）我的群组功能主要可以查看到我添加的群组列表，和进入群组进行聊天； （2）我的关注功能，可以关注周边的朋友等功能，即时聊天功能是可以和朋友进行实时聊天； （3）添加好友功能是添加朋友和搜索周边朋友进行添加聊天
第一：lxml及xpath使用 第二：模拟登陆处理 第三：多页面处理 第四：MongoDB存储 第五：使用pandas存储数据到csv 第六：数据下载 第七：列表、字典处理 第八：面相对象思想 第九：正则啊等等...这里采用的算法思想是通过zip()函数将两个list合并成字典，key为id，value为avater，那么现在问题就变为了字典去重，先定义一个新的字典，如果当前添加的数据不在新的字典里面，就往里面加，...最后就得到了一个去重后的字典，对字典进行拆分为两个列表即可，返回后的两个列表就是我们最后所需要的数据。...2.2 用户个人主页 用户个人主页功能在上一节做了详细解释，这一节主要侧重于异常的处理及如何调用bbs代码，将bbs代码与个人主页代码结合使用。...浏览器输入http://i.dxy.cn/profile/壹刀，会发现重定向进入http://i.dxy.cn/lizhanqiang这个页面，如下图所示: 壹刀主页图 会发现这个已经不是我们想要的用户页面图了
在最近尝试简化衡量和理解什么是良好用户体验的过程中，Google 对页面的用户体验指标进行了标准化。 这些标准化指标被称为核心 Web 指标，有助于评估您网页上的真实用户体验。...例如，您需要在产品列表页面上使用较小尺寸的图像，在产品详细信息页面上使用较大尺寸的图像。这种调整大小可确保您不会发送除该特定页面所需的任何额外字节。...缓存图片并缩短交付时间 图像 CDN 使用全球内容交付网络(CDN) 来交付图像。使用 CDN 可确保图像从更靠近用户的位置加载，而不是从您的服务器加载，后者可能位于地球的另一端。...您还可以尝试为 HTML 和 API 使用 CDN，以在 CDN 节点上缓存这些响应。鉴于此类内容的动态特性，将 CDN 用于 HTML 或 API 可能比将 CDN 用于静态内容复杂得多。...1.使用服务端渲染 您可以在服务器上动态生成页面，然后将其发送到客户端的设备，而不是将整个 JS 传送到客户端并在那里进行所有渲染。这会增加生成页面所需的时间，但会减少在浏览器中激活页面所需的时间。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
