使用 VuePress 和 Tailwind.css 构建漂亮的网站

2025-05-28

使用 VuePress 和 Tailwind.css 构建漂亮的网站

最近我一直在做网站。这很了不起吧？作为一名 Web 开发者，这算是我的专长。但对我来说，这算是方向的转变。过去几年我主要在开发移动应用，Web 开发工作只是事后才考虑的，因为我快速搭建了一些营销网站来配合我的移动应用（比如这个为我的Snappy Squirrel应用搭建的超级基础的 Wordpress 网站，以及这个为Practice Buddy搭建的非常老的应用网站）。显然，由于那些快速粗糙的 Web 开发实验的遗留物在我的应用代码库和互联网上随处可见，现在是时候提升自己，创建可维护、可持续的网站了。

以前，Wordpress 是我们这类网站的救星。它既能扩展小型营销网站，也能适应大型博客。但我更喜欢轻量级的、用我日常使用的语言（例如，不是 Php）编写的，这样更容易定制。所以这些年来，我尝试了各种静态网站生成器，包括最近为我自己的博客设计的 Hexo。可惜的是，jenlooper.com 的更新相当麻烦，而且基于现成的 Hexo 主题，设计得相当笨重。在我看来，它仍然很像“Wordpress”，而且它的设计在帮助好奇的用户找到我想要展示的内容方面做得并不好。

当前网站

那么，作为一名 Vue.js 开发者，思考一下，如何才能最高效地快速搭建并运行一个网站？我立刻想到了 VuePress。虽然 VuePress 主要用作静态网站生成工具来创建美观的文档（例如VuePress 自己的网站），但如果我们用它来搭建技术博客、应用营销网站或任何其他需要快速搭建并运行的实用网站，会怎么样呢？

使用 Vuepress 启动并运行

安装 VuePress（全局或本地，根据文档说明）后，你可以添加一些文件，然后，瞧，你就有了自己的博客或文档，只需在文件夹中添加一个 README.md 文件，然后vuepress dev在根目录下输入即可。再添加几个文件，你就会得到一些看起来很不错的东西：

使用 VuePress 启动并运行

我创建了一个非常简单的 Vuepress 网站，如上所示，总共有两个文件夹和三个文件：

有史以来最简单的网站

这个极其简单的 VuePress 网站可在此处访问：安装 VuePress，cd 到此 repo，然后输入vuepress dev。

VuePress 唯一的问题是，与 Wordpress 类似，用这些工具生成的网站往往看起来千篇一律：就像我喜欢说的“VuePress 式”一样。如果我们能利用 VuePress 强大的静态网站生成功能，并自定义网站样式，让它看起来完全个性化，那会怎样？ Tailwind.css应运而生，它凭借其不带任何评判性的样式，深受 Web 开发者的喜爱。

为什么选择 Tailwind？

Tailwind是一款与众不同的 CSS 框架，它自称是“一个以实用为先的 CSS 框架，用于快速构建自定义用户界面”。与 Vuetify、Bootstrap、Bulma 或市面上其他主流样式框架不同，Tailwind 并非像 UI Kit 那样向你的网站添加组件。它没有固定的风格，也没有默认主题或内置组件。如果你想完全掌控网站的外观，同时又不想手动编写所有 CSS 代码，那么 Tailwind 或许是你的不二之选。

NativeScript-Vue.org - 一个 Tailwind 风格的网站

额外福利：Tailwind.css 也适用于移动设备，可以与 NativeScript-Vue 移动应用配合使用。敬请期待后续教程。

让我们从创建一个 VuePress 样板网站开始这个项目。你可以使用我上面创建的示例作为模板。

安装 Tailwind.css

现在，是时候安装 Tailwind.css了。由于 Tailwind 需要作为 npm 包安装，因此我们需要在根目录中创建一个 package.json 文件。在项目的根文件夹中创建一个，并添加以下元素，并进行编辑以个性化项目：

{
    "name": "MyBlog",
    "version": "1.0.0",
    "description": "A new Blog",
    "repository": {
        "type": "git",
        "url": "git+https://github.com/your-github-handle/blog.git"
    },
    "keywords": [
        "keywords"
    ],
    "author": "your-name",
    "license": "MIT",
    "bugs": {
        "url": "https://github.com/your-github-handle/blog/issues"
    },
    "homepage": "https://github.com/your-github-handle/blog/#readme",
    "devDependencies": {
        "tailwindcss": "^0.7.3",
        "autoprefixer": "^9.4.2",
        "postcss-import": "^12.0.1",
        "postcss-loader": "^3.0.0"
    }
}
Enter fullscreen mode Exit fullscreen mode

