文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Eleventy配置和Collection快速上手

上周，我们设置了一个静态站点生成器 Eleventy，并对其进行了一些基本操作。我使用 Warp 命令终端和 Zed 编辑器来创建了一个以猫为主题的索引页面。...我们的主线是，我们希望用 Markdown 写内容，并让 Eleventy 来生成网站。在维护网站时，我们不想处理 HTML。...这应该能让你对发生的小问题有所了解，以及在解决问题时应坚持的地方。但你会注意到，Eleventy 相当宽容和透明——使错误比较容易修复。 好的，所以我们需要从首页链接到我们的猫咪。...然后我们可以循环遍历我们的猫咪，并制作某种形式的索引: .....现在我们可以看到，Eleventy通过data方法为每个猫咪的前言提供了Liquid访问权限。除此之外，我只是做了一个假设文件名与标题相同的链接。(我们可以改进这个)。

11310
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    你的博客用不着什么JavaScript框架

    当我第一次听说我可以编写 React 并使用这个很酷的 GraphQL 新玩意儿，同时还能输出不需要 JavaScript 的静态页面时，我很想尝试它一下。...我们已经看到，单页应用程序在导航方面存在固有的可访问性问题，但要注意的是，使用前端框架也会在其他方面带来可访问性问题。...那么如何在构建 Gatsby 网站时避免那些因为大量使用 JS 而带来的固有问题呢？当然，我们应该尽量删掉那些 JavaScript。...这个插件可以在构建时获取并渲染推文，这样只需少量 HTML 和 CSS 即可，根本不需要额外的 JavaScript。 与其他新技术一样，Eleventy 缺少某些更加成熟的工具所提供的功能。...我使用了 loading="lazy"属性来延迟加载图片，但它的浏览器支持不够完整，并且在原生浏览器实现改进之前，它无法在加载图片时淡入淡出。

    4.1K10

    开垦属于你的网络空间：简单易用的静态博客框架推荐

    高度可定制化：使用 Jekyll，您可以根据自己的需求轻松地创建个人、项目或组织网站，并对其进行完全控制。...内置插件和变量功能：内置 Liquid 扩展，自定义 Permalinks 等特性使得在建立并管理页面时更加简便。...使用 JavaScript 编写，可以将包含不同类型模板的目录转换为 HTML。...以下是 eleventy 项目的核心优势和关键特性： 简洁易用：eleventy 提供了直观且友好的界面，使得用户能够轻松地创建自己想要展示在网页上的内容。...特性： Aurora具有良好的扩展性，在保证稳定运行情况下可以根据业务需求灵活添加新功能； 通过权限控制机制确保安全访问； 友好简洁界面设计及响应式布局适配各类设备屏幕大小； 集成CDN加速以提高网站加载速度

    49540

    Islands Architecture 孤岛（岛屿）架构

    这主要通过对关键组件进行部分重新激活或在组件渲染时进行流式传输来实现。然而，以上技术最终传输的 JavaScript 净量保持不变。...Eleventy + Preact：Markus Oberlehner 演示了 Eleventy 的使用，Eleventy 是一种静态站点生成器，具有可以部分水合的同构 Preact 组件。...交互式组件使用 WithHydration 包装器，以便在客户端上冻结它们。请注意，Marko 和 Eleventy 早于 Jason 提供的 Islands 定义，但包含支持它所需的一些功能。...在下一节中，我们将演示如何使用 Astro 作为前面讨论的简单博客页面示例。示例实现以下是我们使用 Astro 实现的示例博客页面。...在使用关键内容逐渐可用后，通常需要交互性的辅助功能。可访问性：使用标准静态 HTML 链接访问其他页面有助于提高网站的可访问性。基于组件：该架构提供了基于组件的架构的所有优点，例如可重用性和可维护性。

    24210

    JavaScript 框架太多了？相反，是太少了

    但这些都属于变通手段，而且这些框架的静态构建其实无法使用服务器端渲染功能（至少截至撰稿时还不行），所以并不符合我的要求。...这就形成了有趣的历史循环。...也就是说，我们做出的技术选择（包括使用哪种 JavaScript）不仅仅取决于产品的功能需求，更会受到用户使用方式的巨大影响。 因此，大家在选择技术时一定要先提出有意义的问题。...这也反过来给了我们信心：如果我们正在构建某些产品，并发现其中的问题无法通过现有技术直接解决，那就果断构建出新的 JavaScript 框架。当下不存在完美的解决方案，往往意味着永远都不会存在。...点击底部阅读原文访问 InfoQ 官网，获取更多精彩内容！ 今日好文推荐 马斯克被Twitter脆弱的代码“逼疯”，要求全部重写！网友：重构是空降领导了解当前系统最快的方式？

    2.6K30

    第6章 | 表达式 | 优先级，块与分号，生命，if match

    但是嵌套的 fn 无法访问恰好在同一作用域内的局部变量或参数。例如，函数 cmp_by_timestamp_then_name 不能直接使用 v。（封闭块与闭包不同。...编译器可以使用跳转表来优化这种 match，就像 C++ 中的 switch 语句一样。当 match 的每个分支都生成一个常量值时，也会应用与 C++ 类似的优化。...在这种情况下，编译器会构建出这些值的数组，并将各个 match 项编译为数组访问。除了边界检查，编译后的代码中根本不存在任何分支。...在每次循环迭代开始时，expr 的值要么匹配给定的 pattern，这时会运行循环体（block）；要么不匹配，这时会退出循环。 可以用 loop 来编写无限循环。...("{} error(s)", strings.len()); // 错误：使用了已移动出去的值 这可能很不方便。简单的补救措施是在循环中访问此集合的引用。

    13410

    【学习图片】14.网站生成器、框架和内容管理系统

    静态站点生成器 与任务运行器相比，静态网站生成器（如Jekyll或Eleventy）处理图像的方式有一些相似之处。...Eleventy的官方图像插件使用Sharp来提供调整大小、生成多种源尺寸、重新编码和压缩，就像你在这里学到的一些任务。...attribute." loading="lazy" src="/img/butterfly-400.jpeg" width="1000" height="846"> 当然，这个插件无法生成一个可行的尺寸属性...，因为它无法知道图片在渲染的布局中的最终尺寸和位置，但它在生成你的标记时确实接受一个输入--这是RespImageLint的另一项工作。...当通过WordPress管理界面上传图像时，该源图像被用来在服务器上生成面向用户的文件，就像在你的本地机器上一样。

    91320

    博客生成静态站点工具 Top 20

    .Hugo 3.Gatsby 4.Jekyll 5.Nuxt 6.Docusaurus 7.Hexo 8.GitBook CLI 9.Docsify 10.VuePress 11.Mkdocs 12.Eleventy...使用 MkDocs，您可以快速创建漂亮的文档页面，非常适合技术写作、软件文档、项目文档等。 你可以查看它的 GitHub和官网了解更多。 12.Eleventy star 数 13K+。...Eleventy 自称是 Jekyll 的替代品，旨在以更简单的方法来制作更快的静态网站。 你可以参照它的 GitHub和官网来了解更多的细节。 13.Pelican star 数 10K+。...快速响应：由于生成的是静态网站，所以Publii生成的网站响应速度非常快，用户可以快速加载和访问博客网站。...此外，这些工具也有很好的文档和社区支持，使得学习和使用它们变得更加容易。 不同的工具都有各自的优缺点，适用于不同的需求和技能水平，因此在选择时需要根据自己的情况进行考虑。

    3.9K21

    2024年Web开发趋势：回归简洁

    像Astro和Eleventy这样的更简单的选项在2024年变得越来越流行，导致一些人（好吧，至少是我）认为我们正在接近后React时代。...他指出，当混合架构开始渗透到Jamstack时，这一点变得显而易见——当存在客户端和服务器端编程的混合时。 谈到了“走向简洁的两条路径”。...但是对于大多数网站或Web应用程序来说，一个SSG——例如Eleventy或Nue——已经足够了。 还值得一提的是Vue作为另一个不错的选择。...当WordPress的共同创建者Matt Mullenweg和WordPress供应商WP Engine发生法律纠纷时，这促使许多运营商寻找WordPress的替代方案。...“你必须提供超越ChatGPT所能提供的价值，这样人们仍然有动力访问你的网站，”他在二月份说道。“那么你该如何做到呢？

    13810

    【Java】已解决java.lang.ArrayIndexOutOfBoundsException异常

    这种情况通常发生在数组越界访问时，即试图访问的索引值小于 0 或大于或等于数组的实际长度。 这种异常经常出现在循环迭代、数组操作或者与数组相关的算法中，尤其是当没有正确检查数组边界时。...二、可能出错的原因 循环条件设置错误，导致索引超出数组界限。 硬编码的索引值错误，比如数组长度只有 5，但代码中使用了索引 5 或更高。...array[i]); // 当 i = 5 时，这里会抛出异常 } 在上面的代码中，由于循环条件 i 时，它会尝试访问 array[5]，而这是不存在的...五、注意事项 在编写与数组相关的代码时，应注意以下几点： 检查数组长度：在访问数组元素之前，始终检查数组的长度和索引值。 避免硬编码索引：尽量不要使用硬编码的索引值，而是使用变量或表达式来计算索引。...注意循环条件：确保循环条件不会导致索引越界。 异常处理：如果无法完全避免数组越界的情况，考虑使用 try-catch 块来捕获并处理 ArrayIndexOutOfBoundsException。

    3.8K30

    打爆React泡沫，重新审视前端技术选择

    它们的最大用途，就是在不想用框架这类笨重技术时顶上。 最后，我还忽略了其他一些优秀的相关工具。...比如说 Eleventy，其实它更像一种纯粹的静态站点生成器，而不能称为真正的框架（但如果你正好在用 Gatsby，那 Eleventy 确实要更胜一筹）。...但 Vue 使用的是更接近默认 HTML，而非 JSX 的模板语言，这使得在模板文件中编写条件与循环变得更轻松，不必借助 map 和三元组等变通方法。...SolidStart 未来也有可能取代 Next，但截至本文撰稿时，它仍处于 beta 测试阶段。...但准确来说，它的处理方式并不能真正称为“水合”；相反，它是把 JavaScript 序列化到 DOM 当中，并在需要时做最小加载。

    35630

    程序崩溃与优化

    内存溢出是指程序试图访问已分配内存之外的内存位置。示例中，使用malloc分配了一个包含100个整数的数组，随后尝试访问该数组的第101个元素，这超出了数组的边界。...在示例中，我们使用while(1)创建了一个无限循环，因为条件1始终为真。这将导致程序一直运行下去，直到它被手动终止或操作系统干预。...无限循环 while (1) { // 这是一个无限循环，可能导致程序无法正常退出 } return 0; } 文件或资源访问问题： 文件或资源访问问题包括尝试访问不存在的文件...无限循环 while (1) { // 这是一个无限循环，可能导致程序无法正常退出 } // 4....程序优化 使用合适的数据结构和算法：选择合适的数据结构和算法可以提高程序的性能和稳定性。 内存管理：使用智能指针和RAII技术，以确保资源（如内存）在不再需要时得到正确释放。

    15410

    JavaScript中的forEach，你踩过哪些坑？请避开这些常见误区

    3、无法中断或跳过forEach循环 除了无法处理异步函数和捕获错误之外，forEach还有一个限制：它不支持使用break或continue语句来中断或跳过循环。...4、无法删除自身元素并重置索引 在forEach中，我们无法控制索引的值，它只是盲目地递增直到超过数组的长度并退出循环。因此，删除自身元素以重置索引也是不可能的。...虽然我们尝试在循环内部递增 index，但这并不会影响forEach的内部机制。forEach中的索引是自动管理的，并且在每次迭代时都会自动递增。 为什么无法删除元素并重置索引？...因此，无法访问obj对象的属性。 使用bind方法解决 为了解决这个问题，我们可以使用bind方法来绑定函数的作用域，将其绑定到obj对象。...比如，当你需要精确控制循环流程、处理异步操作或是修改原数组时，for循环往往能提供更高的灵活性和性能。 你是否在项目中遇到过使用forEach时的“坑”？

    20410

    不可不知的Java SE技巧：如何使用for each循环遍历数组

    源代码解析  下面通过一个代码示例来展示如何使用for each循环遍历数组。...然后，使用for each循环遍历整个数组，并打印每个元素的值。...for each循环的缺点包括：无法访问元素的下标、无法修改数组中的元素。  因此，在需要修改数组元素或访问元素下标时，应该使用传统的for循环。...for each循环适用于需要遍历整个数组并对每个元素执行相同操作的场景。它的优点包括代码简洁易读、遍历数组速度快、易于避免数组越界错误。它的缺点包括无法访问元素的下标、无法修改数组中的元素。...在需要修改数组元素或访问元素下标时，应该使用传统的for循环。总结  本文介绍了如何使用for each循环遍历数组。

    29921

    Java中如何优雅地删除List中的元素

    ，无法将访问逻辑从集合类和遍历方法中分离出来。.../** * 通过简单的遍历方式，在遍历的过程中有可能会漏掉元素 * 取第二个元素i=1时，满足条件被删掉，原有的数组的第三个元素，变成了新数组的第二个元素 * i++后i=2,但i=2指向的是新数组中的第三个元素...，删除后不退出 使用增强for循环是，如果删除后继续向下循环则会报java.util.ConcurrentModificationException /** * 使用增强for循环是，如果删除后继续向下循环则会报...我们使用逆向遍历的方式可以得到正确的结果 /** * 逆向循环，是正确的 * 1-->2-->3-->4 * 逆向循环时，倒数第一个元素满足条件被删除时，i--后,原数组的倒数第二个变成了新数组的倒数第一个元素...* 同理倒数第二个元素满足条件被删除时，i--后,原数组的倒数第三个变成了新数组的倒数第二个元素 * i= size-3指向新数组的倒数第二个元素，也没有漏掉 * * @param list *

    3K10

    【C++】探索C++11中的范围for循环与auto关键字

    for (int e : arr)： e是一个局部变量，每次循环依次从数组arr中提取当前元素的值。 循环体中访问e不会改变数组本身。...循环默认对元素进行只读访问。...代码灵活性更高：如果数组元素的类型发生变化，使用auto的代码可以无需修改仍然保持有效。 3. auto的注意事项 必须初始化：auto关键字无法单独声明变量，必须通过初始化让编译器推导类型。...auto x; // 错误：未初始化，无法推导类型 不要滥用： 虽然auto可以简化代码，但过度使用可能降低代码可读性。...在学习和使用这些特性时，理解其设计初衷和使用场景是关键。在适当的场景下灵活应用这些工具，将让你的代码更加简洁、高效、现代化。

    7410

    c# 中for和foreach循环的区别

    控制变量也可省略，省略时将进行无限循环，一般搭配break使用。但控制条件只能有一个。 　　increment为增量，每次循环结束都执行一次，然后再进行判断，可以省略，也可以多个。...二、foreach也称为只读循环,所以在循环数组/集合的时候,无法对数组/集合进行修改。...循环和foreach循环： 1.foreach循环的优势 　　　　（1）foreach语句简洁 　　　　（2）效率比for要高(C#是强类型检查,for循环对于数组访问的时候,要对索引的有效值进行检查...（6）当集合元素如List等在使用foreach进行循环时,每循环完一个元素,就会释放对应的资源,代码如下: using (IEnumerator enumerator = collection.GetEnumerator...　　　　（1）上面说了foreach循环的时候会释放使用完的资源,所以会造成额外的gc开销,所以使用的时候,请酌情考虑 　　　　（2）foreach也称为只读循环,所以再循环数组/集合的时候,无法对数组

    4.9K41

    js forEach和 map 区别

    如果已访问的元素在迭代时被删除了（例如使用 shift()），之后的元素将被跳过 forEach() 为每个数组元素执行一次 callbackFn 函数；与 map() 或者 reduce() 不同的是...不对未初始化的值进行任何操作（稀疏数组） 不可以阻止循环，只能用 new Error 来抛出循环 原数组如果全是基本数据类型，不会改变原数组，如果是引用数据类型，会改变原数组 Array.prototype.map...如果有以下情形，则不该使用 map： 你不打算使用返回的新数组；或 你没有从回调函数中返回值。...调用 map 方法之后追加的数组元素不会被 callbackFn 访问。如果存在的数组元素改变了，那么传给 callbackFn 的值是 map 访问该元素时的值。...在 map 函数调用后但在访问该元素前，该元素被删除的话，则无法被访问到。 根据规范中定义的算法，如果被 map 调用的数组是离散的，新数组将也是离散的保持相同的索引为空。

    4.6K30
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券