1. 首页
  2. css

CSS可能是运行SSG最简单的方法

\”静态站点生成器\”,也就是说。我们马上就到。

Netlify是这个网站的赞助商(非常感谢),我看到Zach Leatherman现在已经去那里工作了。很酷。扎克是Eleventy的创建者,Eleventy是Node的SSG。Eleventy最值得注意的一点是,如果你不想安装,你甚至不需要安装它。让我来做个准备。

假设你有一个三页的网站,你想要获得SSG的原因之一是你想在所有三页上重复导航。一个\”HTML包含\”,在web开发中最古老的需求之一,在那里!过去我们已经讨论了很多方法。所以我们有…

/my_project- index.html- about.html- contact.html

,每个HTML文件都需要这个重复的导航块。

<!DOCTYPE html><html>

Well why don\"t we chuck that block of navigation into a file, so…

/my_project- /_includes- nav.html- index.html- about.html- contact.html

,它类似于…

<nav><a>

So how do we actually do the include? This is where Eleventy comes in. Eleventy supports a bunch of templating languages, but the default one is Liquid. Liquid supports file includes! Like this…

{% include ./nav.html %}

,所以这是我在三个HTML文件中的每一行。那我怎么处理呢?现在不是我必须安装Eleventy的时候吗?不,我可以在命令行上运行一个命令来实现这一点(假设我安装了npm):

npx @11ty/eleventy

这里有一个30秒的视频显示它的工作原理:

没有package.json。没有npm install。在某种意义上,这是一个零依赖的方式来处理一个静态站点,我认为这是非常酷的。默认情况下,Eleventy会将其全部处理到一个_site文件夹中。

假设我要部署这个静态站点…在Netlify端,我可以告诉它我要部署的是_site文件夹。我也不需要提交它(你也不应该提交),所以我可以把它放在一个.gitignore文件中。Netlify可以用同样的命令构建它。

如果文件比站点本身更易于管理,我可以将这些设置放入文件中。以下是进入netlify.yml文件的内容:

build:command: \"npx @11ty/eleventy\"publish: _site

本文的重点是看看这有多酷,你甚至不需要安装任何东西就可以运行SSG!这涉及到速度的权衡。在本地和运行您的构建的云计算机上安装软件包会更快。当我在做这个婴儿演示的时候,我想要一点leventy的配置,因为我想把我的CSS文件放到处理过的站点上,所以……仅此而已

CSS可能是运行SSG最简单的方法 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%8f%af%e8%83%bd%e6%98%af%e8%bf%90%e8%a1%8cssg%e6%9c%80%e7%ae%80%e5%8d%95%e7%9a%84%e6%96%b9%e6%b3%95/

发表评论

您的电子邮箱地址不会被公开。