Yarn install或者npm install说是包。这是怎么回事？我们添加了 Tailwind 包，以及自动前缀器、postcss-import 和 postcss-loader，因为这些包是 VuePress 使用 Tailwind CSS 所必需的。

下一步是创建 Tailwind 配置文件。在根文件夹中输入 即可./node_modules/.bin/tailwind init tailwind.js。我们来看看这个命令生成的文件。我们马上就会注意到它很长，超过 900 行。其中包含 Tailwind 自带的设置，例如默认颜色。你会发现诸如 之类的内容'red': '#e3342f'。你可以在 CSS 中使用这些预设来快速设置元素的样式：<p class="text-red">。由于这个文件太长，你可能需要删除其中的部分内容以使其更轻量；根据你的喜好自定义此文件。例如，你可以在没有注释的情况下安装它，这样可以缩短它的长度。

提示：请按照以下说明使用 PurgeCSS 压缩文件。感谢@ohffs提供的提示！

接下来，我们需要让这些样式能够被你的网站所使用。我们将在 VuePress 环境中使用这个文件，所以让我们先设置一下 VuePress 的自定义主题。

创建自定义 Vuepress 主题

VuePress 自带默认外观，我们知道我们需要覆盖它，所以必须在 中创建一个新文件夹，并创建一个名为 的文件.vuepress。在该文件夹中添加一个名为 的文件夹，并在其中添加一个文件。现在，您的文件夹结构如下所示：themeLayout.vuestylestheme.styl

稍微复杂一点

为什么要通过 theme.styl 文件使用 Stylus？你不一定要使用 Stylus，但 VuePress 文档里用到了它，所以我就继续用这个模式。

编辑 Vuepress 以支持 Tailwind

现在，你需要让 Tailwind 兼容 VuePress。为了让它们完美兼容，需要做一些事情。

首先，在 中.vuepress/config.js编辑代码，使用 postcss 导入 tailwindcss 插件和配置文件。整个 config.js 文件现在如下所示：

module.exports = {
    postcss: {
      plugins: [require('tailwindcss')('./tailwind.js'), require('autoprefixer')],
    },
    title: 'Hello VuePress',
    description: 'Just playing around'
  }
Enter fullscreen mode Exit fullscreen mode

接下来，编辑.vuepress/theme/styles/theme.styl并导入 Tailwind 预检和实用程序类。将以下两行添加到 .styl 文件：

@tailwind preflight;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

最后，进行编辑.vuepress/theme/Layout.vue以便新的布局文件能够采用新的样式：

<template>
<div>
    <p class="text-red">hi</p>
</div>
</template>
<style lang="stylus">
    @import './styles/theme.styl';
</style>
Enter fullscreen mode Exit fullscreen mode

重启你的开发服务器（Ctrl-C 停止，然后vuepress dev重启）看看效果。虽然不太美观，但你可以看到一种之前没有的独特风格：红色的文本。

通过稍微操作一下这个文件，了解一下 Tailwind 如何设置你的标记样式。如果你稍微编辑一下标记：

<div class="rounded shadow-lg w-1/2 m-10 p-5 bg-green">
    <p class="text-red text-lg text-center font-sans">I'm a red text!</p>
</div>
Enter fullscreen mode Exit fullscreen mode

您可以看到彩色卡片已添加到您的网页：

一张卡片

您补充道：

  • 具有多个类的容器 div，产生一个圆角框（rounded）
  • 带有较大的阴影（shadow-lg），
  • 宽度设置为视口的一半（w-1/2），
  • 四周留有 2.5rem 的边距（m-10）并且
  • 四周填充 1.25rem ( p-5)，
  • 以绿色背景结束（bg-green）。

在里面，您将文本样式设置为：

  • 红色（text-red），
  • 大号（text-lg），
  • 居中 ( text-center)，
  • 使用无衬线字体（font-sans）。

了解 Tailwind 的工作原理了吗？它让你可以很好地控制外观和感觉，同时提供合理的默认设置。

您可以在此处查看该网站的此版本。

在 Tailwind 环境中充分利用 VuePress

