所有由Haoning发布的文章

Windows10安装Apache及问题解决

Code

我们在开发时候，常常需要 localhost 本地安装服务器。但是随着 Windows 10 版本的不断更新，Apache 也只提供源代码，仍需自己编译，导致安装过程往往没那么顺利。

下载 Apache

Apache 的网址有很多，但是前往 http://httpd.apache.org 此处下载比较好。

找到 Apache 的发行版（Apache httpd 2.4.x Released）的下载地址，点击 Download 就能看到有 Linux下的、Windows 下的不同的下载链接：

点击 Files for Microsoft Windows → ApacheHaus，下载适用与 Windows 的版本，也可以 点击此处 直达页面。

下载 Apache 2.4 Server Binaries 服务器版本即可，x86 和 x64 自己对应选择。

准备工作

将下载的压缩包解压缩后，只将文件夹放到准备安装的位置，文件夹名称可以自己更改。

文件配置

你可以修改 httpd.conf 文件（例如 D:\Apache24\conf 下），将链接修改为绝对路径。如果安装过程没有报错，也可以不修改。

# 默认文件
Define SRVROOT "/Apache24"
ServerRoot "${SRVROOT}"

# 可以修改为绝对路径
Define SRVROOT "D:\Apache24"
ServerRoot "${SRVROOT}"

最后结尾处不能带 “/” 或 “\”，因为后面配置的目录开头已经带有 “/” 或 “\”。使用 “/” 或 “\” 均可。

如果你的80端口被占用（可在 CMD 下使用命令 netstat -ano | findstr 80 查看），可以把Apache 默认的 80端口 改为其他端口。

# 默认的80端口
Listen 80

# 可以修改为8001
Listen 8001

安装前检查

打开 CMD 定位到 Apache 目录下的 bin 文件夹（如 D:\Apache24\bin），需要在此处运行命令，也可以用 Shift + 鼠标右键。

输入命令，检查配置文件语法有没有错误：

httpd -t

常见错误

提示 httpd-ahssl.conf 文件中提到的 serverone.crt 证书文件丢失，现在下载的 Apache 版本应该都会遇到这个问题：

我们需要定位到 ssl 文件夹（如 D:\Apache24\conf\ssl），发现确实没有 serverone.crt，只有 server.crt，我们就需要复制一份证书：

然后重命名为 serverone.crt 和 serverone.key。

再次运行 httpd -t 命令检查：

发现 servertwo.crt 和 servertwo.key 又没有。额，好吧，继续复制一份，并重命名：

再次运行 httpd -t 命令检查：

很好，这次终于没有语法问题了。下面开始安装 Apache。

安装 Apache

打开 CMD 定位到 Apache 目录下的 bin 文件夹（如 D:\Apache24\bin），需要在此处运行命令，也可以用 Shift + 鼠标右键。

运行命令：

httpd -k install -n Apache

该命令的意思是，安装 Windows 可托管的 Apache 服务。其中 -n 后面参数是自定义Windows 服务名称，之后可使用 Windows 管理服务的命令来管理 apache 服务。

Errors reported here must be corrected before the service can be started. 意思是 “此处报告的错误必须在服务开始前进行纠正”，这只是温馨提示，不代表有错误。

Apache 服务的操作

# 启动 Apache 服务
httpd -k start  　　　　　　　　　 不会提示详细的错误信息
httpd -k start -n apache  　　　   会提示详细的错误信息
net start apache  　　　　　　　 　利用Windows托管服务命令

# 重启 Apache 服务
httpd -k restart -n apachet

# 停止 Apache 服务
httpd -k stop

# 删除 Apache 服务
httpd -k uninstall

运行 Apache 后，访问 http://localhos 是否成功。

如果 Apache 服务想要卸载，建议先停止服务再删除，最后再删除安装目录。

一定要先卸载 apache服务，然后删除安装文件（切记，若直接删除安装路径的文件夹，会有残余文件在电脑，可能会造成不必要的麻烦）。

继续阅读Windows10安装Apache及问题解决 →

网站变成灰度/黑白色

Code、CSS3 类别、Web 类别、

今天是 2020年4月4日 （清明节），让我们一起表达对全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼。

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院决定，2020年4月4日举行全国性哀悼活动。在此期间，全国和驻外使领馆下半旗志哀，全国停止公共娱乐活动。4月4日10时起，全国人民默哀3分钟，汽车、火车、舰船鸣笛，防空警报鸣响。国务院办公厅

首先，请大家一起默哀3分钟，表达我们对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼！

如何将网站变成灰度/黑白色？

如何将我们的网站变成灰度/黑白色？其实不需要一一修改 CSS 样式文件，只需要用 Filter 滤镜调整灰度参数即可。

