在没有 MAMP 的情况下在 Mac 中安装 PHP、Apache 和 MySQL——第三部分

这是我们系列的最后一部分：在没有 MAMP 的情况下在 Mac 中安装 PHP、Apache 和 MySQL。如果您一直关注该系列（请参阅此处的第 1 部分和第 2 部分）并在 ~/Sites 中创建了项目，然后在浏览器中访问localhost:8888，您会发现它们的显示如下图所示。

当涉及到应用程序的用户界面时，我有点挑剔，而 Apache 服务器呈现文件夹的方式让我很感兴趣，需要对其进行自定义，使其看起来更漂亮。这就是我们在本教程中要做的。

如果你准备好了，让我们开始吧。

入门

首先让我们在 ~/Sites 文件夹下创建一个名为index.php的新 PHP 文件。然后，创建一个名为assets的文件夹来存储我们将与 PHP 文件index.php一起使用的图像和 CSS 等文件。

在代码编辑器中打开index.php，并添加一个基本的 HTML5 结构以及一些额外的HTML5 标签，如下所示。

<!DOCTYPE html>
<html>
<head>
  <title>Sites</title>
</head>
<body>
<div class="wrapper">
  <header class="site-header">
    <h1>Sites</h1>
  </header>
  <div class="site-body">
     
  </div>
</div>
</body>
</html>

我们将把我们的代码放在div类下.site-body。

编写 PHP 函数

首先，我们需要从服务器中检索几个必需的信息，它们是 HTTP 主机、我们放置index.php文件夹的当前目录以及存储在当前目录中的项目列表。

这是所有代码，请确保用<?php ?>.

$server  = "http:/" . $_SERVER['HTTP_HOST'];
$cur_dir = getcwd();
$folders = scandir($cur_dir);

var_dump您可以使用或查看这些 PHP 变量中的值print_f。例如：

var_dump($folders);

scandir()这将以数组形式输出我们使用 PHP 函数检索到的文件夹和文件列表。就我而言，它看起来像这样：

array(12) { 
  [0]=> string(1) "."
  [1]=> string(2) ".."
  [2]=> string(9) ".DS_Store"
  [3]=> string(6) "assets"
  [4]=> string(4) "demo"
  [5]=> string(3) "dev"
  [6]=> string(10) "frameworks"
  [7]=> string(4) "hkdc"
  [8]=> string(4) "html"
  [9]=> string(9) "index.php"
  [10]=> string(11) "phpinfo.php"
  [11]=> string(12) "repositories"
}

然后，我们使用 PHP 循环将这些项目放入 HTML 列表结构中foreach。

1个
2个
3个
4个
5个
6个
7
8个
9
10
11

echo '<ol>';
foreach ($folders as $folder) {
  if ($folder === '.' or $folder === '..' or $folder === 'assets') continue;
  if (is_dir($cur_dir . '/' . $folder)) {
    echo '<li class="site-folder">'; // open list
    echo '<a class="folder-icon" href=' . $server . '/' . $folder . '> ' . $folder . ' </a>'; // folder icon
    echo '<span class="folder-name"><a href=' . $server . '/' . $folder . '>' . $folder . '</a></span>'; // folder name and link
    echo '</li>'; // close list
  }
}
echo '</ol>';

以下是您可能希望从上述 PHP 脚本中注意的一些事项：

1 if ($folder === '.' or $folder === '..' or $folder === 'assets') continue;.. 我们使用这一行来排除在 Apache 服务器中以点表示的父目录。它还不包括我们用来存储 CSS 和图像以自定义本地主机外观的资产。

作为参考，您可以查看有关该continue函数的 PHP 文档。

2. HTML 列表结构封装了if (is_dir($cur_dir . '/' . $folder))条件函数，这样它只会输出文件夹。

在浏览器中打开localhost:8888，我们会得到如下结果。

编写 CSS

在开始编写 CSS 之前，我们先下载Mac tiny folder icon和Mac OS X folder。在 Photoshop 中打开文件，将图标保存为 PNG 格式，并将它们放在 /assets/img 目录中。

然后，在 /assets/css 目录中创建一个新的样式表文件。

此外，将链接包含在index.php文件中。

<link rel="stylesheet" href="assets/css/style.css">

基本款式

首先让我们设置 HTML 元素的基本样式。其中包括将框大小设置为border-box，这样我们就可以轻松决定和测量元素的大小。我们还设置了字体系列，并以内联方式显示 HTML 列表。

*, *:before, *:after {
  box-sizing: border-box;
}
html {
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
  text-align: center;
}
body {
  margin: 0;
  padding: 0;
}
ol, ul {
  padding: 0;
  margin: 0;
}
ol li, ul li {
  display: inline-block;
  margin: 0 20px;
}
ol a, ul a {
  text-decoration: none;
  color: #000;
}

请注意，我们省略了浏览器供应商前缀以使代码更短。但我们已将其包含在源代码中，您可以在本教程末尾下载。

页眉

我们将模仿 OS X 的配色方案，使外观更加贴合。因此，对于页眉，我们将给它一个灰色配色方案的渐变，并将小图标放在一边。

.site-header {
  height: 30px;
  width: 100%;
  background: linear-gradient(to bottom, #eeeeee 0%, #cccccc 100%);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);
  line-height: 2.5;
  margin-bottom: 50px;
}
.site-header h1 {
  color: #000;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
  font-size: 0.8em;
  font-weight: 400;
  margin: 0;
}
.site-header h1:before {
  content: url('../img/folder-sm.png');
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 7px;
  position: relative;
  top: 2px;
}

文件夹

接下来，我们在之前使用 PHP 生成的列表项中显示 OS X 文件夹。下面的 CSS 代码还包含了我们悬停文件夹时的样式。

.site-folder {
  position: relative;
  width: 145px;
  height: 132px;
}
.site-folder .folder-icon {
  display: block;
  height: 100%;
  width: 100%;
  background-image: url('../img/folder-128.png');
  background-repeat: no-repeat;
  background-position: center top;
  border-radius: 5px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.site-folder .folder-icon:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.site-folder .folder-icon:hover + .folder-name {
  background-color: #2b5dcd;
}
.site-folder .folder-icon:hover + .folder-name a {
  color: #fff;
}
.folder-name {
  border-radius: 24px;
  font-weight: 400;
  font-size: 0.8em;
  text-transform: lowercase;
  display: inline-block;
  margin-top: 10px;
  padding: 5px 12px;
}

我们完了。下面的截图是我们在浏览器中查看localhost:8888时的最终结果。

结论

我们已经完成了分 3 期发布的系列。总结：

在第一部分中，我们设置并配置了 PHP 和 Apache。
然后，在第二部分中，我们安装了 MySQL 并使用 Sequel Pro 对其进行管理。
在本教程的最后一部分中，我们自定义了localhost中的文件夹表示。

我们希望您发现这些教程有用。如果您对所讨论的主题有任何疑问，请随时将您的问题放在下面的评论框中。