现在你已经可以很好地控制样式了，接下来需要开始进行一些架构方面的决策。你的网站有多少内容是 .vue 文件（包含纯 HTML 标记和硬编码文本），又有多少内容是 VuePress 友好的 Markdown？这两种架构通常看起来是对立的，因为通过 HTML 标签设置 Markdown 的样式似乎是一种反模式。我发现将 Tailwind 风格的 .vue 文件视为 VuePress Markdown 的容器或外壳会有所帮助。如果你能坚持将所有文本都保留为 Markdown，那么维护你的博客将会更容易，尤其是在你决定本地化内容的情况下。

在开发我的新网站版本时，我不得不不断做出这样的决定。考虑到我们的目标是将文本保留在 Markdown 中，将 HTML 保留在 .vue 文件中，让我们进一步改进我们的自定义网站主题。

接下来关于整合这两个资源的几个技巧，我将结合我重写 NativeScript-Vue.org 的经验。我还将重建 jenlooper.com，使其看起来像这样：

主页

内页

挑战：使用 VuePress 和 Tailwind 实现多种布局

一旦你完成了一个非常简单的 VuePress 网站（包含几条路由和一个基本主题布局）的创建，你就能快速掌握如何充分利用 VuePress 和 Tailwind 的优势，而不会完全迷失方向。让我们来学习如何创建一个完全自定义外观的网站，其中包含两种不同的布局，也就是我的网站，目前正在重建中。你可以在这里继续学习这个项目。

这个个人网站的目的是展示我的项目，并为我的文章提供一个空间。我的文章散落在几个网站（Telerik 开发者网络、NativeScript 博客、Progress 博客和 Dev.to）。初始页面将展示项目卡片，内部页面将提供链接和其他各种信息页面的区域。组件可以分为至少两种布局——HomeLayout 和 BlogLayout。此外，还有一些嵌套的组件，即卡片组件、导航和页脚。这些组件非常标准：HomeLayout 包含卡片，而 BlogLayout 不包含。这里的挑战在于如何让 Markdown 填充网站的所有区域，以保持文本和 HTML 标记之间重要的分离。

首先需要在.vuepress/theme:components和 中创建两个新文件夹layouts。将所有新组件创建为 .vue 文件并放入 components 文件夹中，并在 layouts 文件夹中执行相同操作。我的.vuepress文件夹结构现在如下所示：

文件夹结构

然后，扩展.vuepress/theme/Layout.vue以支持多种布局。关键在于<Content/>从强制的 Layout.vue 文件中移除标签，并使用更智能的组件标签，该标签会根据 Markdown Frontmatter 中指定的布局进行更改。<template>这样，Layout.vue 文件中的代码块将更改为如下所示：

<template>
<div class="wrapper">  
    <div class="markdown-body m-10 rounded"> 
        <Nav/>            
        <component :is="layout"></component>
        <Footer/>  
    </div> 
</div>
</template>
Enter fullscreen mode Exit fullscreen mode

然后，添加一个<script>代码块来导入自定义组件和新的布局文件。我的网站是这样的：

<script>
import Nav from './components/Nav.vue';
import Footer from './components/Footer.vue';
import HomeLayout from './layouts/HomeLayout.vue';
import BlogLayout from './layouts/BlogLayout.vue';
export default {
    components: { Nav, Footer, HomeLayout, BlogLayout },
    computed: {
        layout() {
        return this.$page.frontmatter.layout || 'HomeLayout'
        }
  },
}
</script>
Enter fullscreen mode Exit fullscreen mode

计算属性layout()会检查指定页面的 frontmatter 是否符合其指定的布局，并相应地进行赋值。现在，您可以开始以更精细的方式自定义布局。

由于我们绕过了 VuePress 通过 frontmatter 创建布局的标准方式，因此必须为页面上的每个元素指定 Tailwind 样式。这是避免样板代码的代价，但绝对值得！

构建你的布局

让我们看一下我将用于大多数内部页面的布局。我网站中的 BlogLayout.vue 页面现在包含<Content/>VuePress 所需的用于显示 Markdown 的标签。例如，在这个页面中，我添加了一些样式来包围生成的 Markdown：

    <template>
        <div class="blog-body bg-white rounded m-10 text-blue-darkest">
            <div class="p-10"> 
                <h1 class="pb-5 text-blue-darkest">{{$page.frontmatter.title}}</h1>
                <Content/>
            </div>
        </div>
    </template>
    <script>
    export default {
        name: 'BlogLayout'
    }
    </script>
Enter fullscreen mode Exit fullscreen mode

然后，VuePress 可以找到指定路由的 Markdown 文件——默认情况下，它们会以文件夹和 README.md 文件的形式呈现。例如，我的“关于”页面使用 BlogLayout 文件进行显示。README.md 文件/about只包含一些前置内容和一些文本：

