vuepress 添加图片_向VuePress添加身份验证和个性化

最新推荐文章于 2024-09-17 20:00:00 发布

culiu9261

最新推荐文章于 2024-09-17 20:00:00 发布

阅读量2.3k

点赞数

文章标签： java vue python web github ViewUI

原文链接：https://scotch.io/tutorials/add-authentication-and-personalization-to-vuepress

版权

本文档介绍了如何使用VuePress创建静态站点，并通过添加身份验证和个性化设置增强用户体验。内容涵盖VuePress的安装和配置，如何使用Okta进行身份验证，以及如何自定义VuePress主题。此外，还展示了如何在VuePress中自动替换特定值，为读者提供个性化的阅读体验。

摘要由CSDN通过智能技术生成

vuepress 添加图片

There are several advantages to using a static site generator such as VuePress. With VuePress, you can focus on writing content using markdown, and the VuePress application generates static HTML files. VuePress also turns your content into a single-page application (SPA), so transitions between pages seem instant and seamless. The generated static files can be cached and distributed across a content delivery network (CDN) for even more performance. For the reader, VuePress creates a great experience.

使用静态网站生成器（例如VuePress）有几个优点。使用VuePress，您可以专注于使用markdown编写内容，而VuePress应用程序会生成静态HTML文件。 VuePress还可以将您的内容转换为单页应用程序（SPA），因此页面之间的转换似乎是即时且无缝的。生成的静态文件可以缓存并分布在内容分发网络（CDN）上，以提高性能。对于读者而言，VuePress创造了绝佳的体验。

However, a "static" site does not mean you cannot add dynamic touches to your content. In this tutorial, you will learn how to customize VuePress to create a personalized experience based on the person currently viewing the content.

但是，“静态”网站并不意味着您不能为内容添加动态修饰。在本教程中，您将学习如何自定义VuePress以基于当前查看内容的人来创建个性化的体验。

安装VuePress ( Install VuePress )

Note: To complete this tutorial, you must have Node.js version 8 or higher installed, and a good text/code editor such as Visual Studio Code.

注意：要完成本教程，您必须安装Node.js版本8或更高版本，以及良好的文本/代码编辑器，例如Visual Studio Code 。

The first step is to create a new folder on your computer for the VuePress project. Name it anything you like. VuePress is a command-line interface (CLI) application. Therefore, you will need to open your terminal (macOS or Linux) or command prompt (Windows). Change the current directory at your command line (terminal or command prompt) to the folder you created for the project. Next, use npm to initialize this folder.

第一步是在计算机上为VuePress项目创建一个新文件夹。随便命名。 VuePress是一个命令行界面（CLI）应用程序。因此，您将需要打开终端（macOS或Linux）或命令提示符（Windows）。将命令行（终端或命令提示符）中的当前目录更改为为项目创建的文件夹。接下来，使用npm初始化此文件夹。

npm init -y

Now install VuePress using npm.

现在使用npm安装VuePress。

npm install vuepress@0.14

Next, you need to add a couple of commands to the project for running your local VuePress website and building the application. Open your project folder in the code editor of your choice. Edit the package.json file and change the section labeled "scripts" to the following.

接下来，您需要向项目中添加几个命令，以运行您的本地VuePress网站并构建应用程序。在您选择的代码编辑器中打开您的项目文件夹。编辑package.json文件，并将标有"scripts"的部分更改为以下内容。

"scripts": {
     
    "build": "vuepress build .",
    "dev": "vuepress dev ."
  },

Create a new file in the project folder named readme.md. Open this file and add the following markdown content.

在名为readme.md的项目文件夹中创建一个新文件。打开此文件并添加以下markdown内容。

# Hello VuePress

This is going to be awesome!

Now run the following command at the command line.

现在，在命令行中运行以下命令。

npm run dev

Navigate in your browser to http://localhost:8080. You should see something like this screenshot.

在浏览器中导航到http://localhost:8080 。您应该看到类似此屏幕截图的内容。

You now have a running VuePress application!

现在，您有一个正在运行的VuePress应用程序！

One of the excellent features of VuePress is it automatically updates your locally-running application with any changes you make. To demonstrate, leave the development server running at the command line. Make a change to readme.md file and save it. When you return to the browser, you should immediately see that change reflected without having to refresh the page!

VuePress的出色功能之一是，它会根据您所做的任何更改自动更新本地运行的应用程序。为了演示，让开发服务器在命令行上运行。更改readme.md文件并保存。当您返回浏览器时，您应该立即看到所做的更改，而无需刷新页面！

配置VuePress ( Configure VuePress )

Much of VuePress is customizable through configuration. In this step, you will configure your VuePress application to add a title and basic navigation.

许多VuePress可通过配置进行自定义。在此步骤中，您将配置VuePress应用程序以添加标题和基本导航。

Create a new folder in the project named .vuepress. Notice the period in front of the text, which is required. In the .vuepress folder, create a new file named config.js.

在名为.vuepress的项目中创建一个新文件夹。请注意文本前面的句点，这是必需的。在.vuepress文件夹中，创建一个名为config.js的新文件。

module.exports = {
     
  title: "My Documentation Site",
  description: "This is going to be awesome!",
  themeConfig: {
     
    nav: [
      {
      text: "Home", link: "/" },
      {
      text: "About", link: "/about/" }
    ]
  }
};