如何使用parwindcss创建博客小部件组件-DEV365 开发者社区

术语“小部件”是指您从博客的侧边栏中添加，排列或删除的任何工具或内容 - 这些是组成侧边栏的块。它在大多数博客和其他类型的网站（例如电子学习平台和电子商务网站）中非常普遍。

在本教程中，我们将构建不同的博客小部件，例如标签，最近的帖子和搜索栏。

不会浪费太多时间，让我们开始。

了解任务

在本届会议中，我们将构建三个不同的通常使用博客小部件。

标签
最近的帖子
搜索

因此，我们将使用html和parwindcss分别构建这些组件。

代码结构

代码的结构将非常简单，让我们直接进入代码

1.标签

<div class="md:row-start-1 tags w-full max-w-2xl h-fit place-self-end">
     <div class="text-3xl font-bold mb-3"><h2>Tags</h2></div>
     <ul class="flex gap-3 flex-wrap [&>*]:bg-white [&>*]:px-3 [&>*]:py-2 [&>*]:rounded-full [&>*:hover]:bg-slate-900 [&>*:hover]:text-white [&>*>a]:flex [&>*>a]:items-center [&>*>a]:gap-2">
         <li><a href="">
             <h2>Blender</h2>
             <iconify-icon icon="system-uicons:cross"></iconify-icon>
             </a></li>

          <li><a href="">
              <h2>Browser</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>
              </a></li>

          <li><a href="">
              <h2>Cross-platform</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>    
             </a></li>

          <li><a href="">
              <h2>HoloLens</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>
              </a></li>

           <li><a href="">
              <h2>Microsoft</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>    
              </a></li>

           <li><a href="">
              <h2>Mixed Reality</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>
              </a></li>

           <li><a href="">
               <h2>Modeling</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>
              </a></li>

           <li><a href="">
               <h2>MR</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>
                </a></li>

           <li><a href="">
                <h2>nodejs</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>
                </a></li>

           <li><a href="">
               <h2>streamsocket</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>
                </a></li>

           <li><a href="">
                <h2>unity</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>    
                </a></li>

           <li><a href="">
               <h2>unity3D</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>
                </a></li>

           <li><a href="">
               <h2>unreal engine</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>
                </a></li>

           <li><a href="">
               <h2>VR</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>
                </a></li>

           <li><a href="">
               <h2>websockets</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>
              </a></li>
            </ul>
        </div>

对于标签组件，我们以有序列表的形式完成，其中不同的列表项目是不同的标签。

我们使用partwindcss属性[＆>*]在父容器的级别上应用了一般样式。

属性 [＆>*] 简单地表示 - 单独选择每个孩子，这使我们能够将相同的样式属性应用于所有直接的孩子。

在每个列表项目中，我们给了bg-white的背景色，px-3的填充线，py-2的填充块，我们给了他们每个人一个rounded-full的边界 - 我们也给了他们悬停效果，对悬停的悬停效果，背景色变为bg-slate-900，文本的颜色变为text-white。同样，我们针对列表项中的A标签，并给了他们flex items-center gap-2

的显示。

这是标签的主要样式。

2.端口小部件

最近的帖子小部件非常简单，让我们看看它的外观

<div class="md:row-start-2 recent-posts w-full max-w-xl h-fit">
    <div class="text-3xl font-bold"><h2>Recent posts</h2></div>
       <div class="[&>*:hover]:bg-white [&>*]:px-4 [&>*]:py-4 [&>*]:rounded-xl [&>*]:my-3 [&>*]:mx-3 [&>*]:cursor-pointer">
            <div>Azure Speech Studio for Mixed Reality</div>
            <div>HoloLens 2 Unreal Project Template</div>
            <div>Simplygon in Azure</div>
            <div>Blender in Azure</div>
            <div>AAD Login on HoloLens</div>
       </div>
</div>

此部分样式与我们在标签窗口小部件级别使用的样式没有什么不同。我们使用[＆>*]属性。

在每个帖子中，我们给了一个px-4，填充块py-4，my-3的边缘块的填充线，我们还给了他们每个人一个rounded-xl的边界，我们也给了它们悬停效果，对悬停效果，背景色更改为bg-white

3.搜索栏

<div class=" md:row-start-2 search-bar w-full max-w-xl h-fit">
    <div class="flex items-center gap-5 flex-wrap">
        <div class="flex items-center bg-white rounded-2xl px-2">
            <div class="text-4xl mt-1">
  <iconify-icon icon="material-symbols:search-rounded"></iconify-icon>
            </div>
      <input type="text" placeholder="Search articles topics, etc" class="min-w-0 border-0 focus:border-0 focus:ring-0 focus:ring-offset-0 text-slate-900 sm:mr-20">
         </div>

      <div class="hover:bg-white hover:text-slate-900 text-sm px-4 py-3 rounded-xl border border-slate-900 bg-slate-900 text-white cursor-pointer">
           <h2>Search</h2>
       </div>
   </div>
</div>

我们将在本届会议中处理的最后一个博客小部件组件是Sear bar组件。我们主要有一个图标，一个输入字段和搜索按钮。

造型在这里与我们已经讨论的内容没有什么不同，您绝对可以理解它。

，这在这个教程会话中很漂亮。

结论。

我们刚刚学会了如何创建博客小部件。您有足够的知识来为您的博客创建个人小部件。

您可以在Codepen上进行实时预览，并在GitHub上具有源代码

如果您能够完成本教程，请不要与我分享。

如果您有任何担忧或建议，请不要犹豫！ ð

见ya！ ð