html {
　　filter:grayscale(100%);
　　-webkit-filter:grayscale(100%);
　　-moz-filter:grayscale(100%);
　　-ms-filter:grayscale(100%);
　　-o-filter:grayscale(100%);
　　filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
　　-webkit-filter:grayscale(1)
}

永垂不朽！

继续阅读网站变成灰度/黑白色 →

将自己网站的搜索功能加入到Chrome Tab中

Code、HTML 类别、Web 开发、Web 类别、

在使用 Chrome 浏览器的时候，你肯定会发现，在地址栏输入 google.com, bing.com 等网站时，右侧会出现按 Tab 进行搜索的功能，免去了先进入页面再进行搜索的步骤。如果你也想要此功能，那就继续看吧~

实现原理

怎么让浏览器知道你的网站有搜索功能？

非主动添加情况

在使用 Chrome 访问一个网站时，Chrome 会先查看有没有定义 OpenSearch XML，如果没有的话，会在网页中找有没有这样一个表单：

  1. 表单以GET方式提交（POST不可以）；
  2. 表单的提交url为HTTP协议的（HTTPS不可以）；
  3. 表单没有附加onSubmit事件（确保提交过程不被用户代码干涉）；
  4. 表单中仅包含一个input输入框，而且类型为text（其他类型的都不可以，多余的控件也都不可以）

如果有这样一个表单，Chrome会认为这是一个搜索框，并根据这个表单的信息推断出这个网站的搜索方法。具体可以查看 Chrome 文档说明。

主动添加情况

如果 Chrome 没有自动识别上，我们只要遵循 OpenSearch XML 协议告诉 Chrome 即可，而且配置方法简单，无需对服务器改造。

前提条件

你的网站必须有搜索功能，且搜索链接较为固定，例如：

// 我的网站搜索格式
https://www.nousbuild.org/search/?q=搜索词

// Bing 的搜索格式
https://cn.bing.com/search?q=搜索词

// Google 的搜索格式
https://www.google.com/search?q=搜索词

// Baidu 的搜索格式
https://www.baidu.com/s?wd=搜索词

即，只要替换 关键词 的内容，即可进行搜索。

OpenSearch 协议

OpenSearch 是用于共享搜索结果的简单格式集合，在 Github 项目中，你可以查看到最新的、详细的说明：点击此处

截至此文章发布，目前最新的协议版本是 OpenSearch 1.1 Draft 6，请尽可能的查看最新说明。

实现操作

下面开始如何操作吧。首先在 首页 <header> 处添加一条 <link> 声明，仅仅在网站首页添加即可：

<link rel="search" type="application/opensearchdescription+xml" href="http://www.nousbuild.org/opensearch.xml" title="SA Search">

你只要修改 title=”网站名称/搜索引擎名称”， href=”xml文件的地址” 即可，建议使用绝对连接（即使支持https协议也建议写成http协议）。

接下来就是新建一个 XML 文件（opensearch.xml）：

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
	<ShortName>SA Search</ShortName>
	<Description>Search SA Website</Description>
	<Url type="text/html" method="get" template="http://www.nousbuild.org/search/?q={searchTerms}"/>
</OpenSearchDescription>

我只定义了三个属性，ShortName 表示搜索引擎的名字，Description 表示搜索引擎的描述，Url 表示刚刚说的你的固定搜索格式，你只需将上面说的 关键词 替换为 {searchTerms} 即可 （同样，即使支持https协议也建议写成http协议）。

到此，大功告成，上传更新即可。

除了此方法定义外，还有 JavaScritp 定义当方法等，你可以自行继续阅读官方文档。

继续阅读将自己网站的搜索功能加入到Chrome Tab中 →

Github本地和仓库删除无用配置文件

macOS、Shortcut、System、Windows、

不论是 Windows 系统，还是 macOS 系统，我们总是能够碰见相关的本地设置配置文件或临时文件，而这些配置文件是我们不需要的，例如 Thumbs.db 或者 .DS_Store 文件，这些文件我们不需要上传到 Github 之上。

移除方法

移除这些临时文件到方法步骤基本上是一致到：

  1. 先 Clone 仓库到本地；
  2. 找到或创建 .gitignore 文件；
  3. 配置本地的 .gitignore 文件；
  4. 删除本地已经存在的 “无用” 文件；
  5. 提交上传即可。

1. Clone 仓库到本地

当我们 Clone 到本地后，就可以开始配置 .gitignore 文件（如无新建）。

2. 找到或创建 .gitignore 文件

对于 Windows 系统，.gitignore 文件若存在，则会在仓库文件夹根目录下可以看见。对于 macOS 系统，.gitignore 文件默认隐藏，需要使用如下指令进行显化（需要重启 Finder）：

// 显示隐藏文件
defaults write com.apple.finder AppleShowAllFiles -bool true

