介绍 侧边栏菜单是一种出现在网页侧面的导航形式。这些菜单提供对网站不同部分的访问，同时不干扰页面上的内容。 按钮经常用于切换侧边栏菜单的打开和关闭。这些按钮往往有一个由三个水平线组成的图标来代表一个菜单。由于此图标的形状，它通常被称为“汉堡包”菜单图标。两条外线形成“面包”，中间线形成“馅饼”。 react-burger-menu是一个允许您为 React 应用程序创建侧边栏的库。它还带有多种效果和样式，用于自定义菜单的外观和感觉。 在本教程中，您将为react-burger-menu一个提供沙拉、比萨饼和甜点的名义餐厅网站使用和构建侧边栏。 先决条件 要完成本教程，您需要： Node.js 的本地开发环境。遵循如何安装 Node.js 并创建本地开发环境。 本教程已通过 Node v14.7.0、npmv6.14.7、reactv16.13.1 和react-burger-menuv2.7.1 验证。 步骤 1 — 设置项目 从使用create-react-app生成一个 React App 开始，然后安装依赖项： npx create-react-app react-burger-menu-example 切换到新的项目目录： cd react-burger-menu-example 接下来，打开index.css： nano src/index.css 添加以下样式： 源代码/索引.css * { box-sizing: border-box; } #page-wrap { padding-bottom: 10px; padding-top: 10px; } 此代码将box-sizing属性设置border-box为解决 CSS 盒模型计算问题。此代码还建立了一些垂直填充以防止边距折叠。 将更改保存到index.css然后打开App.js： nano src/App.js ..
Category : 教程系列
介绍 Elastic Stack — 以前称为ELK Stack — 是Elastic生产的开源软件的集合，它允许您搜索、分析和可视化从任何来源以任何格式生成的日志，这种做法称为集中式日志记录。在尝试识别服务器或应用程序的问题时，集中日志记录非常有用，因为它允许您在一个地方搜索所有日志。它也很有用，因为它允许您通过关联特定时间范围内的日志来识别跨多个服务器的问题。 Elastic Stack 有四个主要组件： Elasticsearch：一个分布式RESTful搜索引擎，用于存储所有收集到的数据。 Logstash：Elastic Stack 的数据处理组件，将传入数据发送到 Elasticsearch。 Kibana：用于搜索和可视化日志的 Web 界面。 Beats：轻量级、单一用途的数据传送器，可以将数据从数百或数千台机器发送到 Logstash 或 Elasticsearch。 在本教程中，您将在 Ubuntu 20.04 服务器上安装Elastic Stack。您将学习如何安装 Elastic Stack 的所有组件——包括Filebeat，一种用于转发和集中日志和文件的Beat——并配置它们以收集和可视化系统日志。此外，由于 Kibana 通常只在 .x 上可用localhost，我们将使用Nginx来代理它，以便可以通过 Web 浏览器访问它。我们将在单个服务器上安装所有这些组件，我们将其称为Elastic Stack 服务器。 注意：安装 Elastic Stack 时，您必须在整个堆栈中使用相同的版本。在本教程中，我们将安装整个堆栈的最新版本，在撰写本文时为 Elasticsearch 7.7.1、Kibana 7.7.1、Logstash 7.7.1 和 Filebeat 7.7.1。 先决条件 要完成本教程，您将需要以下内容： 具有 4GB RAM ..
该系列的一部分： 如何使用 HTML 构建网站 本教程系列将指导您使用 HTML（用于在 Web 浏览器中显示文档的标准标记语言）创建和进一步自定义该网站。不需要有任何编码经验，但如果您想重新创建演示网站，我们建议您从本系列的开头开始。 在本系列结束时，您应该有一个准备好部署到云的网站，并且基本熟悉 HTML。了解如何编写 HTML 将为学习其他前端 Web 开发技能（例如 CSS 和 JavaScript）奠定坚实的基础。 本教程将引导您完成<head>向网页添加元素的步骤，这将为我们创建一个部分，以包含有关我们 Web 文档的机器可读信息。此信息主要由浏览器和搜索引擎用于解释页面内容。放置在<head>元素内的内容在网页上将不可见。 注意：HTML<head>元素是一种语义元素，它告诉浏览器和开发人员其内容的含义或目的。语义元素用于帮助 HTML 文档的人类可读性，为浏览器提供解释内容的更多信息，提高站点可访问性（屏幕阅读器使用语义标签），并可以帮助 SEO 定位。 在<head>标签内添加开始和结束<html>标签。接下来，在<head>标签中添加两行额外的 HTML 代码，如下所示： <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8″> <title>Sammy’s First Website</title> </head> </html> 请注意，您已将各种 HTML 元素相互嵌套。的<title>和<meta>元件嵌套在<head>元素的内部，并且所述<head>元件嵌套在内部<html>元件。随着教程的进行，我们将经常嵌套元素。 现在让我们暂停一下，以了解我们刚刚添加的代码的用途。开始<head>标记之后的代码行<meta charset=”utf-8″>——将文档的字符集指定为 UTF-8，这是一种支持来自各种书面语言的大多数字符的 Unicode 格式。 下一行代码使用<title>元素设置 HTML 文档的标题。您插入到此元素中的内容将显示在浏览器选项卡上，并作为搜索结果中的网站标题显示，但不会显示在网页本身上。确保将“Sammy’s First Website”替换为您的姓名或您正在构建的网站的名称。 尽管开发人员经常在该<head>部分添加附加信息，但我们现在有足够的信息来创建基本的 HTML ..
介绍 一个证书颁发机构（CA）负责发放数字证书来验证在互联网上的身份的实体。尽管公共 CA 是验证网站身份和提供给公众的其他服务的流行选择，但私有 CA 通常用于封闭组和私有服务。 构建私有证书颁发机构将使您能够配置、测试和运行需要在客户端和服务器之间进行加密连接的程序。借助私有 CA，您可以为基础架构中的用户、服务器或单个程序和服务颁发证书。 Linux 上使用自己私有 CA 的一些程序示例是OpenVPN和Puppet。您还可以将 Web 服务器配置为使用由私有 CA 颁发的证书，以便使开发和登台环境与使用 TLS 加密连接的生产服务器相匹配。 在本指南中，我们将学习如何在 Ubuntu 20.04 服务器上设置私有证书颁发机构，以及如何使用新 CA 生成和签署测试证书。您还将学习如何将 CA 服务器的公共证书导入操作系统的证书库，以便验证 CA 与远程服务器或用户之间的信任链。最后，您将学习如何吊销证书并分发证书吊销列表，以确保只有授权用户和系统才能使用依赖于您的 CA 的服务。 先决条件 要完成本教程，您需要访问 Ubuntu 20.04 服务器来托管您的 CA 服务器。在开始本指南之前，您需要为非root用户配置sudo特权。您可以按照我们的Ubuntu 20.04 初始服务器设置指南来设置具有适当权限的用户。链接的教程还将设置防火墙，本指南中假定该防火墙已就位。 此服务器将在本教程中称为CA 服务器。 确保 CA 服务器是独立系统。它仅用于导入、签署和撤销证书请求。它不应运行任何其他服务，理想情况下，当您不主动使用 CA 时，它将处于脱机状态或完全关闭。 注意：如果您想了解签名和吊销证书，本教程的最后一部分是可选的。如果您选择完成这些练习步骤，您将需要第二台 Ubuntu 20.04 服务器，或者您也可以使用您自己的本地 Linux 计算机运行 Ubuntu 或 Debian，或从其中任何一个派生的发行版。 ..
作为Write for DOnations计划的一部分，作者选择了免费和开源基金来接受捐赠。 介绍 Discord是一个流行的语音和短信平台，被游戏玩家、开源社区、会议组织者等使用。由于出色的语音聊天、各种文本渠道以及使用自动助手或“机器人”的可扩展性等功能，它广受欢迎。 在本指南中，您将使用 Python 编程语言构建一个 Discord 机器人并将其部署到 Ubuntu 20.04 服务器。您将使用 Discord Python 库discord.py对您的机器人进行编程。 注意： Discord 的聊天室/语音室有两个不同的名称。他们将这些称为服务器和公会，具体取决于您在文档中的位置。在本教程中，我们将使用术语公会。只要知道这些术语可以互换使用，并且通常在官方 Discord 文档中。 先决条件 要完成本教程，您需要： 一台带有 sudo 非 root 用户和防火墙的Ubuntu 20.04 服务器。您可以按照我们的Ubuntu 20.04 初始服务器设置指南进行设置。 安装在本地机器上的 Python3。有关具体说明，您可以按照我们在 Windows、Mac或Linux上安装Python的教程之一进行操作。 一个 Discord 帐户和一个具有管理员权限的 Discord Guild。访问 [Discord 的入门](( https://support.discord.com/hc/en-us/articles/360033931551-Getting-Started) ) 页面以获取应用程序和免费帐户。然后创建一个公会。如果您创建自己的 Discord Guild，那么您将拥有添加机器人所需的权限。 * 您选择的任何文本编辑器，例如Visual Studio Code、Atom、Sublime或Nano。 第 1 步 — ..
作者选择了COVID-19 救济基金来接受捐赠，作为Write for DOnations计划的一部分。 介绍 创建和使用函数是任何编程语言的基本方面，TypeScript也不例外。TypeScript 完全支持函数的现有JavaScript 语法，同时还添加了类型信息和函数重载作为新功能。除了为函数提供额外的文档外，类型信息还减少了代码中出现错误的机会，因为将无效数据类型传递给类型安全函数的风险较低。 在本教程中，您将首先使用类型信息创建最基本的函数，然后转向更复杂的场景，例如使用其余参数和函数重载。您将尝试不同的代码示例，您可以在自己的 TypeScript 环境或TypeScript Playground 中进行操作，TypeScript Playground是一个允许您直接在浏览器中编写 TypeScript 的在线环境。 先决条件 要学习本教程，您需要： 您可以在其中执行 TypeScript 程序以跟随示例进行操作的环境。要在本地计算机上进行设置，您需要以下内容： 这两个节点和NPM（或丝安装才能运行的开发环境，手柄的打字稿相关的软件包）。本教程使用 Node.js 版本 14.3.0 和 npm 版本 6.14.5 进行了测试。要在 macOS 或 Ubuntu 18.04 上安装，请按照如何在 macOS 上安装 Node.js 和创建本地开发环境或如何在 Ubuntu 18.04 上安装 Node.js 的使用 PPA 安装部分中的步骤进行操作。如果您使用的是适用于 Linux的Windows 子系统 (WSL)，这也适用。 此外，您将需要tsc在您的机器上安装TypeScript 编译器 ( )。为此，请参阅TypeScript 官方网站。 如果您不想在本地机器上创建 ..
作为Write for DOnations计划的一部分，作者选择了免费和开源基金来接受捐赠。 介绍 即使云服务越来越流行，运行原生应用程序的需求仍然存在。 通过使用noVNC和TigerVNC，您可以在Docker容器内运行本机应用程序并使用 Web 浏览器远程访问它们。此外，您可以在系统资源多于本地可用资源的服务器上运行您的应用程序，这可以在运行大型应用程序时提供更高的灵活性。 在本教程中，您将使用 Docker容器化电子邮件客户端Mozilla Thunderbird。之后，您将保护它并使用Caddy Web 服务器提供远程访问。 完成后，您只需使用网络浏览器即可从任何设备访问 Thunderbird。或者，您还可以使用WebDAV从本地访问文件。您还将拥有一个可以在任何地方运行的完全独立的 Docker 映像。 先决条件 在开始本指南之前，您需要具备以下条件： 一台 Ubuntu 20.04 服务器，至少有 2GB RAM 和 4GB 磁盘空间。 具有sudo特权的非 root 用户。 在您的服务器上设置 Docker。您可以按照如何在 Ubuntu 20.04 上安装和使用 Docker 进行操作。 第 1 步 – 创建supervisord配置 现在您的服务器正在运行并安装了 Docker，您可以开始配置应用程序的容器了。由于您的容器由多个组件组成，您需要使用进程管理器来启动和监控它们。在这里，您将使用supervisord. supervisord是一个用 Python 编写的进程管理器，通常用于编排复杂的容器。 首先，创建并输入一个thunderbird为您的容器命名的目录： mkdir ~/thunderbird cd ~/thunderbird 现在创建并打开一个名为supervisord.confusingnano或您喜欢的编辑器的文件： nano ..
作者选择Creative Commons接受捐赠，作为Write for DOnations计划的一部分。 介绍 作为JavaScript Web 开发人员，异步代码使您能够运行代码的某些部分，而其他部分仍在等待数据或解析。这意味着您的应用程序的重要部分在呈现之前不必等待不太重要的部分。使用异步代码，您还可以通过请求和显示新信息来更新您的应用程序，即使在后台处理长函数和请求时，也可以为用户提供流畅的体验。 在React开发中，异步编程提出了独特的问题。例如，当您使用 React函数式组件时，异步函数可以创建无限循环。当一个组件加载时，它可以启动一个异步函数，当异步函数解析时，它可以触发重新渲染，这将导致组件调用异步函数。本教程将解释如何使用一个名为useEffect的特殊Hook来避免这种情况，它只会在特定数据更改时运行函数。这将让您有意识地运行异步代码，而不是在每个渲染周期上运行。 异步代码不仅限于对新数据的请求。React 有一个内置系统用于延迟加载组件，或者仅在用户需要时加载它们。当与Create React App 中的默认webpack配置结合使用时，您可以拆分代码，将大型应用程序减少为可以根据需要加载的较小部分。React 有一个特殊的组件，它会在浏览器加载新组件时显示占位符。在 React 的未来版本中，您将能够使用在嵌套组件中加载数据而不会阻塞渲染。SuspenseSuspense 在本教程中，您将通过创建一个应用程序来处理 React 中的异步数据，该应用程序显示有关河流的信息并使用setTimeout. 在本教程结束时，您将能够使用useEffectHook加载异步数据。如果组件在数据解析之前卸载，您还可以安全地更新页面而不会产生错误。最后，您将使用代码拆分将大型应用程序拆分为较小的部分。 先决条件 你需要一个运行Node.js的开发环境；本教程在 Node.js 版本 10.20.1 和 npm 版本 6.14.4 上进行了测试。要在 macOS 或 Ubuntu 18.04 上安装它，请按照如何在 macOS 上安装 Node.js 和创建本地开发环境或如何在 Ubuntu 18.04 上安装 Node.js 的使用 PPA 安装部分中的步骤进行操作。 使用Create React App设置的 React 开发环境，删除了非必要的样板。要进行设置，请按照如何管理 React 类组件上的状态教程的步骤 ..
LAMP 是指一组开源软件，它们通常一起用于为 Web 应用程序提供服务。术语LAMP是一个表示的结构的首字母缩写大号inux下操作系统与甲帕什Web服务器，与存储在网站上的数据中号ySQL数据库和通过处理的动态内容P HP。 LAMP 堆栈代表了一种配置 Web 服务器的方法，并在 Web 上的许多大型应用程序中使用。 要了解有关 LAMP 的更多信息，请访问我们 关于 LAMP 堆栈的综合教�..
介绍 该vue-meta库提供了一个 Vue 插件，允许您从组件级别控制应用程序的元数据。 为搜索引擎优化 (SEO) 管理 Web 应用程序的元数据很重要，但是在使用单页 Web 应用程序 (SPA) 时，这通常是一项繁琐的任务。本vue-router教程中已经部分介绍了动态元数据。 在本文中，您将探索该vue-meta插件如何以简洁、合乎逻辑的方式为您处理此问题，同时为您提供对应用程序元数据的更多控制。 先决条件 如果你想跟随这篇文章，你需要： 对<head>, <title>,有一定的了解<meta>。 对设置 Vue.js 项目有一定的了解。 本教程已通过 Node v15.8.0、npmv7.5.4、Vue v12.6.11 和vue-metav2.4.0 验证。 使用 vue-meta 首先，要使用vue-meta，请打开您的终端并导航到您现有的 Vue 项目目录。然后，运行以下命令： npm install [email protected] 接下来，使用您的代码编辑器，打开main.js文件并引导插件： 源代码/main.js import Vue from ‘vue’ import VueMeta from ‘vue-meta’ import App from ‘App.vue’ Vue.use(VueMeta) new Vue({ render: h => ..