首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

一杯茶的时间,上手 Gatsby 搭建个人博客

在 Gatsby 中,根据 js 文件的位置不同,使用 GraphQL 有两种形式,且 Gatsby 对其做了魔法,在 src/pages 下的页面可以直接 export GraphQL 查询,在其它页面需要用...一般使用时只需要知道集合里每个项目的数据在 edges.node 中,同时通过 GraphiQL 浏览其它可以使用的数据。...但这么做还是略嫌不便,通过 CMS 一般可以在一个可视化的在线环境中编辑文章,然后一键即可发布。 Gatsby 主流的两个 CMS 是 Contentful 和 Netlify CMS。...如我的博客[23]中每篇文章都有一个 quote 域放些引用文字,那么在配置[24]中添加上 fields: - label: "Quote" name: "quote" widget...Gatsby 如何生成特定页面 一般来说,在 /src/pages/ 目录下的组件会自动生成相应路径的页面,但如果是其它类型的文件就不会了。

3.2K20

前端监控 SDK 的一些技术要点原理分析

),从页面加载开始到页面内容的任何部分在屏幕上完成渲染的时间 LCP(largest-contentful-paint),从页面加载开始到最大文本块或图像元素在屏幕上完成渲染的时间 CLS(layout-shift...LCP LCP(largest-contentful-paint),从页面加载开始到最大文本块或图像元素在屏幕上完成渲染的时间。...LCP 指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。 一个良好的 LCP 分数应该控制在 2.5 秒以内。...LCP 考察的元素类型为: 元素 内嵌在元素内的元素 元素(使用封面图像) 通过url())函数(而非使用CSS 渐变)加载的带有背景图像的元素 包含文本节点或其他行内级文本元素子元素的块级元素...,它表示获取资源的大小,包括响应头字段和响应数据的大小。

