什么是 primer-page-sections
primer-page-sections 是一个基于 primer-css 的 npm 包，旨在为开发者提供一个快速创建 Web 页面的组件库。它专注于提供多种页面 section（区块）组件，使得你可以快速搭建一个美观舒适的页面。
安装
你可以使用 npm 安装 primer-page-sections：
$ npm install primer-page-sections --save
安装后，你需要在需要使用的文件中引入 primer-page-sections 样式，同时也需要引入 primer-css 样式，以便正确应用样式：
<link rel="stylesheet" href="path/to/primer.min.css"> <link rel="stylesheet" href="path/to/primer-page-sections.min.css">
使用
primer-page-sections 提供了多种类型的 section 组件，你可以根据你的需求选择使用。下面我们介绍几个常用的组件：
hero
hero 组件是一个页面的引导组件，通常用作网站的 landing page 等场景。它包含了一个全屏的背景图片或者背景颜色、一个标题和一个描述：
<section class="hero bg-green">
<div class="container">
<h1>欢迎来到 primer-page-sections</h1>
<p>这是一个快速创建 Web 页面的组件库</p>
</div>
</section>feature
feature 组件可以用来展示某些特性或者功能，在页面中起到重要的作用。它包含了一个标题、一个描述和一个图片：
-- -------------------- ---- -------
-------- ----------------
---- ------------------
---- ------------
---- -----------------
---- ----------------------------
---------------
----- -------------------- --------------------
------
---- -----------------
---- ----------------------------
--------------
----------------------- ------------------------------
------
---- -----------------
---- ----------------------------
-------------
----- -------------------- -- ---------- --------------------
------
------
------
----------pricing
pricing 组件用于展示一个产品的定价，通常用于电商网站或者 SaaS 产品中。它包含了一个标题、一个价格和若干个特性或者功能：
-- -------------------- ---- -------
-------- ----------------
---- ------------------
--------------
---- ------------
---- -----------------
---- -------------
-------------
--- ------------------------
----
--------- ---------
----- ----------
-------------
-------- ---------
-----
-- -------- ---------- -------------------
------
------
---- -----------------
---- -------------
-------------
--- -------------------------
----
------- ---------
------ ----------
-------------
-------- ---------
-----
-- -------- ---------- -------------------
------
------
---- -----------------
---- -------------
-------------
--- -------------------------
----
-------- ---------
------ ----------
-------------
-------- ---------
-----
-- -------- ---------- -------------------
------
------
------
------
----------进阶使用
除了上面介绍的基本使用场景之外，你还可以使用 primer-page-sections 实现更复杂的效果。下面我们以一个博客网站的列表页面为例，演示如何使用 primer-page-sections 实现页面效果。
首先，我们需要引入 primer-page-sections 和 Font Awesome 的样式文件：
<link rel="stylesheet" href="path/to/primer.min.css"> <link rel="stylesheet" href="path/to/primer-page-sections.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">
接下来，我们可以使用以下代码构建博客列表页面：
-- -------------------- ---- -------
-------- ----------- -----------
---- ------------------
-------------
------
----------
-------- -------------- ----------
---- ------------------
---- ------------
---- -----------------
---- ------------------
---- ------------------
--------------------
-------------------------------------------------------------
-- -------- ---------- ---------------------
------
---- ------------------
----------------
---------------------------------------------------------
-- -------- ---------- ---------------------
------
---- ------------------
-----------------------
------------------------------------------------------
-- -------- ---------- ---------------------
------
------
------
---- -----------------
---- ----------------
---- ---------------
-----------
----
------ ----------------------
------ ----------------------
------ ----------------------
------ ----------------------
------ ----------------------
-----
------
---- ---------------
-----------
---- -------------
-- ---------------
-- ---------------
-- -----------------
-- -----------------
-- -----------------
-- ---------------
-- -----------------
-- -----------------
-- -----------------
------
------
------
------
------
------
----------在上面的示例中，我们使用了卡片列表来展示博客文章，同时在右侧的边栏中添加了分类和标签模块。
总结
在这篇文章中，我们学习了如何使用 primer-page-sections 快速创建页面组件。无论是单独使用某个组件，还是组合多个组件，我们都能够快速搭建一个美观舒适的页面。希望这篇文章能够帮助你更好地应用 primer-page-sections。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3e74ffdbf7be33b2567177