如果你想再次隐藏（需要重启 Finder）：

// 再次隐藏文件
defaults write com.apple.finder AppleShowAllFiles -bool false

除此之外，你还可以参考 Apple macOS 使用手册中到 《在 Mac 上显示或隐藏文件扩展名》，查看详细方法。

3. 配置本地的 .gitignore 文件

推荐一个常用的 .gitignore 文件配置：

# Windows image file caches
Thumbs.db
ehthumbs.db

# Folder config file
Desktop.ini

# Recycle Bin used on file shares
$RECYCLE.BIN/

# Windows Installer files
*.cab
*.msi
*.msm
*.msp

# Windows shortcuts
*.lnk

# =========================
# Operating System Files
# =========================

# OSX
# =========================

*/.DS_Store
.DS_Store
.AppleDouble
.LSOverride

# Thumbnails
._*

# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns

# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk

这份配置文件，基本上排除了 Windows 系统下到缩略图临时文件，设置文件等信息，排除了 macOS 系统下文件夹配置文件等。

4. 删除本地已经存在的 “无用” 文件

打开 Terminal，使用 cd 命令 打开你需要删除无用文件的本地仓库文件夹。

再使用如下命令删除 .DS_Store 文件：

find . -name .DS_Store -print0 | xargs -0 git rm -f --ignore-unmatch

5. 提交上传即可

删除完成后，即可 commit 提交到云端。

继续阅读Github本地和仓库删除无用配置文件 →

树莓派当作局域网外接设备

Code、Raspbian、System、树莓派开发、、

树莓派可以安装 Samba 来搭建 NAS 系统，这样在家里看高清电影的时候，就不需要用 U 盘拷贝电影再插入到电视上播放，可以直接利用局域网实现秒传，秒播放。

安装 Samba

在执行安装前，还是老样子，先来一波例常更新准备：

sudo apt-get update && apt-get upgrade

更新完毕后，运行安装：

建议全部安装，如果你的树莓派 IP 与 Mac地址 没有绑定，那么我强烈建议你安装可选服务，否者你的树莓派内网地址可能会发生变化，你需要在电视上每次都手动更改。当然你也可以选择不安装。

sudo apt-get install samba samba-common-bin
sudo apt-get install netatalk （可选，用于支持AFP）
sudo apt-get install avahi-daemon（可选，用于支持网内的计算机自动发现）

安装过程中，可能会出现以下对话框：

你需要查看一下你的路由器是不是使用了 DHCP 服务：

其实你也可以不看，一般来说，咱们家用的宽带服务，都要开启 DHCP 服务才行；校园网的话，应该是不适用 DHCP，总之具体情况分清楚就好。

配置 Samba

我们要修改 etc/samba/smb.conf 这个文件

首先，一定要把 [homes] 和 [printers] 这两个屏蔽（包括所有附属的内容），不然无法实现免密码。有的智能电视是不支持账户密码登陆的（比如我家的长虹），虽然能检测到，但是就是进不去。

然后在文件后面增加下面配置：

[share]
 comment = share
 path = /home/pi
 read only = no
 create mask = 0777
 directory mask = 0777
 guest ok = yes
 browseable = yes
 public = yes
 writable = yes

两种操作方法，自己选一种习惯的：

方法一（VI文本编辑）：

sudo nano /etc/samba/smb.conf

方法二（手动修改）：

先获取文件权限：

sudo chmod -R 777 /etc/samba

然后双击打开文件修改，然后保存。

[homes] 以及下方缩进行，都要用 # 注释掉：

[printers] 以及下方缩进行，都要用 # 注释掉：

添加用户

直接添加咱们的默认用户 pi 即可：

smbpasswd -a pi

然后再激活用户：

smbpasswd -e pi

重启 Samba

最后一步完成后，重启即可：

sudo smbd restart

电视测试

我打开电视，进入本地设备，就直接能发现树莓派。如果你没有安装可选服务，可能需要自己手动添加共享设备。

打开后，我们发现就是整个树莓派的目录，所以你把文件放在桌面，Videos 文件夹 或者其他地方都可以。

我在桌面刚刚上传了一个 晚安喵 的视频，现在打开看看：

嗯，看来没什么问题，速度也很快。

其他问题

  1. 如何将文件传到树莓派？你可以使用 FTP 或者 VNC 自带的传输工具；
  2. 播放卡顿？你看看树莓派是不是用有线连接，无线的话可能会慢；路由器是不是局域网300M传输带宽？你的 SD卡 或者 TF卡 是不是 Class 10 或者更高等级？
  3. 空间不够？你可以更换更大的 SD/TF卡 或者给树莓派插 U 盘、挂载硬盘等。

如仍有问题，可以留言并留下联系方式以便回复，或者直接给我发邮件。

继续阅读树莓派当作局域网外接设备 →