博客

  • 如何修复XAMPP本地主机index.php错误

    如何修复XAMPP本地主机index.php错误

    XAMPP是一款出色的工具,可用于快速设置本地WordPress安装以用于测试。但是,与任何WordPress网站一样,您的本地安装有时会出现问题。如果您尝试访问站点的index.php文件并且收到错误消息,那么您并不孤单——这是一个相当普遍的问题。

    幸运的是,这个问题相对容易解决。另外,由于我们正在处理WordPress,因此有多种方法可以解决。因此,您应该能够找到与您的舒适度相匹配的解决方案。

    在本文中,我们将解释localhost/xampp/index.php错误及其不同的表现形式。然后我们将通过两种方法来修复它。

    1. XAMPP index.php错误简介
    2. 如何修复XAMPP本地主机index.php错误

    XAMPP index.php错误简介

    当您尝试在浏览器中访问localhost/xampp/index.php时,会出现index.php错误。此WordPress文件可作为您网站的入口点;因此,它需要是可访问的。

    错误通常以两种方式之一出现。首先,您尝试加载页面并收到“Object not found!” 错误信息。当您尝试加载页面并被重定向到“localhost/dashboard”时,会发生另一个演示。

    XAMPP“localhost/dashboard”页面

    XAMPP“localhost/dashboard”页面

    显然,这不是很有帮助。这组XAMPP错误特别令人沮丧,因为它们没有说明问题可能是什么。相反,事情并没有按照您的预期进行,您只能摸不着头脑。

    但是,无论演示如何,最终结果都是一样的:您无法访问完成工作所需的页面。

    幸运的是,这个问题很容易解决。它源于XAMPP如何处理其目录中的文件,因此更正它涉及调整这些文件。

    如何修复XAMPP本地主机index.php错误

    有两种方法可以解决此问题。第一个涉及将文件扩展名从“.php”切换为“.txt”,而第二个则侧重于更改您的站点查找文件的位置。

    这两个选项都非常简单,并且都可以工作,因此我们建议选择您最熟悉的解决方案并尝试一下。如果之后仍然在localhost/xampp/index.php出现错误,您也可以尝试第二种方法。

    1.将index.php重命名为index.txt

    此方法涉及将index.php的文件扩展名(文件名后面的简短缩写)更改为“.txt”。这非常简单,可以从任何文件浏览器中完成,而且结果通常是即时的。

    访问XAMPP文件夹的最简单方法是从XAMPP控制面板。从系统托盘打开面板。

    XAMPP控制面板中的Explorer按钮

    XAMPP控制面板中的Explorer按钮直接打开文件浏览器

    单击窗口右侧的Explorer按钮可直接打开文件浏览器到XAMPP文件夹。

    index.php文件

    index.php文件位于“htdocs”文件夹中

    导航到htdocs文件夹,然后找到index.php文件。如果您使用的是Windows,它可能会简单地显示“索引”。这是因为默认情况下隐藏文件扩展名。要更正此问题,请单击文件资源管理器功能区中的查看并选中文件扩展名旁边的框。

    启用文件扩展名以编辑文件名

    在Windows资源管理器中启用文件扩展名以编辑文件名

    接下来,右键单击文件并选择Rename。只需删除“php”并将其替换为“txt”:

    重命名的index.txt文件

    Windows资源管理器中重命名的index.txt文件

    如果您收到提示,询问您是否确定要更改文件名,请选择Yes。然后打开浏览器并尝试导航到“localhost”。您现在应该看到您的目录列表。

    2. 编辑httpd-vhosts.conf文件

    您还可以通过更改文件httpd-vhosts.conf中的一行来解决localhost/xampp/index.php错误。这个文件很重要,但它被隐藏在XAMPP目录中的Apache文件夹的深处:

    • 在Windows机器上,文件的路径是:C:xamppapacheconfextrahttpd-vhosts.conf
    • 在Mac上,路径明显不同:~/.bitnami/stackman/machines/xampp/volumes/root/etc/extra/httpd-vhosts.conf

    无论哪种情况,首先打开XAMPP控制面板并单击Explorer

    XAMPP控制面板中的资源管理器

    XAMPP控制面板中的资源管理器按钮打开文件浏览器

    然后从上面列出的选项导航到适当的目录。到达那里后,在文本编辑器中打开httpd-vhosts.conf文件。

    httpd-vhosts.conf文件

    httpd-vhosts.conf文件是解决index.php错误的关键

    查看“VirtualHost”部分。您要查找的行是“DocumentRoot”。如果此处指定的路径以“htdocs”结尾,那就是问题所在。您应该更改它,使其在您的项目文件夹中结束。

    例如,该文件当前可能如下所示:

    httpd-vhosts.conf

    您最初的httpd-vhosts.conf可能看起来像这样

    调整后,您将拥有如下所示的内容:

    index.php文件

    这个更新的文本将帮助XAMPP找到index.php文件

    “DocumentRoot”行应以“htdocs”文件夹中列出的您网站的文件夹名称结尾。完成后,保存更改并尝试再次加载localhost/xampp/index.php

    小结

    如果您无法在localhost/xampp/index.php访问本地站点的索引,那么您并不孤单。这个令人沮丧的问题相对常见,不幸的是,该错误几乎没有说明问题可能是什么。

    值得庆幸的是,这也是一个相当简单的问题,您可以通过两种方式解决:

    1. 将index.php文件重命名为index.txt
    2. 编辑httpd-vhosts.conf文件并更改“DocumentRoot”属性
  • 如何修复XAMPP环境“Apache意外关闭”错误

    如何修复XAMPP环境“Apache意外关闭”错误-1

    XAMPP是一个有用的开发工具。但是,您可能会在某些时候遇到问题,例如收到通知:“Apache shutdown unexpectedly”。这个错误似乎不知从何而来,因此确定原因(更不用说解决方案)可能会令人费解。

    幸运的是,对于Apache的突然关闭,有一个常见的解释。通过一些简单的修改,您应该能够解决问题并让Apache重新启动并运行。您所要做的就是更新配置文件中的一些设置。

    在本文中,我们将讨论XAMPP中“Apache Shutdown Unexpectedly”这个Apache错误的常见原因,然后引导您通过四个步骤在Windows和macOS上修复它。

    1. “Apache Shutdown Unexpectedly”错误简介
    2. 如何修复“Apache Shutdown Unexpectedly”错误(Windows)
    3. 如何修复“Apache Shutdown Unexpectedly”错误(macOS)

    “Apache Shutdown Unexpectedly”错误简介

    XAMPP是一个免费的开源服务器堆栈,包括Apache服务器和MariaDB数据库:

    如何修复XAMPP环境“Apache意外关闭”错误-1

    XAMPP网站

    它运行PHP和Perl脚本,用于在本地机器上开发和测试动态网站。这意味着如果您正在构建一个网站,您可以 在您的计算机上本地安装 WordPress。您可以使用XAMPP,而无需将您网站的文件上传到您的网络托管服务。

    如果您正在阅读本文,我们将假定您至少已经对XAMPP有所熟悉。但是,对您来说可能是新出现的“Apache意外关闭”错误。

    此消息最常见的原因是端口被阻塞。通常,这意味着安装在您计算机上的另一个应用程序(例如Skype)正在使用与XAMPP相同的端口。此外,您可能会注意到错误消息表明问题也可能归因于“缺少依赖项、不正确的权限、崩溃或被其他方法关闭”。

    无论如何,最简单的解决方法是简单地修改XAMPP默认设置。但是,解决错误的方法在Windows和macOS之间略有不同。此外,根据您使用的XAMPP版本,界面可能看起来有些不同。我们将提供以下两种操作系统的说明,从Windows开始。

    如何修复“Apache Shutdown Unexpectedly”错误(Windows)

    如果您使用的是Windows设备,则可以按照以下四个步骤更新XAMPP中的默认端口设置。

    第 1 步:从XAMPP控制面板打开配置设置

    第一步当然是启动XAMPP。这将打开XAMPP控制面板。从这里,您可以更新服务器堆栈的配置设置。

    由于此错误与Apache有关,因此我们将重点关注这些设置。在“Apache” 选项行中,单击“ Config”按钮。

    如何修复XAMPP环境“Apache意外关闭”错误-1

    Windows中的XAMPP控制面板

    这将打开一个文件下拉菜单。我们将编辑其中两个文件,从httpd.conf开始。

    第 2 步:更改httpd.conf 文件的默认端口设置

    从文件菜单中,单击Apache (httpd.conf)。完成后,该文件将在您计算机的默认文本编辑器中打开:

    如何修复XAMPP环境“Apache意外关闭”错误-1

    XAMPP控制面板中的Apache (httpd.conf) 文件

    在此文件中,您需要更新三个设置。要开始,请按Ctrl  + F,然后在搜索字段中输入“80”:

    如何修复XAMPP环境“Apache意外关闭”错误-1

    Windows中的Apache httpd.conf文件

    这将显示文件中数字80的所有实例。找到“Port 80”并将其更改为“Port 8080”。更新端口设置后,搜索“Listen 80”并将其更新为“Listen 8080”。

    最后,搜索“servername localhost:80”。找到后,将其修改为“servername localhost:8080”。完成后,保存并关闭文件。

    第 3 步:更新http-ssl.conf文件中的默认端口设置

    现在是时候转到第二个文件了。为此,您可以返回XAMPP控制面板,然后再次选择Apache设置下的配置这一次,打开Apache (http-ssl.conf)文件。

    当文件在文本编辑器中打开时,按Ctrl +  F,然后 在搜索字段中输入443 。找到“Listen 443”并将其更新为“Listen 4433”。

    接下来,在文件中搜索“443”的下一个实例。它应该是“<VirtualHost _default_:443>”。找到它后,您可以继续将其更改为“<VirtualHost _default_:4433>”。完成后,请记住保存并关闭文件。

    第 4 步:重新启动Apache

    更新两个文件中的设置后,最后一步是停止Apache。您可以通过单击同一Apache行上的Stop按钮来执行此操作。Apache停止后,单击“ Start”按钮完成重新启动过程。

    如何修复XAMPP环境“Apache意外关闭”错误-1

    在XAMPP中停止Apache的选项

    而已!您的端口号将被更新,Apache现在应该可以正常运行。

    如何修复“Apache Shutdown Unexpectedly”错误(macOS)

    根据您运行的macOS版本,您的计算机上可能已经安装了Apache。这个Apache的默认应用程序将使用与XAMPP中的Apache服务器相同的默认端口设置,因此这可能是“Apache shutdown unexpectedly”错误的原因。

    如果您使用的是macOS,则可以按照以下四个步骤更新默认端口设置。

    第 1 步:打开XAMPP Apache配置

    首先,如果您还没有这样做,请打开XAMPP应用程序管理器:

    如何修复XAMPP环境“Apache意外关闭”错误-1

    XAMPP应用程序管理器

    接下来,选择顶部Welcome选项卡旁边的Manage Servers选项卡:

    如何修复XAMPP环境“Apache意外关闭”错误-1

    XAMPP的“管理服务器”设置

    在此屏幕上,您会找到选项列表。您可以单击Apache Web Server,然后单击Configure按钮。

    第 2 步:打开配置文件

    Configure Apache Web Server框中,选择Open Conf File

    如何修复XAMPP环境“Apache意外关闭”错误-1

    XAMPP的“配置Apache Web服务器”选项

    将出现一个警告框,说明该文件适用于高级用户:

    如何修复XAMPP环境“Apache意外关闭”错误-1

    XAMPP的conf文件警告“针对高级用户”

    您可以单击“Yes 继续。这将打开httpd.conf 文件。

    第 3 步:更新端口设置

    一旦文件在文本编辑器中打开,下一步就是更新端口设置。为此,您可以按Ctrl  + F,然后在搜索字段中输入“80”。这将显示数字80的实例:

    如何修复XAMPP环境“Apache意外关闭”错误-1

    XAMPP的httpd.conf文件端口设置

    找到这些行:

    #Listen 12.34.56.78:80
    Listen 80
    Once you do, go ahead and change them to the following:
    #Listen 12.34.56.78:8080
    Listen 8080
    #Listen 12.34.56.78:80
    Listen 80
    Once you do, go ahead and change them to the following:
    #Listen 12.34.56.78:8080
    Listen 8080
    #Listen 12.34.56.78:80
    Listen 80
    Once you do, go ahead and change them to the following:
    #Listen 12.34.56.78:8080
    Listen 8080

    完成后,您可以保存并关闭文件。在“Configure Apache Web Server”框中,单击“OK” 。

    第 4 步:重新启动Apache

    最后一步是停止并重新启动Apache,您可以从XAMPP应用程序管理器的Manage Servers 选项卡中执行此操作。Apache停止后,单击Start重新启动:

    如何修复XAMPP环境“Apache意外关闭”错误-1

    XAMPP Apache端口

    您的端口号将被更新,Apache现在应该可以正常运行。

    小结

    XAMPP错误“Apache shutdown unexpectedly”通常是由另一个程序(例如Skype)使用默认的Apache端口引起的。虽然这可能令人沮丧,但它通常有一个简单的解决方案。

    正如我们在本文中所讨论的,解决此问题的最简单方法是更新XAMPP的Apache配置设置。您可以通过编辑httpd.conf文件http-ssl.conf 文件(适用于Windows用户)来完成此操作。完成此操作后,您应该停止并重新启动Apache以恢复正常运行。

  • 如何修复XAMPP本地环境HTTP 404错误 “未找到请求的资源”

    如何修复XAMPP本地环境HTTP 404错误 “未找到请求的资源”

    在本地环境中开发WordPress时,XAMPP是一种流行且值得信赖的工具。但是,这并不意味着您永远不会遇到错误。您可能会遇到一个HTTP错误404“未找到请求的资源”。

    如果您遇到此问题,有几种方法可以尝试解决它。这些修复并不过分复杂,也不会花费很多时间来执行。稍有耐心,您应该立即恢复运行。在本文中,我们将解释XAMPP中的错误“requested resource is not found”是什么。然后,我们将分享五个提示,帮助您解决问题并让您重回正轨。

    1. XAMPP HTTP错误404“未找到请求的资源”是什么意思
    2. 如何修复XAMPP中的HTTP错误404 “未找到请求的资源”

    XAMPP HTTP错误404“未找到请求的资源”是什么意思

    404错误是从服务器发送到客户端的许多HTTP状态代码之一。通常,此错误表明浏览器正在请求在服务器上找不到的内容。

     

    HTTP 404错误

    HTTP 404错误

    确定404错误的来源可能具有挑战性,因为有几个潜在的原因。这些可以包括:

    • 域不再存在。
    • 请求的资源已被删除或移动到不同的URL。
    • URL在浏览器中输入错误。

    您在浏览网页时可能会遇到这些情况。 但是,在使用XAMPP在localhost上工作时,您也可能会遇到404错误。在这种情况下,您可能还会看到表示为错误404的消息“找不到对象”。

    如何修复XAMPP中的HTTP错误404 “未找到请求的资源”

    现在您了解了这个特定的XAMPP错误是什么,让我们探索如何使用以下五个技巧来修复它。

    1. 确保您输入了正确的URL

    在您尝试任何其他修复之前,我们建议您仔细检查您没有输入错误或在URL中包含任何不必要的内容。例如,一个常见的错误是在不需要时包含“XAMPP”:

    输入错误的localhost URL的示例

    输入错误的localhost URL的示例

    错误的击键是导致此错误的常见原因,但也很容易修复。如果您确定输入了正确的URL并且仍然存在问题,您可以尝试其他一些解决方案。

    2. 检查您的 .htaccess 文件

    丢失的.htaccess文件 也可能导致404错误。因此,确保文件存在于正确的位置很重要,尤其是当您看到“找不到对象”版本的错误时。

    要查找该文件,您可以导航到计算机上的XAMPP文件夹。在此文件夹中,还有一个名为htdocs的文件夹。此文件夹可能是 您最初设置网站时安装WordPress的位置。您应该在那里找到 .htaccess 文件:

    .htaccess文件的位置

    .htaccess文件的位置

    如果您使用的是macOS,该文件仍将位于htdocs文件夹中。但是,您可以通过Applications > Xampp > xamppfiles > htdocs找到它。

    如果该文件不存在,则需要创建一个。为此,请打开您喜欢的文本编辑器并将文件命名为“.htaccess”。您需要粘贴到其中的确切代码可能会因您的设置而异,但应该如下所示:

    # BEGIN WordPress
    RewriteEngine On
    RewriteRule .* – [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
    RewriteBase /
    RewriteRule ^index.php$ – [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    # END WordPress
    # BEGIN WordPress
    RewriteEngine On
    RewriteRule .* – [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
    RewriteBase /
    RewriteRule ^index.php$ – [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    # END WordPress
    # BEGIN WordPress
    RewriteEngine On
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
    RewriteBase /
    RewriteRule ^index.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    # END WordPress

    将文件保存到您为网站创建的文件夹中。即使您没有发现htaccess文件,有时只需将其替换为新文件即可修复错误。

    3.停用和卸载新插件

    当您安装插件时,它们可能会更改您的代码或数据库,从而导致此404错误。从较新的插件开始,您可以尝试停用或卸载它们,看看是否能解决问题。

    可以从本地站点的管理仪表板停用插件。为此,在屏幕左侧的菜单中,单击Plugins > Installed Plugins。要停用一个,请单击 插件名称下的禁用链接:

    禁用WordPress插件

    禁用WordPress插件

    如果您想完全卸载插件,您可以从同一屏幕执行此操作。首先,停用插件,然后点击插件名称下方的红色删除链接:

    禁用插件后删除插件的选项

    禁用插件后删除插件的选项

    即使您最近没有安装任何插件,这也值得尝试,因为插件更新有时会导致问题。 您还可以通过重命名站点目录中的插件文件夹来一次停用所有插件。

    4. 检查您的数据库是否有更改

    即使您卸载了有问题的插件,它对您的站点所做的更改也可能会继续导致问题。如果您怀疑是这种情况,您可能需要检查本地站点的数据库是否有更改。

    要访问数据库,您可以在浏览器中键入http://localhost/phpmyadmin 。或者,从XAMPP控制面板,您可以单击MySQL 旁边的Admin按钮打开phpMyAdmin。

    从XAMPP控制面板打开phpMyAdmin

    您可以从XAMPP控制面板打开phpMyAdmin

    现在您可以单击屏幕顶部的“Databases选项卡。在列表中找到您网站的数据库以查看其中包含的表:

    默认的WordPress数据库表

    默认的WordPress数据库表

    接下来,您需要梳理数据库并查找不应该存在的任何内容。一些插件会将全新的表添加到您的数据库中。要删除不必要的表,请单击其右侧的Drop 链接:

    从WordPress数据库中删除表

    从WordPress数据库中删除表

    大多数插件都会对wp_options 表进行更改,因此您需要查看该条目。您还可以检查核心WordPress表格。虽然插件不应该更改这些表,但这是可能的,特别是如果您安装了一个nulled plugin

    如果您不确定您的数据库或表应该是什么样子,您可能需要创建一个新的WordPress站点。然后,您可以将新数据库与您的数据库进行比较。

    5. 检查你的Apache配置

    如果您在打开PHP文件时遇到问题,则您的Apache配置 可能不正确。更具体地说,可能与Apache尝试使用的端口存在冲突。

    Apache默认使用端口80,但如果您已经在该端口上侦听了某些内容,则可能需要更改它。要查找空闲端口,您可以单击XAMPP控制面板中的Netstat按钮:

    Netstat中的端口列表

    Netstat中的端口列表

    如果端口80已在使用中,或者您只是希望将其保持打开状态,则可以继续选择一个空闲端口号。我们将在此示例中使用“8080”,但您可以使用任何您喜欢的端口。

    接下来,您需要编辑httpd.conf 文件。如果您使用的是 Windows ,您可以在C:xamppapacheconfig中找到它:

    Windows中的httpd文件位置

    Windows中的httpd文件位置

    如果您正在使用macOS,您可以在/etc/apache2目录中找到此文件。您可以使用Finder中的Go to Folder选项找到它。

    找到文件后,继续并在您喜欢的文本编辑器中打开它。您需要编辑两行:

    Listen 80
    ServerName localhost:80
    Listen 80
    ServerName localhost:80
    Listen 80
    ServerName localhost:80

    Listen 端口号更改为8080和将ServerName改为localhost:8080。现在您可以保存并关闭文件。

    此时,您可以重新启动Apache服务器并尝试在浏览器中访问localhost:8080(或您正在使用的任何端口)。如果不成功,则需要编辑http-ssl.conf 文件。Windows用户可以在xampp apache conf extra中找到这个文件。

    Windows中的httpd-ssl文件位置

    Windows中的httpd-ssl文件位置

    再一次,您应该能够通过在Finder的Go to Folder中键入/etc/apache2在macOS上找到此文件。

    找到后,您可以在文本编辑器中打开该文件。您需要在此文件中更新三行:

    Listen 443
    <VirtualHost _default_:443>
    ServerName localhost:443
    Listen 443
    <VirtualHost _default_:443>
    ServerName localhost:443
    Listen 443
    <VirtualHost _default_:443>
    ServerName localhost:443

    找到文件中的每一行并将值更改为“8080”。保存文件后,您可以再次重新启动Apache服务器。现在您应该可以在浏览器中访问localhost:8080了。

    小结

    当您使用XAMPP时,“未找到请求的资源”错误无疑会减慢您的速度。此问题有几个可能的原因。幸运的是,解决它的解决方案并不复杂。

    在这篇文章中,我们介绍了一些可以尝试修复XAMPP中的404错误的方法。您可以首先确保您已正确输入URL,然后从那里继续。运气好的话,你很快回归正常工作。

  • 如何修复MAMP“建立数据库连接时出错”

    如何修复MAMP“建立数据库连接时出错”

    如果您已经创建了一个本地环境(使用MAMP)开发和测试您的WordPress网站,那么在某些时候,您可能会收到“建立数据库连接时出错Error establishing a database connection”消息。获取此通知可能令人费解,但当您知道在哪里查看时,解决方案相当简单。

    在本文中,我们将解释这个错误是什么以及它发生的原因。然后我们将引导您完成如何识别和修复它以恢复您的WordPress站点和数据库之间的连接。

    1. MAMP“建立数据库连接时出错”是什么
    2. MAMP中“建立数据库连接错误”的常见原因
    3. 如何修复MAMP“建立数据库连接时出错”

    MAMP“建立数据库连接时出错”是什么

    WordPress是一个强大的内容管理系统 (CMS),它使您能够创建动态网页,而不仅仅是静态HTML站点。WordPress将网站内容存储在数据库中,页面上的代码在需要时调用该数据库。因此,站点文件和数据库之间的通信至关重要。

    MAMP是一个免费工具,您可以下载(提供高级选项)以在本地计算机而不是Web服务器上运行您的网站。它的名称是它包含的内容的首字母缩写词——macOS、Apache、MySQL和运行WordPress的PHP——以及其他可选工具。在本地安装WordPress 使您能够在开发期间测试站点。

    当尝试使用MAMP建立与数据库的连接时发生错误,通常是因为wp-config.php文件具有不正确的数据库凭据。更具体地说,MAMP中的数据库连接错误表示wp-config.php文件与数据库 之间的变量不正确或不匹配。几个不正确的设置可能会导致此问题。让我们定义每一个。

    MAMP中“建立数据库连接错误”的常见原因

    默认情况下,将WordPress站点连接到数据库的wp-config.php文件中的关键设置是:

    • 数据库名称:“wordpress”(除非您在安装期间重命名)
    • 数据库用户:“root”
    • 数据库密码:“root”
    • 数据库主机:“localhost”

    错误配置的服务器端口也可能导致连接错误。请记住这一点,以防您最初的努力无法清除错误。您可能需要对服务器端口进行一些额外的故障排除。

    如何修复MAMP“建立数据库连接时出错”

    那么,遇到这个错误怎么办呢?您可以使用以下步骤来定位、验证和更正(如有必要)配置设置,以在WordPress和MAMP中的数据库之间重新建立连接。

    第 1 步:找到您的数据库凭证

    您可能会收到一条错误消息,因为您的wp-config.php文件中的设置有误。该文件是您应该首先检查的地方,因为它通常是错误源。这也是一个简单的修复,可以快速解决问题。

    您可以在WordPress站点的主目录中找到wp-config.php文件。对于Windows用户,该文件的默认位置 在您计算机上的C:/MAMP/htdocs/wordpress/文件夹中。对于Mac用户,它位于/Applications/MAMP/htdocs/wordpress/ 文件夹中。

    您可以通过检查其设置来验证WordPress MAMP安装的位置。为此,请打开MAMP应用程序:

    MAMP应用程序

    MAMP应用程序

    您的安装文件夹列在Document Root设置中。

    第 2 步:验证您的数据库登录凭据

    在本地WordPress安装中找到wp-config.php文件后,打开它接下来,向下滚动,直到找到数据库凭据:

    wp-config.php

    wp-config.php文件中列出的WordPress数据库凭据

    将有一组定义:

    • ‘DB_NAME’
    • ‘DB_USER’
    • ‘DB_PASSWORD’
    • ‘DB_HOST’

    验证“DB_NAME”值是否与您的数据库名称匹配。默认情况下它可能是“wordpress”,如上图所示。

    请注意,如果您从“wordpress”更改了默认名称并且您不记得您重命名数据库的内容,那么您可以采用另一种方法。在MAMP中,选择打开起始页 (Windows) 或WebStart  (Mac)。当浏览器打开到MAMP起始页时,导航到Tools菜单下的phpMyAdmin :

    MAMP应用程序开始菜单

    MAMP应用程序开始菜单

    数据库列表将显示在phpMyAdmin的左侧列中。找到您的WordPress数据库的名称(在下图中显示为默认的“wordpress”):

    phpMyAdmin设置屏幕

    phpMyAdmin设置屏幕

    验证(或更正)数据库名称后,您可以向下移动wp-config.php文件中的定义列表,以验证其余数据库设置是否正确。如果您更改了用户名或密码,您可以直接在wp-config.php文件中进行更正。

    默认情况下,“DB_USER”和“DB_PASSWORD”都应设置为“root”。后一个字段由MAMP配置。常规MySQL安装会将密码字段留空(“”),这就是为什么一些指南会建议将其恢复为该值的原因。

    “DB_HOST”应设置为“localhost”。或者,您可能需要使用MAMP指定的端口号将“DB_HOST”配置为这些选项之一

    • ‘DB_HOST’, ‘localhost:8889’
    • ‘DB_HOST’、’127.0.0.1:8889’

    要查看MAMP的指定端口设置,您可以参考步骤3。如果您更正了上述任何设置,请将您的更改保存在wp-config.php文件中,然后再次尝试通过MAMP访问您的网站。

    第 3 步:检查您的端口设置(如有必要)

    如果您仍然收到连接错误,则需要检查MAMP首选项设置中的Server Port在Windows中,MAMP默认使用端口80进行Apache PortNginx Port设置。MySQL Port设置为3306。

    MAMP端口设置屏幕

    MAMP端口设置屏幕

    在Mac上,MAMP默认使用端口8888、8889和7888用于Apache端口Nginx端口MySQL端口设置,以及80和3306用于 Web和MySQL  MAMP默认设置。

    MAMP端口设置

    MAMP端口设置

    您应该在MAMP应用程序设置中验证这些值是否正确(如上图所示)。而已!您应该不再在本地WordPress安装中看到“建立数据库连接时出错” 。

    小结

    当您在MAMP中遇到连接错误时,通常是由于WordPress安装中的wp-config.php文件与MySQL数据库不匹配。通过查看WordPress设置中的信息并将其与数据库凭据进行比较,您可以找到问题并更正设置以重新建立连接。

    在本文中,我们讨论了在使用MAMP时可能会看到“建立数据库连接时出错”消息的常见原因。通常,解决此问题的最简单方法是检查您的wp-config.php文件以确保您的数据库名称、用户名、密码以及主机和端口设置正确。

  • WordPress主题模板层次结构指南

    WordPress主题模板层次结构指南

    如果您想自定义主题或从头开始构建新主题,了解WordPress主题模板层次结构的工作原理非常重要。

    首先,这个WordPress系统有助于保持一切井井有条。一旦您知道所有主题模板文件是什么、它们的作用以及它们的优先级如何,您将能够改变WordPress网站外观的几乎所有方面。

    在本文中,我们将解释WordPress主题模板层次结构是什么以及它是如何工作的。然后,我们将提供每种类型的WordPress页面中涉及的模板文件的完整细分(包括供参考的备忘单),以帮助您充分利用它们。

    1. WordPress主题模板层次结构简介
    2. WordPress主题模板层次结构如何工作
    3. 在哪里找到和更改WordPress主题模板文件
    4. 按页面类型划分的WordPress主题模板层次结构细分
    5. 子主题适合WordPress模板层次结构的位置
    6. 使用WordPress模板标签进行主题开发

    WordPress模板层次结构简介

    通常,非动态网站使用静态HTML和CSS文件来呈现其内容。然而,WordPress是一个基于PHP编程语言的动态平台。每个WordPress站点都会加载多个.php 文件,每个文件都控制特定部分或组件的外观。

    每当您加载某种类型的页面时,内容管理系统 (CMS)都会查找与其对应的模板文件。

    例如,如果您使用WordPress的搜索功能并加载搜索结果页面,CMS将查找两个模板文件:

    1. search.php,它控制搜索结果页面的外观
    2. index.php,这是WordPress在每个层次结构中找不到顶部选项时使用的默认模板文件

    您有权访问的模板文件取决于您使用的主题。所有WordPress主题 都是模板、样式表和其他元素(例如图像)的集合。所以在上面的例子中,如果你使用的主题包含一个search.php模板,WordPress 会找到并加载它。

    在某些情况下,您可能会使用不包含要加载的页面类型的模板文件的主题。这就是WordPress模板层次结构的用武之地。它是一个内置系统,可以告诉 WordPress 要加载哪些模板文件以及以何种顺序加载。

    对于搜索页面,如果WordPress找不到search.php文件,它将向下移动到层次结构中的下一个文件,即index.php。该 文件是模板层次结构中每个分支的最终后备。

    理论上,您可以拥有一个仅包含一个模板文件的功能齐全的主题,即index.php

    但是,在实践中,具有单个模板文件的主题几乎不会包含任何样式自定义,并且每种类型的页面看起来都几乎相同。除非这就是您的目标,否则了解WordPress模板层次结构是您作为主题开发人员可以采取的最重要的步骤之一。

    WordPress模板层次结构如何工作

    您可能知道,WordPress允许您根据要发布的内容使用多种类型的页面。您可以使用七个主要类别:

    1. 首页
    2. 单个文章
    3. 单页
    4. 自定义文章类型
    5. 搜索结果页面
    6. 类别和标签页面
    7. 404错误页面

    这些页面中的每一个都有自己的自定义层次结构,这意味着它使用一组特定的模板文件。

    如果您快速浏览任何主题的文件夹,您通常会发现一组模板文件。以下是博客文章主题目录中列出的模板文件示例:

    WordPress主题目录中列出的模板文件

    WordPress主题目录中列出的模板文件

    这是一个单一的文章页面类型,这意味着它使用single.php文件作为页面上主要内容(博客文章本身)的模板。

    此外,它对每个页面元素都有一个单独的模板文件,其中大部分你应该一眼就能识别出来,包括:

    • Header
    • Footer
    • Comments
    • Sidebar

    重要的是要理解,尽管每种页面类型都有自己的层次结构,但它们也经常共享通用模板文件,例如header.php 和footer.php

    如果您正在构建自己的主题,这意味着您可以为每种类型的页面创建自定义样式,同时还可以构建模板文件以重复使用。

    您还可以为适用于某些页面类型的侧边栏和页脚等元素创建自定义模板文件。这种灵活性完全归功于WordPress对模板的模块化方法。

    当您切换主题时,您看到的布局差异归因于WordPress加载的新模板文件。子主题也在WordPress主题层次结构中发挥作用,我们将很快讨论。

    在哪里找到和更改WordPress模板文件

    .php文件可以包含PHP代码和HTML标记(所有这些都可以编辑)。因此,WordPress模板文件可以像您需要的那样复杂。在许多情况下,WordPress使用的模板文件是它们管理的元素的函数集合。

    举个例子,这里快速浏览一下WordPress官方二〇二一主题使用的header.php模板文件:

    二〇二一主题header模板文件

    二〇二一主题header模板文件

    正如我们所提到的,每个WordPress主题都包含自己的一组模板文件。您可以通过文件传输协议 (FTP) 客户端访问网站根目录中的文件夹来查看您的主题包含哪些模板文件。

    这是以前的WordPress官方主题Twenty Twenty的样子:

    Twenty Twenty主题目录和模板文件

    Twenty Twenty主题目录和模板文件

    默认情况下,WordPress将加载位于主题主目录(wp_content > Themes)或template-parts文件夹中的模板文件。

    如果您计划创建多个模板文件,我们建议您将主页模板保留在主目录中。对于更具体的模板文件,例如全角页面或侧边栏布局,您可以使用子目录。

    掌握完整的WordPress模板层次结构的最佳方法是通过备忘单。在这种情况下,我们将向您展示模板层次结构的可视化概览,由WordPress Codex提供:

    WordPress模板层次结构

    WordPress模板层次结构

    WordPress Codex包含大量有关模板层次结构的信息,因此我们建议为该资源添加书签。现在,让我们深入了解每种页面类型及其使用的模板文件。

    按页面类型划分的WordPress模板层次结构细分

    WordPress 使用七种主要类型的页面。在本节中,我们将讨论它们中的每一个,并为您提供它们使用的模板文件的细分。让我们从头版开始。

    1. 首页模板文件
    2. 单个文章
    3. 单页
    4. 自定义文章类型
    5. 搜索结果页面
    6. 类别和标签页
    7. 404错误页面

    首页模板文件

    您的WordPress主页 是大多数用户访问您的网站时的第一站。实际上,从一个站点到另一个站点的首页布局可能会有很大差异。

    但是,对于基本的首页,WordPress会按顺序查找这三个模板文件:

    1. front-page.php
    2. home.php
    3. index.php

    如果您的主题不包含front-page.php模板文件,WordPress将默认使用第二个选项,依此类推。与往常一样,index.php文件是WordPress沿模板决策树制作的最后一站。

    单个文章

    单个WordPress文章使用单个文章模板层次结构。对于每篇博文的主要内容,WordPress会查找以下文件:

    1. single.php
    2. singular.php
    3. index.php

    但是,如果您查看模板备忘单,您会注意到在某些情况下会出现更复杂的层次结构。

    这是因为WordPress允许您为单个文章和单个类别指定模板文件,如果找不到这些选项中的任何一个,则默认为single.php 。

    除了主模板文件之外,您还有诸如header, footer, sidebars和comments等元素。正如我们之前提到的,这些元素中的每一个都可以有自己的模板文件。

    单页

    发布后,单页是大多数WordPress网站的生计。在大多数情况下,它们使用与您的首页不同的模板,除非两种类型的页面都默认为index.php

    以下是单页模板层次结构的外观:

    1. page.php
    2. singular.php
    3. index.php

    尽管单个文章和页面的模板层次结构相似,但存在一些关键差异。

    首先,当涉及到页面时,WordPress使用自定义文件的get_page_templates() path,您可以使用它来更改或重定向默认页面模板。

    此外,您可以为特定的slug和 ID创建模板。如果您有page-{slug}.phppage-{id}.php文件,WordPress 将尝试按顺序加载每个文件,然后默认为page.php

    自定义文章类型

    您可以为您可能不想与页面或帖子捆绑的各种内容创建自定义文章类型。自定义文章类型为您的内容提供了更高程度的组织,并且它们还具有自己的模板层次结构:

    1. archive-{post_type}.php
    2. archive.php
    3. index.php

    自定义文章类型的模板层次结构不像整页或文章那样复杂。但是,WordPress允许您为每种自定义文章类型创建模板文件,因此它们不必共享相同的确切布局。

    搜索结果页面

    我们已经向您介绍了WordPress用于搜索结果页面的模板层次结构,因此让我们简要回顾一下它的外观:

    1. search.php
    2. index.php

    随着我们远离诸如文章或首页等“复杂”页面类型,WordPress模板层次结构变得更加简单。

    对于搜索页面,您通常不需要在结果本身之外包含太多元素。结构越简单,层次结构通常越短。

    类别和标签页

    尽管许多网站不直接链接到它们,但WordPress会为您的标签和类别生成集合页面。taxonomy中的每个项目也有特定的子页面。

    考虑到具有大型内容库的网站的分类法可能变得多么复杂,这种层次结构涉及比平常更多的“步骤”:

    1. category–{slug}.php
    2. category-{id}.php
    3. category.php
    4. archive.php
    5. index.php

    请注意,标签使用相同的层次结构,除了在所有实例中“标签”替换“类别”。

    理论上,您可以为WordPress网站上的每个类别或标签创建单独的模板文件,并通过slug或ID识别它们。然而,很少有网站真正经历过所有这些麻烦。

    如果您不打算让访问者浏览您的类别页面,请随意默认使用archive.php模板。

    404错误页面

    有时,访问者会尝试访问不存在的页面。发生这种情况时,WordPress将返回404错误页面

    默认情况下,WordPress不提供自定义此页面外观的选项。但是,您可以通过模板文件自己调整它的外观。模板层次结构相当短:

    1. 404.php
    2. index.php

    随着您网站的增长,用户可能会遇到404错误的实例也会随之增长。针对这些情况使用自定义错误页面可以帮助您告知访问者页面未加载的原因,将他们指向另一个方向,并减少挫败感。

    加载404模板文件时,WordPress会在使用默认文件之前查找并加载您的自定义文件。

    子主题适合WordPress模板层次结构的位置

    如果您喜欢自定义WordPress主题,最佳做法是使用子主题。子主题在WordPress模板层次结构中也占有一席之地,但如果您查看我们之前提供的备忘单,它并不明显。

    简而言之,使用子主题会为您使用的任何页面类型在模板层次结构中添加第二层。

    假设您正在使用包含单个页面的自定义模板文件的子主题。以下是WordPress尝试加载文件的顺序:

    1.  子主题内page.php
    2.  父主题中的page.php
    3.  子主题中的singular.php
    4.  父主题中的singular.php
    5.  子主题中的index.php
    6.  父主题中的index.php

    如果WordPress可以在您的子主题中找到模板文件的版本,那么它将加载该版本,即使在父主题中有对应的模板文件也是如此。在某些情况下,您可能会发现自己想要为您使用的主题自定义模板文件,并且在这些情况下利用子主题是完美的。

    与其他类型的自定义一样,当您更新主题模板文件时,您将丢失对它的更改。通过子主题添加这些更改将使您摆脱这种情况。

    使用WordPress模板标签进行主题开发

    在WordPress开发中,您经常会遇到模板标签,这是您可以用来动态生成和获取数据的PHP函数。模板标签通常是模板文件的一部分,但它们不可互换。

    WordPress在其代码中构建了数十个模板标签,您可以在主题开发中使用这些标签。一些例子包括:

    • get_header()
    • get_footer()
    • get_sidebar()
    • get_search_form()
    • 获取模板部分()

    这些标签使您能够从您正在使用的主题中收集模板文件。实际上,这意味着您可以将特定元素添加到主模板文件,例如front-page.phpindex.php

    如果您想要一份可以在WordPress开发中使用的所有模板标签的完整列表,请查看WordPress Codex

    在那里,您将找到有关如何使用每个模板标记、它们的各个参数以及实际代码示例的说明。

    小结

    尽管WordPress模板层次结构乍一看可能看起来很复杂,但它归结为一系列简单的决策树。每当您访问WordPress网站时,CMS都会查看您尝试访问的页面类型,然后使用层次结构来确定要加载的模板文件。

    除了每种页面类型的主要模板之外,您还可以为单独的元素(例如页眉、页脚和侧边栏)提供模板文件。

    这种模块化方法使您可以完全控制网站上每个页面的外观,并帮助您在WordPress开发过程中节省时间。

  • 如何在XAMPP中更改数据库MySQL密码

    如何在XAMPP中更改MySQL密码

    保持在线安全从未如此重要,尤其是对于企业而言。密码选择和维护在安全方面都起着至关重要的作用。不幸的是,它们经常被忽视,尤其是在XAMPP等本地安装中。

    但是,本地软件同样容易受到恶意活动的攻击,默认情况下,XAMPP通常没有MySQL数据库的root密码。添加一个并定期更改它可以帮助保护您的数据安全并防止浪费数小时的辛勤工作。

    在本文中,我们将解释为什么您可能想要更改您的XAMPP数据库MySQL密码。然后,我们将引导您了解可以使用的三种不同方法。

    1. 为什么您可能想要更改MySQL密码
    2. 如何在XAMPP中更改MySQL密码

    为什么您可能想要更改MySQL密码

    您可能想要(或需要)更改MySQL密码的原因有很多。首先也是最重要的:当您在计算机上安装XAMPP时,“root”用户的密码为空。这意味着默认情况下此帐户没有安全性。

    root用户本质上是管理员帐户——它可以不受限制地访问系统中的所有命令和文件。因此,对这个用户没有密码保护是一个主要的安全漏洞。任何人都可以登录该用户帐户并在您的本地安装上编辑文件。

    除此之外,定期更改密码也是一种明智的安全做法。这样做有助于防止恶意活动,尤其是当您在多个地方使用相同的密码时。定期更改密码可以帮助抵消没有这种做法可能出现的问题。

    最后,您可能只是忘记了密码,因此无法访问XAMPP本地环境WordPress安装所需的文件或功能。不管是什么原因,能够更改MySQL密码是一项可以派上用场的宝贵技能。

    如何在XAMPP中更改MySQL密码

    与大多数WordPress任务一样,有多种方法可以更改MySQL密码。您应该使用的方法将取决于您需要做什么以及您最熟悉的界面:命令行、图形用户界面 (GUI) 或文本文件。考虑到这一点,让我们看一下在XAMPP中更改MySQL密码的三种方法。

    1. 使用XAMPP环境的Shell更改您的MySQL密码

    使用XAMPP的shell命令通常是更改MySQL密码的最简单、最快捷的方法。它确实涉及使用命令行,起初这似乎令人生畏。

    然而,它实际上相当简单。如果您忘记了现有的MySQL密码并需要重置它,这也是您想要使用的方法。

    请注意,无论您使用的是Windows还是macOS,这些命令都是相同的。由于这是一个特定于XAMPP的独特shell,平台之间的任何典型差异都将不适用。

    首先,启动您的XAMPP控制面板并单击右侧的Shell按钮。

    使用XAMPP shell更改root密码

    使用XAMPP shell更改您的root密码

    这将打开一个带有命令提示符的新窗口。输入以下命令并按Enter/Return键:

    mysqladmin -u root password
    mysqladmin -u root password
    mysqladmin -u root password

    shell将提示您输入新密码。再次按Enter/Return  ,系统会要求您确认新密码。

    一旦你完成了这些,你就完成了并且可以关闭shell窗口。

    2. 通过phpMyAdmin更改XAMPP环境的MySQL密码

    第二种方法涉及使用phpMyAdmin GUI更改您的XAMPP MySQL密码。这种技术相对简单,但一般不如命令行方法快。

    首先,您需要访问phpMyAdmin界面。拉起XAMPP控制面板并单击MySQL行中的Admin:

    在XAMPP中打开phpMyAdmin

    在XAMPP中打开phpMyAdmin

    PhpMyAdmin将在浏览器窗口中打开:

    phpMyAdmin界面

    phpMyAdmin界面

    如果系统要求您登录,请使用用户名“root”并输入您的root密码。如果您还没有设置,可以将其留空。

    接下来,导航到主菜单栏中的User accounts部分,并在列表中找到localhost的root用户:

    phpMyAdmin中的root用户

    phpMyAdmin中的root用户

    接下来,您可以单击root用户旁边的Edit privileges,然后选择页面顶部的Change password

    在phpMyAdmin中启动密码更改

    在phpMyAdmin中启动密码更改

    在下一个屏幕上,只需输入您要使用的密码:

    在phpMyAdmin中更改root密码

    在phpMyAdmin中更改root密码

    完成后,您可以单击右下角的“Go按钮以保存更改。

    3. 通过编辑config.inc.php文件更改XAMPP环境MySQL密码

    如果您发现自己处于知道密码正确的情况,但无论出于何种原因它都不起作用,那么这就是适合您的方法。它涉及打开一个文本文件并直接在其中编辑密码。

    首先,打开XAMPP控制面板并单击窗口右侧的Explorer按钮:

    XAMPP控制面板中的Explorer按钮

    XAMPP控制面板中的Explorer按钮

    这将在XAMPP文件夹中启动文件浏览器。接下来,您可以打开phpMyAdmin文件夹并找到config.inc.php 文件:

    Windows中的config.inc.php文件

    Windows中的config.inc.php文件

    您可以在您喜欢的文本编辑器中打开此文件,或者只需双击它以在默认程序中打开它。

    您要查找的行是$cfg['Servers'][$i]['password'] = 'YourPassword';. 这是它的样子:

    在config.inc.php文件中编辑MySQL密码行

    在config.inc.php文件中编辑MySQL密码行

    找到它后,您可以在单引号之间输入所需的密码,然后保存文件。这里的所有都是它的!

    小结

    无论您是忘记了XAMPP的MySQL密码还是想提高安全性,都可以使用多种方法来更改密码。更新您的密码有助于保护您的数据安全,并提供额外的一层防御恶意活动。

    在本文中,我们介绍了如何使用三种方法在XAMPP安装中更改MySQL密码,包括使用命令行、通过phpMyAdmin GUI和直接编辑文件。您可以选择最适合您的工作流程的任何一个。

  • 如何解决XAMPP中的403错误

    如何解决XAMPP中的403错误

    如果您使用XAMPP本地开发环境来运行WordPress网站,您可能会不时遇到问题。尝试访问数据库时可能遇到的最常见问题之一是“错误403”,也称为“XAMPP访问禁止错误”。

    简而言之,XAMPP产生403错误意味着您没有必要的权限来访问或编辑数据库。在本文中,我们将讨论XAMPP是什么,为什么会出现此错误,以及如何在Windows和macOS设备上修复它。

    1. XAMPP简介
    2. XAMPP环境403错误概述
    3. 如何解决XAMPP产生的403错误(在Windows和macOS中)

    XAMPP简介

    XAMPP是一个本地开发环境。通过安装XAMPP,您还可以设置托管和运行本地WordPress网站所需的所有软件。

    XAMPP主页

    XAMPP主页

    您可能知道,WordPress有几个系统要求,而XAMPP满足所有这些要求。您可以使用XAMPP在您的计算机上安装的软件堆栈包括:

    • Apache这是一种服务器软件,可让您在计算机上托管和服务网站。
    • MariaDB 这是一个数据库软件,它为WordPress提供了一个保存信息的地方,因此可以根据需要再次访问它。
    • PHP  WordPress建立在PHP编程语言之上,因此必须在您的服务器上设置软件。
    • Perl虽然WordPress不使用Perl编程语言,但它是XAMPP为您配置的软件堆栈的一部分。

    您可能在浏览网页时遇到过403错误。错误代码表示您没有访问特定文件或页面的必要权限:

    来自Google Chrome的常规错误403消息

    来自Google Chrome的常规错误403消息

    但是,在使用XAMPP运行本地WordPress网站的上下文中,403错误具有不同的含义。如果您看到一条消息“Access forbidden!“,它通常与XAMPP数据库有关。

    XAMPP环境403错误概述

    通常,当您尝试通过浏览器访问本地数据库时,XAMPP会出现错误403。在正常情况下,您可以使用任何Web浏览器访问http://localhost/phpmyadmin地址:

    phpMyAdmin控制面板

    phpMyAdmin控制面板

    如果您没有访问数据库的必要权限,您将遇到错误403,内容如下:

    “新的XAMPP安全概念:只能从本地网络访问请求的目录。可以在文件httpd-xampp.conf中配置此设置。”

    就错误消息而言,这条信息相当丰富,因为它准确地告诉您解决问题需要做什么。但是,在我们开始故障排除之前,请务必注意,当XAMPP中存在冲突的端口配置时,通常会发生错误403。

    通常,绕过该问题的最简单方法是按照错误消息中的说明进行操作。在这种情况下,就是修改httpd-xampp.conf文件。

    如何解决XAMPP环境403错误 (在Windows和macOS中)

    XAMPP适用于Windows、macOS和Linux。在下面的部分中,我们将向您展示如何解决Windows和macOS中的XAMPP开发环境的错误 403。如果您使用的是Linux发行版,则可以按照macOS说明进行操作。

    如何对Windows中的XAMPP环境403错误进行故障排除

    要开始使用,请继续启动XAMPP,然后启动您网站使用的所有服务。如果您正在运行WordPress网站,那将是Apache和MySQL。

    XAMPP控制面板

    XAMPP控制面板

    两个服务都运行后,您可以单击Apache行中的Config按钮,然后选择Apache (httpd-xampp.conf)选项:

    打开httpd-xampp.conf文件

    打开httpd-xampp.conf文件

    现在httpd-xampp.conf文件将通过您的默认文本编辑器打开。打开文件后,使用搜索功能查找“phpMyAdmin”  您应该会看到如下所示的片段:

    httpd-xampp.conf文件

    httpd-xampp.conf文件

    找到它后,您可以继续删除“Require local”的文本,并将其替换为“Require all granted”:

     

    修改httpd-xampp.conf

    修改httpd-xampp.conf使其不会阻止对数据库的访问

    保存对httpd-xampp.conf的更改并关闭文件。然后您可以从XAMPP控制面板重新启动Apache和MySQL服务。一旦服务再次运行,您可以通过在浏览器中导航到localhost/phpmyadmin来尝试再次访问您的数据库。

    如何对macOS中的XAMPP环境403错误进行故障排除

    在macOS上修复XAMPP环境的403错误涉及与Windows设备几乎相同的步骤。但是,访问httpd-xampp.conf文件并不完全相同,因为XAMPP控制面板看起来有点不同:

    XAMPP的macOS控制面板

    XAMPP的macOS控制面板

    尽管风格不同,但访问您需要的文件仍然很简单。以下是要遵循的五个步骤:

    1. 转到XAMPP控制面板中的Volumes选项卡。
    2. 选择屏幕顶部的安装选项。
    3.  一旦变为可选状态,请单击Mount旁边的Explore按钮。
    4. 在弹出的资源管理器窗口中,导航到etc/extra 
    5. 打开http-xampp.conf文件。

    打开文件后,您可以在其中查找“phpmyadmin”。您看到的代码段应如下所示:

    Alias /phpmyadmin “C:/xampp/phpMyAdmin/”
    <Directory “C:/xampp/phpMyAdmin”>
    AllowOverride AuthConfig
    Require local
    ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
    </Directory>
    Alias /phpmyadmin “C:/xampp/phpMyAdmin/”
    <Directory “C:/xampp/phpMyAdmin”>
    AllowOverride AuthConfig
    Require local
    ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
    </Directory>
    Alias /phpmyadmin "C:/xampp/phpMyAdmin/"
    <Directory "C:/xampp/phpMyAdmin">
    AllowOverride AuthConfig
    Require local
    ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
    </Directory>

    接下来,您可以将“Require local”部分替换为“Require all granted”,并将更改保存到文件中。现在返回XAMPP控制面板,转到“Services”选项卡,然后单击Restart All。备份所有XAMPP服务后,您应该能够毫无问题地访问您的数据库。

    小结

    能够访问您网站的数据库至关重要,无论您使用的是实时服务器还是本地开发环境(例如XAMPP)。尽管XAMPP发生错误403可能很烦人,但无论您使用的是Windows、macOS还是Linux,都可以轻松解决。

    您所要做的就是编辑XAMPP的httpd-xampp.conf文件以确保每个人都可以访问phpMyAdmin。然后403错误应该立即消失。

  • Brotli压缩:GZIP压缩替代方案

    Brotli压缩:GZIP压缩替代方案

    速度对于任何网站都很重要。在网络追求快速加载时间的过程中,我们有许多不同的技术可以帮助我们。一种方法是在不影响其功能的情况下最小化您的站点将使用的底层代码。GZIP压缩是执行此操作的一种方法,但Brotli压缩是另一种引起注意的新兴方法。

    这是一个由Google开发的解决方案,看起来比GZIP压缩(以及替代)提供了许多好处。本文中的详细信息将准确介绍该技术所提供的功能,但Brotli压缩快速且高效——它满足了您研究它所需的所有条件。

    在本教程中,我们将研究Brotli压缩并向您展示如何检查您的站点是否使用它,以及如何在需要时启用它。首先,我们将把Brotli放在压缩算法空间中,并讨论为什么要使用它而不是其他解决方案。

    1. 网络数据压缩
    2. Brotli压缩
    3. Brotli压缩与GZIP压缩
    4. 如何检查您的网站是否使用Brotli压缩
    5. 如何为您的站点启用Brotli压缩

    网络数据压缩

    在最基本的形式中,数据压缩采用网站或应用程序的代码,并最小化文件大小。这使您可以在网络上移动更轻的文件,并减少加载和呈现网站所需的时间。您会发现有很多方法可以根据您使用的文件类型来压缩数据。

    一种常见的方法是“缩小”。这是一种算法去除您网站代码中一些多余元素的地方。这个想法是缩进、注释、空格等方面会增加文件大小,从而增加加载时间。

    在大多数情况下,删除这些元素不会影响用户体验 (UX)。但是,对于必须编译和渲染代码的计算机来说,它确实使事情变得更加简单。例如,以这组代码为例:

    define( ‘WP_INSTALLING’, true );
    /** Sets up the WordPress Environment. */
    require __DIR__ . ‘/wp-load.php’;
    require __DIR__ . ‘/wp-blog-header.php’;
    if ( ! is_multisite() ) {
    wp_redirect( wp_registration_url() );
    die();
    }
    $valid_error_codes = array( ‘already_active’, ‘blog_taken’ );
    define( ‘WP_INSTALLING’, true );
    /** Sets up the WordPress Environment. */
    require __DIR__ . ‘/wp-load.php’;
    require __DIR__ . ‘/wp-blog-header.php’;
    if ( ! is_multisite() ) {
    wp_redirect( wp_registration_url() );
    die();
    }
    $valid_error_codes = array( ‘already_active’, ‘blog_taken’ );
    define( 'WP_INSTALLING', true );
    /** Sets up the WordPress Environment. */
    require __DIR__ . '/wp-load.php';
    require __DIR__ . '/wp-blog-header.php';
    if ( ! is_multisite() ) {
    wp_redirect( wp_registration_url() );
    die();
    }
    $valid_error_codes = array( 'already_active', 'blog_taken' );

    上面的代码使用空格和回车等元素使其易于阅读,但计算机不需要这些元素来理解核心代码。更重要的是,这些批次的空格和换行符将占用宝贵的空间,删除这些空间可以提高性能。

    如果你最小化这段代码,它看起来完全不同:

    define( ‘WP_INSTALLING’, true ); /** Sets up the WordPress Environment. *
    / require __DIR__ . ‘/wp-load.php’;
    require __DIR__ . ‘/wp-blog-header.php’;
    if ( ! is_multisite() ) {
    wp_redirect( wp_registration_url() );
    die();
    }
    $valid_error_codes = array( ‘already_active’, ‘blog_taken’ );
    define( ‘WP_INSTALLING’, true ); /** Sets up the WordPress Environment. *
    / require __DIR__ . ‘/wp-load.php’;
    require __DIR__ . ‘/wp-blog-header.php’;
    if ( ! is_multisite() ) {
    wp_redirect( wp_registration_url() );
    die();
    }
    $valid_error_codes = array( ‘already_active’, ‘blog_taken’ );
    define( 'WP_INSTALLING', true ); /** Sets up the WordPress Environment. *
    / require __DIR__ . '/wp-load.php';
    require __DIR__ . '/wp-blog-header.php';
    if ( ! is_multisite() ) {
    wp_redirect( wp_registration_url() );
    die();
    }
    $valid_error_codes = array( 'already_active', 'blog_taken' );

    但是,此代码的基本功能仍然相同。

    您会发现其他文件类型也有压缩数据的方法。例如,图像通常需要大量压缩来减小尺寸,而不会降低图像本身的质量:

    优化图像的示例

    优化图像的示例

    GZIP压缩是最小化文件包大小的标准方法——想想ZIP或Linux包等.tar包。但到目前为止,还没有真正的替代品。稍后我们将更多地讨论为什么应该存在替代方案,但首先让我们向您介绍GZIP的“竞争对手”。

    Brotli压缩

    简而言之,Broti是一种数据压缩算法。但是,如果这就是我们不得不说的全部内容,那么就没有理由对其进行调查。

    它提供“无损”压缩,由Google在MIT许可下开发。该公司通常处于网络推进技术的最前沿,因此,Brotli希望采用GZIP的做法并对其进行改进,并为用户和网站提供增强的体验也就不足为奇了。

    Brotli压缩使用与GZIP压缩相同的核心基础技术,即:

    事实上,如果您将这两种技术结合起来,您将获得DEFLATE作为GZIP和Brotli压缩基础的格式。这是我们在关于GZIP压缩的帖子中深入探讨的内容。

    简而言之,未压缩文件通过LZ77和Huffman算法运行,作为将它们压缩为Brotli格式的DEFLATE过程的一部分。从那里,一个INFLATE进程将在必要时再次解压缩文件。

    尽管Brotli目前是GZIP的主要竞争者,但还有其他类似的技术也使用DEFLATE. 在下一节中,我们将讨论是什么让Brotli脱颖而出。

    Brotli压缩与GZIP压缩

    如前所述,Brotli和GZIP都使用DEFLATE方法来压缩(和解压缩)数据。这可能会使许多人感到困惑,因为仅此一项并不能保证转换。

    然而,谷歌正在DEFLATE的基础上提供增强的技术,并将数据压缩到更高、更快的标准。

    Brotli如何使用字典改进数据压缩

    数据压缩格式的一个技术方面是Brotli压缩使用数据字典中现有的已知语言和文本来使用其算法的方式。

    开发人员将使用键值对字典来存储数据,因为它高效、灵活且可扩展。下面是PHP字典(称为“数组”)的样子:

    $cats = get_categories(
    array(
    ‘taxonomy’ => ‘link_category’,
    ‘hierarchical’ => 0,
    ‘include’ => $link_cat,
    )
    );
    $cats = get_categories(
    array(
    ‘taxonomy’ => ‘link_category’,
    ‘hierarchical’ => 0,
    ‘include’ => $link_cat,
    )
    );
    $cats = get_categories(
    array(
    'taxonomy' => 'link_category',
    'hierarchical' => 0,
    'include' => $link_cat,
    )
    );

    虽然GZIP不使用字典,但Brotli使用两个.

    Brotli的静态词典

    第一个是作为HTML、CSS和JavaScript文本参考的常用代码术语的静态(即预定义)字典。

    有六种不同语言的13,000多个单词,Brotli将使用这些作为代码中点的引用。这不是一个精确的类比,但它类似于WordPress钩子引用更大的代码套件的方式。

    因此,编码器不必逐字节筛选代码。相反,它可以作用于引用,从字典中提取定义,然后继续下一个。

    您还会发现字典中有真实世界的短语以及不会经常看到压缩的代码。这有助于一些标签(例如<HTML>type="text/javascript"参数)进行一些压缩,并为您带来更大的收益。

    字典中也有一些“转换”:部分、不完整和其他类型的短语,带有新的前缀、后缀或大小写成为一个全新的词——例如,“Work”转换为“Working”或“html” 转换为“HTML”。

    Brotli的动态词典

    动态字典从源头解析内容和代码,这对较小的设备有好处,但对较大的文件不太好。它也称为“滑动窗口”,大小可达16MB。这是压缩算法“缓存”一些最新数据以引用它的地方。它是超动态的,因为它不断变化。

    如果将此与大约32KB的GZIP滑动窗口进行比较,您会发现实时解析和压缩的范围非常大。事实上,最典型的做法是使用大约4MB的Brotli滑动窗口,与竞争算法相比,这仍然是巨大的。

    Brotli压缩与GZIP压缩:性能和支持

    谈到纯用户数,GZIP压缩仍然是第一位的。然而,Brotli压缩每天都有更多的使用。这部分是由于主要浏览器采取了更广泛的采用措施;基于Chromium的浏览器的兴起也有帮助。

    Can I Use…网站记录了浏览器采用的技术,并提供了各种历史记录。该网站指出,超过95%的浏览器在当前写作时使用Brotli压缩,包括所有主要版本。

    Brotli兼容情况

    The Can I Use…查看Brotli兼容情况。

    在我们的GZIP压缩文章中,我们注意到一个基准测试,与竞争算法相比,Brotli具有更好的压缩比,但在压缩和解压缩时间方面落后:

    多种不同算法之间的压缩性能比较

    多种不同算法之间的压缩性能比较(来源:OpenCPU)。

    然而,Squash基准测试显示了一个不同的故事——一个更微妙的故事。真正的收获是,总体而言,Brotli比GZIP更灵活,压缩比普遍更高。

    以下是Squash Benchmarks调查结果的摘要:

    • Brotli在每个压缩级别都有更好的压缩比(即它产生更小的压缩文件)。
    • 虽然GZIP在大多数情况下确实在速度上击败了Brotli,但您压缩的级别会影响您将看到的结果。

    Paul Calvano的细分提供了更多细节,但关键是Brotli需要更多CPU能力来提供更大的文件压缩系数。这显示在最高和最低压缩级别。Cloudflare的基准测试支持这一点:文件更小,压缩速度数字更接近。

    此外,请考虑一些测试工具,如Pingdom和一些内容交付网络 (CDN)尚不支持Brotli。这可能会歪曲其他人收集的有关 Brotli 运作方式的数据。如果您确实运行测试,您可能会看到“假阴性”:更高的页面速度数字忽略了您使用的文件压缩。

    Brotli压缩的好处

    到目前为止,有很多关于Brotli压缩的信息。但是,我们可以总结一下您为什么应该选择Brotli而不是GZIP:

    1. 它采用与GZIP相同的技术,并使用现代方法对其进行增强。
    2. Brotli基于字典的解析意味着它可以将更多文件压缩到更深层次。
    3. 虽然与GZIP相比,Brotli需要更多的计算能力,但结果意味着文件更小。
    4. 在大多数Web主机使用的压缩级别——诸如四级或五级之类的中等压缩级别——Brotli的性能比GZIP更好,而且毫不费力。
    5. 你会发现 Brotli 在浏览器中几乎得到了普遍支持,如果不是你习惯的一些基准测试工具的话。
    6. Brotli是免费使用和开源的。如果您使用与Broti兼容的CDN,例如Cloudflare ,这是一个优势。

    值得注意的是,Cloudflare在其所有服务器上都使用Brotli压缩。事实上,它使用了经过修改和优化的Brotli版本,让您在速度和文件传递方面获得更多收益。

    如何检查您的网站是否使用Brotli压缩

    因为Brotli压缩还不是标准的(虽然它几乎就在那里),你可能想知道你的网站是否使用它。有几种方法可以解决这个问题。

    1.使用在线工具

    检查您的网站是否使用Brotli压缩的最简单方法是通过在线工具。虽然有一些可供选择,但您会想要一些快速且易于使用的东西,它还会为您提供大量有关您的设置的信息。

    Gift of Speed是我们检查Brotli压缩的选择。

    Gift of Speed网站

    Gift of Speed网站

    它将确定您的站点是使用GZIP、Brotli还是根本不使用压缩,并提供一些其他指标来帮助您决定下一步该做什么。这些指标提供了重要的洞察力,因为您不仅要考虑您网站的服务器是否使用了正确的压缩“风格”。

    构成网站的元素很多,甚至还有第三方库和依赖项。您可能会选择使用CDN为它们提供服务,如果是这样,这也需要使用Brotli压缩以获得最佳性能。

    如果您使用Gift Of Speed测试单个资产,您可以查看Server值以了解其服务方式。

    Cloudflare资产的Gift Of Speed结果页面

    Cloudflare资产的Gift Of Speed结果页面

    因此,每个站点还将在整个链和服务器架构中使用Brotli压缩。

    2.检查使用浏览器的开发工具

    大多数开发人员都知道,浏览器提供了一些出色的工具来帮助您进行各种与Web相关的调查和故障排除。您可以快速检查您的网站(或特定资产)是否使用Brotli压缩。

    对于Brave、Edge、Firefox或Chrome等所有主要浏览器,您可以前往Network > All屏幕。

    首先,您不会看到任何与内容标题相关的内容——您需要从左侧选择资产或请求。如果您继续查看并向下滚动列表,您将看到一个面板打开,该面板默认为Headers信息。

    在这里,向下滚动输出,直到看到content-encoding: br行:

    Brave的开发工具,显示该站点启用了Brotili压缩

    Brave的开发工具,显示该站点启用了Brotili压缩

    简而言之:如果您看到content-encoding: br,这表明Brotli在该站点上处于活动状态。

    如何为您的站点启用Brotli压缩

    在最后几节中,我们将向您展示为您的站点启用Brotli压缩的多种不同方法。

    1.使用WordPress插件

    几乎每个WordPress网站都会使用至少一个插件——通常更多取决于网站需要的功能。缓存是插件的一种用例,周围有很多。然而,并不是所有的都可以让你启用Brotli压缩,所以你需要明智地选择并准备好切换你喜欢的解决方案。

    在对站点进行任何更改之前,请记住进行完整备份,以防以后需要恢复。对于这种方法,我们将使用W3 Total Cache,因为它很容易找到正确的设置。

    您需要前往WordPress中的Performance>Browser Cache:

    W3 Total Cache“浏览器缓存:链接

    W3 Total Cache“浏览器缓存:链接

    此屏幕显示两个设置。您要选择的是Enable HTTP (brotli) Compression

    在W3 Total Cache中启用Brotli压缩

    在W3 Total Cache中启用Brotli压缩

    在这些情况下,您需要采用另一种方法。

    2. 在服务器上启用Brotli

    在选择服务器类型时,Nginx与Apache是一场长期的战斗,(目前)前者正在获胜。无论如何,这两种服务器类型都可以启用Brotli压缩,并且每种都有不同的方法。

    在研究手动方法之前,您应该了解一些先决条件:

    • 您需要了解如何访问特定服务器的配置文件。
    • 命令行知识将是有益的,尤其是在涉及Apache服务器时。要运行任何命令,您需要成为具有sudo特权的root用户。
    • 您可能需要一个文本编辑器,但对于这样的快速更改,您应该没问题。
    • 在某些情况下,您需要将您的登录凭据作为服务器本身的安全外壳 (SSH) 用户。您可以在主机控制面板中找到这些,或联系支持人员询问。

    如果您对手动方法有任何疑问,我们建议您考虑另一种选择,或联系您的房东寻求帮助。无论如何,我们将依次简要概述每个服务器的过程,从Nginx开始。

    Nginx

    要在Nginx服务器上启用Brotli压缩,您首先需要找到nginx.conf文件。它将是几个位置之一:

    • /usr/local/nginx/conf
    • /etc/nginx
    • /usr/local/etc/nginx

    打开文件后,在底部添加以下内容:

    brotli on;
    brotli_static on;
    brotli_comp_level 9; # You can change this from 1–11. 4–9 offers good performance balance.
    brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;
    brotli on;
    brotli_static on;
    brotli_comp_level 9; # You can change this from 1–11. 4–9 offers good performance balance.
    brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;
    brotli on;
    brotli_static on;
    brotli_comp_level 9; # You can change this from 1–11. 4–9 offers good performance balance.
    brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;

    该套件将打开Brotli并使用它来提供静态文件。brotli_comp_level设置是您可以根据您的用例和需求更改的设置。较高的数字提供更好的压缩平衡与较低性能的站点。

    Apache

    由于Apache在配置方面非常灵活,因此您可以启用Brotli压缩而无需大惊小怪。

    为此,请按照下列步骤操作:

    1. sudo以root用户身份使用命令提示符或终端应用程序登录到您的服务器。
    2. 运行a2enmod brotli命令以打开压缩。
    3. 在Apache VirtualHost或您的服务器配置中,添加AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript行以设置您想要压缩的正确文件类型。

    虽然Apache不支持静态压缩,但您可以使用BrotliCompressionQuality LEVEL-NUMBER 行更改您提供的Brotli压缩级别。但是,您需要将“LEVEL-NUMBER”占位符替换为1-11之间的数字。

    3. 使用支持的Web主机

    为您的站点启用Brotli压缩的最直接方法是确保您的主机默认执行此操作。

    您需要检查您选择的主机是否提供Brotli压缩,以及您需要将其配置到什么级别。为了运行性能最高、最稳定、最安全的网站,良好的托管是必不可少的。

    小结

    数据压缩是开发和使用现代网络的必要组成部分。由于您将使用丰富而复杂的文件类型来拼凑一个网站,因此文件大小可能会飙升。所有这些都需要某种形式的压缩。

    到目前为止,典型的方法一直是GZIP,但现在有一个新的孩子。

    Brotli压缩基于与GZIP相同的技术基础,但包括一些性能增强优势。正如我们所讨论的,它使用上下文映射来更快地处理压缩请求,以及使用动态填充的字典。这比GZIP所能提供的要大得多,而且还让移动用户也可以从压缩中受益。

  • 学习如何驯服React的useCallback钩子

    学习如何驯服React的useCallback钩子

    React.js近年来广受欢迎,这已经不是什么秘密了。它现在是许多互联网上最杰出的参与者(包括Facebook和WhatsApp)的首选JavaScript库。

    它兴起的主要原因之一是在16.8版本中引入了钩子。React钩子允许您在不编写类组件的情况下利用React函数。现在,带有钩子的功能组件已成为开发人员使用React的首选结构。

    在这篇博文中,我们将深入研究一个特定的钩子useCallback——因为它涉及函数式编程的一个基本部分,即记忆化。您将确切地知道如何以及何时使用useCallback钩子并充分利用其性能增强功能。

    1. 什么是Memoization?
    2. 渲染和反应
    3. React useCallback的性能优势
    4. React useCallback的缺点
    5. React使用回调示例

    什么是Memoization?

    Memoization是当一个复杂的函数存储它的输出以便下次使用相同的输入调用它时。它类似于缓存,但在本地级别上。它可以跳过任何复杂的计算并更快地返回输出,因为它已经计算过了。

    这会对内存分配和性能产生重大影响,而这种压力正是useCallback钩子的目的所在。

    React的useCallback与useMemo

    在这一点上,值得一提的是,useCallback与另一个名为useMemo的钩子很好地配对。我们将讨论它们,但在这篇文章中,我们将把重点放在useCallback主要话题上。

    关键区别在于useMemo返回一个记忆值,而useCallback返回一个记忆函数。这意味着useMemo用于存储计算值,同时useCallback返回一个您可以稍后调用的函数。

    这些钩子会给你一个缓存的版本,除非它们的依赖项之一(例如状态或道具)发生变化。

    让我们看一下这两个函数的作用:

    import { useMemo, useCallback } from ‘react’
    const values = [3, 9, 6, 4, 2, 1]
    // This will always return the same value, a sorted array. Once the values array changes then this will recompute.
    const memoizedValue = useMemo(() => values.sort(), [values])
    // This will give me back a function that can be called later on. It will always return the same result unless the values array is modified.
    const memoizedFunction = useCallback(() => values.sort(), [values])
    import { useMemo, useCallback } from ‘react’
    const values = [3, 9, 6, 4, 2, 1]
    // This will always return the same value, a sorted array. Once the values array changes then this will recompute.
    const memoizedValue = useMemo(() => values.sort(), [values])
    // This will give me back a function that can be called later on. It will always return the same result unless the values array is modified.
    const memoizedFunction = useCallback(() => values.sort(), [values])
    import { useMemo, useCallback } from 'react'
    const values = [3, 9, 6, 4, 2, 1]
    // This will always return the same value, a sorted array. Once the values array changes then this will recompute.
    const memoizedValue = useMemo(() => values.sort(), [values])
    // This will give me back a function that can be called later on. It will always return the same result unless the values array is modified.
    const memoizedFunction = useCallback(() => values.sort(), [values])

    上面的代码片段是一个人为的示例,但显示了两个回调之间的区别:

    1. memoizedValue会变成数组[1, 2, 3, 4, 6, 9]。只要values变量保持不变,memoizedValue它就会保持不变,并且永远不会重新计算。
    2. memoizedFunction将是一个返回数组的函数[1, 2, 3, 4, 6, 9]

    这两个回调的好处是它们会被缓存并一直存在,直到依赖数组发生变化。这意味着在渲染时,它们不会被垃圾收集。

    渲染和React

    为什么在React中记忆很重要?

    它与React如何渲染你的组件有关。React使用存储在内存中的虚拟DOM来比较数据并决定更新什么。

    虚拟DOM帮助React提高性能并让您的应用程序保持快速。默认情况下,如果您的组件中的任何值发生更改,整个组件将重新渲染。这使得React对用户输入具有“反应性”,并允许屏幕更新而无需重新加载页面。

    您不想渲染组件,因为更改不会影响该组件。这就是通过useCallbackuseMemo进行记忆的地方。

    当React重新渲染你的组件时,它也会重新创建你在组件中声明的函数。

    请注意,当比较一个函数与另一个函数的相等性时,它们总是为假的。因为函数也是一个对象,所以它只会等于它自己:

    // these variables contain the exact same function but they are not equal
    const hello = () => console.log(‘Hello Matt’)
    const hello2 = () => console.log(‘Hello Matt’)
    hello === hello2 // false
    hello === hello // true
    // these variables contain the exact same function but they are not equal
    const hello = () => console.log(‘Hello Matt’)
    const hello2 = () => console.log(‘Hello Matt’)
    hello === hello2 // false
    hello === hello // true
    // these variables contain the exact same function but they are not equal
    const hello = () => console.log('Hello Matt')
    const hello2 = () => console.log('Hello Matt')
    hello === hello2 // false
    hello === hello // true

    换句话说,当React重新渲染你的组件时,它会将在你的组件中声明的任何函数都视为新函数。

    这在大多数情况下都很好,简单的函数很容易计算并且不会影响性能。但是其他时候,当您不希望该功能被视为新功能时,您可以依靠useCallback来帮助您。

    你可能会想,“我什么时候不希望一个函数被视为一个新函数?” 好吧,在某些情况下useCallback更有意义:

    1. 您将函数传递给另一个也被记忆的组件(useMemo
    2. 你的函数有一个需要记住的内部状态
    3. 您的函数是另一个钩子的依赖项,例如useEffect

    React useCallback的性能优势

    如果useCallback使用得当,它可以帮助加速您的应用程序并防止组件在不需要时重新渲染。

    例如,假设您有一个组件,它获取大量数据并负责以图表或图形的形式显示该数据,如下所示:

     

    使用React组件生成的条形图

    使用React组件生成的条形图

     

    假设您的数据可视化组件的父组件重新渲染,但更改的道具或状态不会影响该组件。在这种情况下,您可能不想或不需要重新渲染它并重新获取所有数据。避免这种重新渲染和重新获取可以节省用户的带宽并提供更流畅的用户体验。

    React useCallback的缺点

    虽然这个钩子可以帮助你提高性能,但它也有它的缺陷。在使用useCallback(和useMemo)之前,需要考虑以下几点:

    • 垃圾收集: React将丢弃其他尚未记忆的函数以释放内存。
    • 内存分配:与垃圾回收类似,你拥有的记忆功能越多,需要的内存就越多。另外,每次你使用这些回调时,React中都有一堆代码需要使用更多的内存来为你提供缓存的输出。
    • 代码复杂性:当您开始在这些钩子中包装函数时,您会立即增加代码的复杂性。现在需要更多地了解为什么使用这些钩子并确认它们被正确使用。

    意识到以上这些陷阱可以让你省去自己跌跌撞撞的头痛。在考虑使用useCallback时,请确保性能优势大于缺点。

    React使用回调示例

    下面是一个带有Button组件和Counter组件的简单设置。Counter有两个状态并渲染出两个Button组件,每个组件将更新Counter组件状态的一个单独部分。

    Button组件有两个props:handleClick和name。每次呈现Button时,它都会登录到控制台。

    import { useCallback, useState } from ‘react’
    const Button = ({handleClick, name}) => {
    console.log(`${name} rendered`)
    return <button onClick={handleClick}>{name}</button>
    }
    const Counter = () => {
    console.log(‘counter rendered’)
    const [countOne, setCountOne] = useState(0)
    const [countTwo, setCountTwo] = useState(0)
    return (
    <>
    {countOne} {countTwo}
    <Button handleClick={() => setCountOne(countOne + 1)} name=“button1” />
    <Button handleClick={() => setCountTwo(countTwo + 1)} name=“button1” />
    </>
    )
    }
    import { useCallback, useState } from ‘react’
    const Button = ({handleClick, name}) => {
    console.log(`${name} rendered`)
    return <button onClick={handleClick}>{name}</button>
    }
    const Counter = () => {
    console.log(‘counter rendered’)
    const [countOne, setCountOne] = useState(0)
    const [countTwo, setCountTwo] = useState(0)
    return (
    <>
    {countOne} {countTwo}
    <Button handleClick={() => setCountOne(countOne + 1)} name=”button1″ />
    <Button handleClick={() => setCountTwo(countTwo + 1)} name=”button1″ />
    </>
    )
    }
    import { useCallback, useState } from 'react'
    const Button = ({handleClick, name}) => {
    console.log(`${name} rendered`)
    return <button onClick={handleClick}>{name}</button>
    }
    const Counter = () => {
    console.log('counter rendered')
    const [countOne, setCountOne] = useState(0)
    const [countTwo, setCountTwo] = useState(0)
    return (
    <>
    {countOne} {countTwo}
    <Button handleClick={() => setCountOne(countOne + 1)} name="button1" />
    <Button handleClick={() => setCountTwo(countTwo + 1)} name="button1" />
    </>
    )
    }

    在此示例中,无论何时单击任一按钮,您都会在控制台中看到:

    // counter rendered
    // button1 rendered
    // button2 rendered
    // counter rendered
    // button1 rendered
    // button2 rendered
    // counter rendered
    // button1 rendered
    // button2 rendered

    现在,如果我们应用useCallback到我们的handleClick函数并将我们的Button包装在 中React.memo,我们可以看到useCallback为我们提供了什么。React.memo类似于useMemo并且允许我们记忆一个组件。

    import { useCallback, useState } from ‘react’
    const Button = React.memo(({handleClick, name}) => {
    console.log(`${name} rendered`)
    return <button onClick={handleClick}>{name}</button>
    })
    const Counter = () => {
    console.log(‘counter rendered’)
    const [countOne, setCountOne] = useState(0)
    const [countTwo, setCountTwo] = useState(0)
    const memoizedSetCountOne = useCallback(() => setCountOne(countOne + 1), [countOne)
    const memoizedSetCountTwo = useCallback(() => setCountTwo(countTwo + 1), [countTwo])
    return (
    <>
    {countOne} {countTwo}
    <Button handleClick={memoizedSetCountOne} name=“button1” />
    <Button handleClick={memoizedSetCountTwo} name=“button1” />
    </>
    )
    }
    import { useCallback, useState } from ‘react’
    const Button = React.memo(({handleClick, name}) => {
    console.log(`${name} rendered`)
    return <button onClick={handleClick}>{name}</button>
    })
    const Counter = () => {
    console.log(‘counter rendered’)
    const [countOne, setCountOne] = useState(0)
    const [countTwo, setCountTwo] = useState(0)
    const memoizedSetCountOne = useCallback(() => setCountOne(countOne + 1), [countOne)
    const memoizedSetCountTwo = useCallback(() => setCountTwo(countTwo + 1), [countTwo])
    return (
    <>
    {countOne} {countTwo}
    <Button handleClick={memoizedSetCountOne} name=”button1″ />
    <Button handleClick={memoizedSetCountTwo} name=”button1″ />
    </>
    )
    }
    import { useCallback, useState } from 'react'
    const Button = React.memo(({handleClick, name}) => {
    console.log(`${name} rendered`)
    return <button onClick={handleClick}>{name}</button>
    })
    const Counter = () => {
    console.log('counter rendered')
    const [countOne, setCountOne] = useState(0)
    const [countTwo, setCountTwo] = useState(0)
    const memoizedSetCountOne = useCallback(() => setCountOne(countOne + 1), [countOne)
    const memoizedSetCountTwo = useCallback(() => setCountTwo(countTwo + 1), [countTwo])
    return (
    <>
    {countOne} {countTwo}
    <Button handleClick={memoizedSetCountOne} name="button1" />
    <Button handleClick={memoizedSetCountTwo} name="button1" />
    </>
    )
    }

    现在,当我们单击任一按钮时,我们只会看到我们单击

  • 如何使用Poedit翻译WordPress主题

    如何使用Poedit翻译WordPress主题

    大多数WordPress主题都带有一种且唯一的语言——英语。本教程向您展示如何将任何WordPress主题翻译成您选择的本地语言。

    事前准备工作

    在开始本指南之前,您需要以下内容:

    • 按照Poedit软件到您的计算机上。Poedit提供 OS X和Windows版本,可以从这里下载。
    • 您计算机上的WordPress主题文件。

    第 1 步 — 打开主题的默认语言模板

    打开Poedit并选择Create new translation

    创建主题翻译文件

    将弹出一个新窗口,选择您要翻译的WordPress主题。主题的默认翻译模板位于THEMEXXX/lang/YYY.po,其中THEMEXXX是您的主题的名称和YYY– 主题的默认语言(themename/lang/en_EN.po在本例中):

    Poedit生成翻译文件

    接下来,从下拉菜单中选择您要将主题翻译成的语言:

    选择需要翻译的语言

    您现在已准备好翻译您的主题。

    第 2 步 — 翻译您的主题

    突出显示您要翻译的任何字符串:

    逐句翻译

    Translation部分输入源字符串的所需翻译:

    根据源文本翻译

    翻译完主题后,将文件(lt_LT在本例中)保存在与原始模板相同的目录中:

    保存翻译文件

    第 3 步 — 更改您的WordPress网站语言

    将您在步骤2中保存的.po文件lt_LT.po(在本示例中)和.mo文件(lt_LT.mo由Poedit自动生成)上传到您的主机帐户上的相应目录。该目录应类似于public_html/wp-content/themes/THEMEXXX/lang,其中THEMEXXX是您的WordPress主题的名称。

    打开wp-config.php文件(它位于您的WordPress安装根目录中)并添加以下行:define ('WPLANG', 'ZZZ');ZZZ您用来保存翻译的文件的名称在哪里(在本例中的lt_LT):

    更改您的WordPress网站语言

    您的主题现在将显示为已翻译:

    翻译示例

    小结

    现在您知道如何使用Poedit翻译编辑器翻译您的WordPress主题了。如果您想使您的网站适应您的本地语言,这项技能很有价值。同样的翻译原则也适用于WordPress插件。