2.3K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Web渲染那些事儿

    这样做避免了在客户端上进行数据获取的额外往返(round-trips)和模板处理,因为这些工作在浏览器获得响应之前,已由服务器处理了。...这之所以行得通,因为服务器渲染的本质,只是向用户浏览器发送文本和链接。这种方法适用于广泛的设备和网络,并能触发一些有趣的浏览器优化,比如流文档解析。...所有逻辑、数据获取、模板和路由都在客户端处理,而不是服务器上。 客户端渲染很难在移动端做到很快。...页面请求交由服务器处理,将应用程序渲染为 HTML,然后把用于渲染的 JavaScript 和数据,嵌入到生成的文档中。...流式服务器渲染能以 chunk 形式发送 HTML,浏览器可以在接收时逐块渲染。

    1.9K30

    「内容管理系统」34个无头CMS应该在你的技术雷达上

    对于那些希望获得并保持消费者关注的品牌来说,这样的环境既是挑战,也是机遇。品牌们会问自己的首要问题是;我们如何在如此多的变数中,在正确的时间,通过正确的方式,将我们的内容呈现在正确的观众面前?...它有显示JSON片段的能力,一个富文本编辑器,和内容建模功能,使营销人员可以安排单独的字段和内容模块,如文本,图像和日历。 可用性:免费计划,包括高级计划和企业计划。 4. dotCMS ?...SaaS平台拥有多租户和解耦的体系结构,提供支持个性化、多站点管理、本地化、集成、框架不可知性和详细库存管理的特性。该平台还有一个WYSIWYG编辑器,支持富文本和媒体管理。...DatoCMS支持多种语言,使品牌能够在文件夹中组织数字资产,使用ai驱动的标签或复杂的搜索功能快速定位媒体文件,并将其发布到需要的任何地方。 可用性:免费试用 12. GraphCMS ?...明智的特性是WYSIWYG富文本编辑器,它允许你在运行的文本中嵌入可编辑的数据,并将标记推迟到呈现时间。它还附带了一个很好的查询API,可以在一个请求上缓存多个查询。

    7.4K11

    晓实战 | 这样编辑小程序富文本,又快又方便!

    借此机会,在这里跟大家分享一下我的知晓云实战经验,希望能为各位开发者带来帮助。 ? 纸塘小程序里有一块是赞助商的广告,在首页的「今日精选」中,最后一张图片是广告。如下图所示: ?...点击这张图片之后,会进入一个富文本页面。虽然微信小程序官方提供了富文本的组件,但是用起来不方便,而使用知晓云提供的「内容」板块,就可以十分方便地实现富文本的需求。 在知晓云添加数据 1....在小程序中显示文章内容 1. SDK 接入 按照文档将知晓云最新版的 SDK 和 wxParser 放入项目的目录中,并且在 app.js 里引入 SDK。 ? 2. 获取数据表 ?...获取文章内容 在已经获取数据表后,便可以做出一开始截图的首页了,页面布局和样式就不展示了。...接下来进行下一步:当用户点击这个图片后,会进入一个富文本页面,此时,需要将之前获取数据中的文章 ID 传到下一个页面中,下一个页面根据这个 ID 来查找到对应的文章。

    76030

    60 个前端 Web 开发流行语你都知道哪些?

    21.FCS 第一次内容丰富的绘画(First Contentful Paint),它测量用户导航到你的页面后浏览器渲染第一段 DOM 内容所花费的时间 22.Fields(字段) 数据收集的最基本构建块...28.HTML “超文本标记语言”用于在形式和功能方面构建网站的编码语言。 29.HTTP 超文本传输​​(或传输)协议,万维网上使用的数据传输协议。...30.HTTPS 与 HTTP 基本相同,但使用加密方法来保护传入和传出网页的数据。 31.iFrame 用于在另一个网站中嵌入网站的 HTML 元素。...37.Minification 缩小是最小化代码和标记以减小文件大小的过程。例如,在创建 HTML 文件时,开发人员很可能会使用间距、注释和变量来使代码在使用时更具可读性。...它是一个可视化内容编辑器,允许你将内容修改为富文本(带格式的文本) 都看到这里了,不妨给个点赞和收藏吧,关注我带你体验 Web 编程的乐趣

    1.1K21

    使用 Jina Embeddings v2 在 Elasticsearch 中进行后期分块处理

    通过结合Elasticsearch和semantic_text字段类型,我们展示了如何实现后期分块来优化长上下文处理。在详细的步骤中,我们涵盖了创建端点、索引、数据索引、提问和后期分块示例。...长上下文模型一般情况下,我们使用的嵌入模型的上下文长度是512个标记(tokens),这意味着如果我们尝试创建更长的嵌入,只有前512个标记会被添加到向量字段中。...这种短上下文的问题在于,文本块(chunks)只能感知块内的文本,而无法了解整个上下文:如图所示,在 Chunk 1 中,我们知道在讨论Sarah Johnson,但在 Chunk 2 中,我们失去了直接的引用...让我们看看这个模型是如何工作的:更长的上下文长度允许我们在同一个块中保留第一次提到Sarah Johnson的引用:然而,这也有其缺点。上下文越大,意味着你在同一个维度空间中放入了更多的信息。...这种压缩可能会稀释上下文,从嵌入中移除潜在的重要信息。另一个缺点是生成更长的嵌入需要更多的计算资源。最后,在一个RAG系统中,文本块的大小决定了你发送给LLM的信息量,这会影响精度、成本和延迟。

    13121

    收好61个前端热词清单,成为跟上潮流的前端仔

    首次内容绘制 First Contentful Paint 简称FCP,它衡量用户浏览你的网页后,浏览器渲染第一块DOM内容所需的时间。 字段 Fields 数据收集的最基本构件。...超文本标记语言 HTML "超文本标记语言" 在形式和功能方面用于建立网站的编码语言。 超文本传输(或转移)协议 HTTP 超文本传输(或转移)协议,万维网上使用的数据传输协议。...HTTPS 基本上与HTTP相同,但使用加密方法,以确保传入和传出网页的数据。 iFrame 用于将一个网站嵌入另一个网站的HTML元素。...最小化是指将代码和标记最小化以减少文件大小的过程。例如,在创建一个HTML文件时,开发人员很可能会使用间距、注释和变量,以使代码在工作中更易读。...它是一个可视化的内容编辑器,允许你将内容修改为富文本(具有格式化的文本)。 Yarn Yarn是一个包管理器,就像NPM一样,同时也是一个项目管理器。

    2.2K65

    前端性能优化--数据指标体系

    参考《经济时报》如何超越核心网页指标阈值,并使跳出率总体提高了 43%,这个例子中主要优化了两个指标:Largest Contentful Paint (LCP) 和 Cumulative Layout...(FCP):首次内容绘制,衡量从网页开始加载到网页任何部分呈现在屏幕上所用的时间 Largest Contentful Paint (LCP):最大内容绘制,衡量从网页开始加载到屏幕上渲染最大的文本块或图片元素所用的时间...PageSpeed Insights (PSI) PageSpeed Insights (PSI) 是一项免费的 Google 服务,可报告网页在移动设备和桌面设备上的用户体验,并提供关于如何改进网页的建议...LCP Largest Contentful Paint (LCP) 指标会报告视口内可见的最大图片或文本块的呈现时间(相对于用户首次导航到页面的时间)。...我们可以使用 Largest Contentful Paint API 在 JavaScript 中测量 LCP: new PerformanceObserver((entryList) => {

    30410

    【合合TextIn】智能文档处理系列—电子文档解析技术全格式解析

    RTF富文本格式(Rich Text Format),允许文本格式化和包含图像等对象,确保文档可以在不同的文本处理软件之间传输而保持格式不变。...字符编码决定了文本文件中的字节如何转换成字符。常见的字符编码包括ASCII、UTF-8、GBK等。...2.2.2 换行符处理由于不同操作系统中的换行符可能不同(例如,Windows中通常使用\r\n,而Linux和Mac OS使用\n),在跨平台处理TXT文件时,正确处理换行符是必要的。...它是一个复杂的二进制文件格式,旨在保存富文本属性(如字体、样式、格式化)和其他文档元素(如图表、图片、嵌入的对象等)。...6.2.4 关系和引用处理XLSX文件中的元素(如单元格、图表、图片)可以相互引用。解析这些引用关系对于理解数据结构和内容之间的关系至关重要。

    44610

    使用 LlamaIndex、Elasticsearch 和 Mistral 进行检索增强生成(RAG)

    我们使用SentenceSplitter分割的块被发送到通过Ollama在本地机器上运行的Mistral模型,然后mistral为这些块创建嵌入。...创建ElasticsearchStore时(由es_vector_store引用),我们提供了我们想要创建的Elasticsearch索引的名称(在我们的例子中是calls),我们希望存储嵌入的字段(在我们的例子中是...conversation_vector),以及我们想要存储文本的字段(在我们的例子中是conversation)。...size=1 到目前为止,我们所做的是从JSON文件创建文档,我们将它们分块,为这些块创建嵌入,并将嵌入(和文本对话)存储在一个向量存储(ElasticsearchStore)中。...然而,当你想要使用在云中运行的LLM(例如OpenAI)时,发送包含PII信息的文本是不可取的。在后续的博客中,我们将看到如何在RAG流程中屏蔽PII信息后再发送到外部LLM。

    2K62

    一文读懂H5新特性的应用

    使用场景 独立内容块:适用于表示一个完整的文章、博客帖子、新闻报道等内容。 嵌套使用:在一个 内部,可以嵌套使用其他 标签,适用于显示评论、嵌入文章等场景。...使用场景 富文本编辑器:在网页上创建一个富文本编辑区域,用户可以直接在页面上编辑内容。 前端展示:临时编辑页面内容以查看效果。...使用场景 表单输入检查:在文本输入区域启用或禁用拼写检查功能,尤其是在多行文本或文章编辑器中。 国际化支持:为不同语言的输入字段设置拼写检查功能,提升用户体验。 常用属性值 true:启用拼写检查。...产品展示:在电商网站中嵌入产品展示视频,以动态形式吸引用户。 用户生成内容:在社交媒体平台允许用户上传和嵌入自己拍摄的视频。 常用属性 src:指定视频文件的路径。...placeholder:在输入字段中显示提示文本,当用户输入内容时提示文本消失。

    45210

    Excelize 开源基础发布 2.8.1 版本,2024 年首个更新

    中的字段 AlignWithMargins 和 ScaleWithDoc 修改为指针类型移除了未使用的导出类型 ShapeColor新增功能新增函数 SetCellUint 支持设置无符号整型数新增函数...图形对象、单元格公式、易失性函数中的单元格坐标引用新增 6 项新增条件格式类型:“特定文本”、“空值”、“无空值”、“错误”、“无错误”和“发生日期”公式计算引擎支持计算带有多重负号的单元格公式复制行时支持复制条件格式与数据验证设置行高度函数...,部分样式定义缺失问题修复部分情况下读取带有科学记数法数字格式单元格的值结果有误的问题修复部分情况下,读取带有工作表中不含 r 属性的行元素导致的 panic 问题修复获取富文本单元格函数 GetCellRichText...在获取内联富文本时返回错误的问题修复部分情况下,由于共享字符串表索引计算有误导致的设置单元格的值结果有误问题修复函数 GetConditionalFormats 读取带有“高于平均值”条件格式规则时...函数无法读取带有渐变填充格式数据条的问题修复了获取样式函数 GetStyle 或获取条件格式样式函数 GetConditionalStyle 所返回的小数位数 DecimalPlaces 字段值有误问题修复了使用

    23510

    Elasticsearch 新的 semantic_text 映射:简化语义搜索

    这些模型生成的向量嵌入是捕捉文本含义的数值表示。这些嵌入与文档数据一起存储,使得向量搜索技术能够考虑词语的含义和上下文,而不仅仅是纯粹的词汇匹配。 如何开始使用语义搜索?...处理器需要配置: 用于生成嵌入的文本字段 添加生成的嵌入的输出字段 具体的推理配置,适用于文本嵌入或稀疏嵌入,取决于模型类型 使用 semantic_text,你只需将文档添加到索引中。...另一种选择是使用分块将长文本分割成较小的片段。这些较小的块被添加到每个文档中,以更好地表示完整文本。然后可以使用嵌套查询搜索所有单个片段,并检索包含最佳评分块的文档。...生成的块将存储在嵌套对象结构中,以便你可以检查每个块中包含的文本。 查询数据 现在文档及其嵌入已在 Elasticsearch 中索引,是时候进行一些查询了!...,还包含一个存储原始文本、模型设置和输入文本被分成的每个块信息的结构。

    22221

    项目中如何对XSS统一处理

    XSS攻击是指攻击者利用网站中的漏洞,向页面中注入恶意脚本,从而获取用户的信息或者控制用户的计算机。...如何在项目中防范XSS攻击呢有一些项目使用Filter+注解的方式来过滤或者提示XSS攻击。 通过在参数中的字段上加上类似@Xss的注解,来表示这个字段是不允许输入XSS脚本的。...严格来说,其实普通系统内的绝大部分输入字段都不允许输入XSS文本。除非一些存储富文本的字段。因此需要在很多字段上去标注上@Xss注解。...Filter中的代码,需要重复去读Request类的数据,因此需要自己实现一个可重复读的RequestWrapper.因此我使用了JsonDeserializer更简单的处理全局的防Xss处理。...防XSS脚本注入 jacksonObjectMapperBuilder.deserializers(new JsonHtmlXssTrimSerializer()); }}复制代码如何支持富文本某一些字段可能是需要支持富文本的

    69810

    一文详解动态 Schema

    我们举例来看: Schema 定义了如何在数据库中插入和存储数据,上图展示了如何为关系型数据库创建一个标准的 Schema。 在上图的数据库中, 一共有 4 张表,每张表都有各自的 Schema。...如何使用 Milvus 向量数据库中的 Dynamic Schema 功能? 下面的代码片段展示了如何在 Milvus 中开启动态 Schema 功能,以及如何将数据插入到动态字段并执行过滤搜索。...Milvus 以列式结构组织数据,在插入数据过程中,每行数据中的动态字段数据被打包成 JSON 数据,所有行的 JSON 数据共同形成隐藏的动态列 $meta。...另一方面,使用动态 Schema 进行过滤搜索比固定 Schema 慢得多;在动态 Schema 上进行批量插入比较复杂,推荐用户使用行式插入接口写入动态字段数据。...后续,我们还将在Milvus 2.4 中增强标量索引能力,通过静态和动态字段的倒排索引加速过滤查询,实现动态 Schema 管理和查询的性能和效率提升。

    44810

    聊一聊我的文本编辑器

    说一下我博客的文本编辑器 最初使用的若依自带的quill,刚开始使用就会有些卡顿,刚开始还不太在意,后来慢慢发现确实不爽,嵌入代码块时还会卡死浏览器,之后思考许久决定换一个文本编辑器。...最初还是在吧目光放到流行的富文本编辑器上,于是尝试了wangEditor,一开始没发现什么问题,到了编辑出错时,删除文章内容时光标会跳到最后一行,找了很多方法,还是不能完美解决,于是放弃··· 然后,我又看到了好多人推荐的...UEditor富文本编辑器,刚一上手果断放弃,太重了,使用太复杂,哈哈哈,不符合我 于是乎,我看到了这么一篇文章,说的是现在不太流行富文本编辑器了,都是再用markdown编辑器,于是第一个就看到mavonEditor...,默认是md格式内容,this.html里才是html代码 好了,这下就可以使用了 然后前端展示的代码格式可以根据之前的 => 代码块高亮 也可以使用下面的方式,是我的网友凡蜕博客推荐的prism.js...使用方法参照如何在vue中引入Prism.js 今天就分享这些,欢迎大家留言交流

    47310

    7大笔记应用,让你的代码效率翻7倍

    你可以直接在普通笔记中嵌入代码块,也创建单独的代码片段型注释,用于在一个注释中收集和分组多个代码块。它还支持TO-DO LIST来帮助你进行任务管理,和番茄钟混用岂不是美滋滋?...MedleyText (适用OS: Windows, Mac, Linux) MedleyText与Boostnote非常相似,功能较少,但对每项功能都挖得比较深:富文本格式,笔记中可嵌入代码块以及可自定义的键盘快捷键...Quiver (适用OS: Mac) Quiver是另一个类似上面两个的应用程序:使用者可以针对嵌入代码进行混合和匹配文本(Markdown和LaTeX格式)功能。...是的,这是一个文本编辑器,而不是一个笔记应用程序,但它当然也可以用于记笔记:每个笔记作为一个文本文件,每个代码片段在一个单独的语言文件中。...成为更好的程序员的额外秘诀: 如果这些你都不喜欢,还是可以在代码中以粘贴注释的方式记笔记。这不是管理抽象级项目的最佳方法,因为这需要清晰的编码习惯,但这样作却是针对某些低阶字段注释的好方式。

    1.2K20

    你用什么软件做笔记?

    你可以直接在普通笔记中嵌入代码块,也创建单独的代码片段型注释,用于在一个注释中收集和分组多个代码块。它还支持TO-DO LIST来帮助你进行任务管理,和番茄钟混用岂不是美滋滋?...MedleyText (适用OS: Windows, Mac, Linux) MedleyText与Boostnote非常相似,功能较少,但对每项功能都挖得比较深:富文本格式,笔记中可嵌入代码块以及可自定义的键盘快捷键...Quiver (适用OS: Mac) Quiver是另一个类似上面两个的应用程序:使用者可以针对嵌入代码进行混合和匹配文本(Markdown和LaTeX格式)功能。...是的,这是一个文本编辑器,而不是一个笔记应用程序,但它当然也可以用于记笔记:每个笔记作为一个文本文件,每个代码片段在一个单独的语言文件中。...成为更好的程序员的额外秘诀 如果这些你都不喜欢,还是可以在代码中以粘贴注释的方式记笔记。这不是管理抽象级项目的最佳方法,因为这需要清晰的编码习惯,但这样作却是针对某些低阶字段注释的好方式。

    2.8K10
    领券