---
title: About Me
layout: BlogLayout
---    
Welcome! I'm a Google Developer Expert for Web Technologies and a Senior             Developer Advocate at Progress with over 15 years' experience as a web and mobile developer, specializing in creating cross-platform mobile apps. I'm a multilingual multiculturalist with a passion for hardware hacking, mobile apps, Vue.js, machine learning and discovering new things every day. I'm also the founder and CEO of Vue Vixens, an initiative promoting diversity in the Vue.js community. Contact me here or on Twitter @jenlooper.

Our Privacy Policy can be found [here](/privacy-policy)

Looking to contact me? Email me at jen @ ladeezfirstmedia.com. My resume can be found [here](https://standardresume.co/JenLooper).
Enter fullscreen mode Exit fullscreen mode

<p>VuePress 负责网站布局，Tailwind 负责其样式设置。但是，如果您对VuePress 生成的标签不满意，想为其指定样式，该怎么办？

你可以在 Markdown 中添加 HTML 标签，但请记住，我们尽量避免这样做。相反，请保留 Markdown 本身，并使用 Tailwind 的@apply指令，通过向文件中添加以下代码片段，将 Tailwind 样式赋值给生成的 HTML theme.styl：

    @css {
        .blog-body p {
            @apply .pb-5;
        }
    }
Enter fullscreen mode Exit fullscreen mode

请注意，通常您可以@apply在没有标记的情况下添加 CSS 类，@css但 Stylus 文件似乎存在问题，因此@apply并不总是使用。

示例 1：关于

另一个在 Frontmatter 和 HTML 之间取得良好平衡的例子是我在 中构建的卡片界面.vuepress/theme/components/Cards.vue。由于这些卡片显示在主页上，因此我使用了源自根 README.md 文件的内容。Frontmatter 非常灵活，因此我在 README 中创建了一个包含卡片内容的新数组：

   cards: [
        {'title': 'Vue Vixens', 'image': 'vuevixens_logo.png', 'blurb': 'Vue Vixens offers free workshops and meetups for foxy people who identify as women. Join us at a local skulk or in a tech conference!','link':'https://www.vuevixens.org'},
        {'title': 'Elocute', 'image': 'elocute_logo.png', 'blurb': 'Elocute is a mobile and web app designed to replace the language lab. Students and teachers of second languages, rejoice!','link':'http://www.elocute.me'},
       ...
    ]
Enter fullscreen mode Exit fullscreen mode

为了显示此内容，我循环遍历数组Cards.vue，挑选出每个元素并用样式包围它：

    <template>
    <div class="flex flex-wrap pt-5 m-2 justify-center"> 
        <div v-for="item in $page.frontmatter.cards" class="w-1/4 m-2 cursor-pointer bg-white max-w-sm rounded shadow-lg text-center" @click="goToRoute(item.link)">
            <img class="pt-5" :src="'./images/'+item.image+''" :alt="item.title">
            <div class="px-6 py-2">  
                <div class="text-blue-darkest font-bold text-xl mb-2">{{item.title}}</div>
                    <p class="text-blue-darker">
                        {{item.blurb}}
                    </p>
                </div>  
        </div>   
    </div>
    </template>
Enter fullscreen mode Exit fullscreen mode

示例 2：导航

您不限于使用页面级 markdown 内容；对于我的 Nav.vue 导航组件，我转向了config.js包含 Nav 对象的站点级文件，我利用该文件来构建通用导航：

    <span v-for="item in $site.themeConfig.nav" >
        <a :href="item.link" class="block m-4 lg:inline-block lg:mt-0 no-underline text-white hover:text-orange uppercase">
          {{item.text}}
        </a>
    </span>
Enter fullscreen mode Exit fullscreen mode

结论

从现在开始，更新我的网站将成为梦想。再也不用担心可维护性和设计脆弱了！一旦你的布局到位，并确定了 Markdown 文件中的内容，你就拥有了一个非常可靠的架构，可以构建美观、可扩展且易于维护的网站。尽情享受吧，并在下方分享你结合 VuePress 和 Tailwind 的技巧和窍门。

文章来源：https://dev.to/jenlooper/build-a-beautiful-website-with-vuepress-and-tailwindcss--3a03
Devto 翻译
PREV
构建 React 应用程序时不要做的 10 件事
NEXT
适合初学者学习 Web 开发的十大课程