作者选择Apache 软件基金会作为Write for DOnations计划的一部分接受捐赠。 介绍 Electron是一个开源框架，用于使用 JavaScript、HTML 和 CSS 等 Web 技术创建本机应用程序。它结合了对在 Mac、Windows 和 Linux 上跨平台构建和运行应用程序的支持。许多流行的桌面应用程序都是使用 Electron 构建的，例如 Visual Studio Code、WhatsApp、Twitch、Slack 和 Figma。 Electron 有助于设计更复杂的应用程序功能，例如自动更新或本机菜单，这意味着开发人员可以专注于应用程序的核心设计。此外，Electron 是一个由 GitHub 维护的开源项目，拥有活跃的贡献者社区。 在本教程中，您将首先设置一个项目并安装 Electron。之后，您将创建您的第一个“Hello World！” 使用 Electron 的应用程序并对其进行自定义。您将实现优雅的窗口设置并为应用程序创建新窗口。完成所有这些步骤后，您将在 macOS 上拥有一个 Electron 跨平台桌面应用程序。 先决条件 要完成本教程，您需要： Node.js 安装在您的机器上和 macOS 上的本地开发环境。按照如何在 macOS 上安装 Node.js 和创建本地开发环境教程进行操作。 注意：本教程在 macOS 10.15.3 上进行了测试。 步骤 1 — ..
Category : 教程系列
HTML 元素是 HTML 文档的一个组件，它告诉 Web 浏览器如何构建和解释 HTML 文档的一部分。HTML 元素可以包含格式说明、语义和内容。 例如，HTML 元素用于表示文档部分（例如页眉、段落和页脚）以及嵌入内容（例如超链接、文本和图像）。尽管 HTML 可用于提供格式说明，但 HTML 标准强烈鼓励使用CSS来代替。 HTML 元素通常——但并非总是——通过打开和关闭HTML 标签创建，这些标签环绕一段内容。下面是标记 HTML 元素的每个部分的插图： 有关 HTML 元素的更多教育资源，请访问： 如何使用和理解 HTML 元素 如何使用 HTML 教程系列构建网站 如何使用 HTML 构建网站：DigitalOcean Workshop Kit 如何使用 HTML 电子书建立网站 我们的HTML页面上提供了与 HTML 相关的教育资源的完�..
介绍 您可能已经注意到，在许多网站上，您现在可以在深色和浅色主题之间切换。这通常是使用 CSS 自定义属性（又名CSS 变量）来完成的。在本教程中，您将看到如何仅使用 CSS 和一点 JavaScript 来实现类似的功能。要了解有关此代码如何工作的更多信息，请查看我们关于 Javascript或HTML 的系列内容。 第 1 步 – 创建 CSS 变量 CSS 中自定义属性的力量在这里真正发挥作用，因为与使用 CSS 预处理器定义的变量不同，这些值是动态的；它们的值可以在任何时间点更改或覆盖以响应用户输入。当变量的值被更改或覆盖时，所有使用该变量的元素都会自动反映该更改。 首先，您必须做一些工作并提取要在 CSS 自定义属性中使用的所有颜色。假设您从以下样式开始： 样式文件 body { background: white; color: #555; } a, a:link { color: #639A67; } a:hover { color: #205D67; } 然后，您将定义自定义属性，如下所示： 样式文件 :root { –bg: white; –text-color: #555; –link-color: #639A67; –link-hover: ..
该系列的一部分： 如何编写 Ansible Playbooks Ansible 是一种现代配置管理工具，不需要在远程节点上使用代理软件，仅使用 SSH 和 Python 在托管服务器上进行通信和执行命令。本系列将带您了解可用于编写服务器自动化剧本的主要 Ansible 功能。最后，我们将看到一个实际示例，说明如何创建剧本以自动设置远程 Nginx Web 服务器并向其部署静态 HTML 网站。 任务是您可以使用 Ansible playbook 自动化的最小操作单元。Playbook 通常包含一系列服务于某个目标的任务，例如设置 Web 服务器或将应用程序部署到远程环境。 Ansible 按照它们在 playbook 中定义的相同顺序执行任务。在使设置 LEMP 服务器等过程自动化之前，您需要评估哪些手动步骤是必需的，以及完成所有操作必须遵循的顺序。然后，您将能够确定您需要哪些任务以及可以使用哪些模块以更少的步骤实现您的目标。 模块提供了执行操作的快捷方式，否则您必须作为原始 bash 命令运行。这些也经常用于抽象不同操作系统之间的命令。 在本指南的前一部分中创建第一个剧本时，您定义了一个使用debug. 让我们再看看那个剧本。您可以使用该cat命令打印该文件的内容以供检查： cat ~/ansible-practice/playbook-01.yml 该剧本包含一个任务，用于在剧本的输出中打印一条消息： ~/ansible-practice/playbook-01.yml — – hosts: all tasks: – name: Print message debug: msg: Hello Ansible World 任务被定义为一个tasks游戏内名称下的列表，与hosts定义该游戏目标的指令处于同一级别。该name属性定义了将要执行该任务时将打印的输出。 示例任务调用debug模块，该模块允许您在剧中显示消息。例如，这些消息可用于显示调试信息，例如变量的内容或命令返回的输出消息。 ..
介绍 多年来，随着媒体查询的出现和服务工作者的引入，构建对移动友好的 Web 应用程序变得更加容易。使用媒体查询，我们可以支持不同移动设备的屏幕尺寸。使用 Service Worker，我们可以实现推送通知和后台同步等功能。 React Native是由 Facebook 开发的多平台解决方案，可让您使用 JavaScript 构建移动应用程序。这些移动应用程序被认为是多平台的，因为它们编写一次并部署在多个平台上，例如 Android、iOS 和 Web。 在本教程中，您将使用 React Native 组件（如、和 ）构建一个应用程序，该应用程序显示来自Random User API 的用户信息。该应用程序将使用React Native Web库在 Web 和移动设备上运行，它允许您在 Web 应用程序中使用 React Native 组件和 API。ScrollViewTextImage 注意：本教程末尾记录的部署过程是特定于 Android 的。然而，对于那些对 iOS 部署感兴趣的人来说，这个过程可能仍然具有教育意义。 先决条件 要完成本教程，您需要： Node.js 的本地开发环境。遵循如何安装 Node.js 并创建本地开发环境。 熟悉 JavaScript。您可以查看如何在 JavaScript 中编码系列以了解更多信息。 熟悉反应。您可以查看我们的How To Code in React.js系列。 本教程最初是在 Node ..
介绍 的JSON对象，在所有现代浏览器可用，有两个有用的方法来处理JSON格式的内容：parse和stringify。JSON.parse()接受一个 JSON 字符串并将其转换为 JavaScript 对象。JSON.stringify()接受一个 JavaScript 对象并将其转换为 JSON 字符串。 下面是一个例子： const myObj = { name: ‘Skip’, age: 2, favoriteFood: ‘Steak’ }; const myObjStr = JSON.stringify(myObj); console.log(myObjStr); // “{“name”:”Sammy”,”age”:6,”favoriteFood”:”Tofu”}” console.log(JSON.parse(myObjStr)); // Object {name:”Sammy”,age:6,favoriteFood:”Tofu”} 虽然这些方法通常用于对象，但它们也可以用于数组： const myArr = [‘bacon’, ‘lettuce’, ‘tomatoes’]; const myArrStr = JSON.stringify(myArr); console.log(myArrStr); // “[“shark”,”fish”,”dolphin”]” console.log(JSON.parse(myArrStr)); // [“shark”,”fish”,”dolphin”] JSON.parse() JSON.parse()可以将函数作为第二个参数，可以在返回对象值之前对其进行转换。这里对象的值在parse方法的返回对象中被转换为大写： const user = ..
ç ascading š tyle小号heets（CSS）是用来控制网站的呈现样式表语言。 CSS 于 1994 年由 Håkon Wium Lie 首次提出，当时他与万维网的发明者 Tim Berners-Lee 一起在欧洲核研究组织 (CERN) 工作。当时，网页通常完全使用HTML创建，HTML是 Berners-Lee 在 1990 年代开发的超文本标记语言。 然而，HTML 已被开发用于描述 Web 文档组件（例如其标题和段落）的语义，而不是提供样式说明。随着越来越多地使用 HTML 来设计网页样式变得越来越笨拙，引入了 CSS 以提供一种与 HTML 结合使用的更有效的网站样式方法。今天，与 HTML 和JavaScript 一样，CSS 是支持万维网的核心技术之一。 有关 CSS 的更多教育资源，请访问： 如何使用 CSS 教程系列构建网站 如何使用 CSS Workshop Kit 构建网站 如何使用 CSS 电子书构建网站 我们的CSS页面上提供了与 CSS 相关的教育资源的完�..
介绍 Vue 中的计算属性允许您执行复杂的操作或数据格式化，同时通过依赖项计算最大限度地提高性能，该计算仅在依赖项更改时更新视图。此功能是同步的。 但是，该vue-async-computed包允许您通过将 a 的解析值绑定Promise到组件属性来创建和使用组件中的异步计算属性。 先决条件 要完成本教程，您需要： Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。 熟悉设置 Vue.js 项目和使用 Vue.js 组件可能会有所帮助。 有些熟悉Promise，async和await。 本教程已通过 Node v15.10.0、npmv7.6.0、vuev2.6.11 和vue-async-computedv3.9.0 验证。 设置项目 为了快速设置项目，本文将推荐使用@vue/cli. 注意：本文将采取使用的方式npx来避免全局安装@vue/cli； npx @vue/cli create vue-async-computed-example –default 导航到新创建的项目目录； cd vue-async-computed-example vue-async-computed可以通过npm以下命令安装： npm install [email protected] 然后，main.js使用您的代码编辑器打开该文件。导入和使用vue-async-computed： 源代码/main.js import Vue from ‘vue’ import AsyncComputed from ‘vue-async-computed’ import App from ‘./App.vue’ Vue.config.productionTip = false ..
介绍 WordPress 是目前互联网上最受欢迎的内容管理系统 (CMS) 之一，它允许用户使用带有 PHP 处理的 MySQL 后端来设置灵活的博客和网站。WordPress 在新老工程师中的采用率令人难以置信，是让网站高效启动和运行的绝佳选择。初始设置后，几乎所有 WordPress 网站的管理都可以通过其图形界面完成——这些功能以及更多功能使 WordPress 成为可扩展的网站的绝佳选择。 在本教程中，您将专注于在 LEMP 堆栈（Linux、Nginx、MySQL 和 PHP）上为 Ubuntu 20.04 服务器设置 WordPress 实例。 先决条件 为了完成本教程，您需要访问 Ubuntu 20.04 服务器。要在您的服务器上成功安装带有 LEMP 的 WordPress，您还需要在开始本教程之前执行以下任务： sudo在您的服务器上创建一个用户：本教程中的步骤使用具有sudo特权的非 root 用户。您可以sudo按照我们的Ubuntu 20.04 初始服务器设置教程创建具有特权的用户。 安装 LEMP 堆栈：WordPress 需要 Web 服务器、数据库和 PHP 才能正常运行。设置 LEMP 堆栈（Linux、Nginx、MySQL 和 PHP）可满足所有这些要求。按照本教程安装和配置此软件。 您无需自己设置这些组件，而是可以使用DigitalOcean 的 LEMP 一键安装应用程序快速配置已经安装了 LEMP 堆栈的 ..
作者选择Creative Commons接受捐赠，作为Write for DOnations计划的一部分。 介绍 在本教程中，您将通过向组件传递props来创建自定义组件。道具是您提供给JSX 元素的参数。它们看起来像标准的 HTML 道具，但它们不是预定义的，可以有许多不同的JavaScript 数据类型，包括数字、字符串、函数、数组，甚至其他React 组件。您的自定义组件可以使用 props 来显示数据或使用数据使组件具有交互性。道具是创建可适应不同情况的组件的关键部分，了解它们将为您提供开发可处理独特情况的自定义组件的工具。 向组件添加 props 后，您将使用PropTypes来定义期望组件接收的数据类型。PropTypes是一个简单的类型系统，用于在运行时检查数据是否与预期类型匹配。它们既是文档又是错误检查器，有助于在扩展时保持应用程序的可预测性。 在本教程结束时，您将使用各种方法props构建一个小型应用程序，该应用程序将获取一系列动物数据并显示信息，包括名称、科学名称、大小、饮食和其他信息。 注意：第一步设置一个空白项目，您将在该项目上构建教程练习。如果您已经有一个工作项目并想直接使用 props，请从第 2 步开始。 先决条件 你需要一个运行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。您可以在如何使用 Create React App设置 React 项目中找到使用 ..