分类目录归档:Code

Windows10安装Apache及问题解决

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

下载 Apache

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

找到 Apache 的发行版(Apache httpd 2.4.x Released)的下载地址,点击 Download 就能看到有 Linux下的、Windows 下的不同的下载链接:

点击 Files for Microsoft WindowsApacheHaus,下载适用与 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.crtserverone.key

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

发现 servertwo.crtservertwo.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及问题解决

网站变成灰度/黑白色

今天是 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中

在使用 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中

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

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

安装 Samba

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

sudo apt-get update && apt-get upgrade

更新完毕后,运行安装:

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

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 盘、挂载硬盘等。

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

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

网页自定义Facebook/Twitter/QQ/微信分享预览

我们幸幸苦苦做完网站后或多或少都会分享链接,如何让我们分享的链接分享更好看呢?就需要对各主流平台一一进行内容配置。

Facebook 的 Open Graph 和 Twitter Card 想必我们都很了解,使用相应的 meta 标签,定义相关内容即可。

Facebook

挑一些重点来说,一般常用的就如下几个:

<!-- Facebook Open Graph -->

<meta property="og:site_name" content="图筑风暻" />
<meta property="og:url" content="nousbuild.org" />
<meta property="og:title" content="图筑风暻" />
<meta property="og:image" content="http://nousbuild.org/icon.png" />
<meta property="og:description" content="欢迎访问图筑风暻官网。" />

如果需要更多 meta 标签,你可以访问 Facebook 页面,或是 The Open Graph protocol 查看:

地址:Facbook Open Graph(可能需要科学上网)

地址:The Open Graph protocol

Twitter

Twitter 采用的也是 meta 标签,只是标记不同,常用的如下:

<!-- Twitter Card -->

<meta name='twitter:card' content='欢迎访问图筑风暻官网。' />
<meta name='twitter:site' content='@图筑风暻' />
<meta name="twitter:url" content="nousbuild.org" />
<meta name='twitter:title' content='图筑风暻 | Scenery Architecture' />
<meta name='twitter:image' content='http://nousbuild.org/icon.png' />
<meta name='twitter:description' content='欢迎访问图筑风暻官网。' />

用法也不用多说,大家肯定都很熟悉,如果需要更多 meta 标签,你可以访问 Twitter 页面:

地址:Twitter Card(可能需要科学上网)

QQ

咱们主流的社交软件当然是就是 QQ 和 微信了,下面先来介绍 QQ 链接自定义预览的方法吧:

<!-- QQ Sharing -->

<meta itemprop="name" content="图筑风暻" />
<meta itemprop="image" content="http://nousbuild.org/icon.png" />
<meta name="description" itemprop="description" content="Scenery Architecture" />

QQ 非常人性化,使用了通用标准,在 QQ移动Web开发平台 中可以看到示例:

也非常简单,仅仅只有 标题、缩略图、站点描述或内容,三个标签。

微信

最后一个,微信。为什么把微信放到最后一个写?是因为重要吗。当但不是!我放到最后一个仅仅是因为微信是最坑的一个!

你访问微信 JSSDK 文档会发现,仅仅只有引入 js 的方法,凭什么一个简单功能我还要引入微信的 js,不仅拖累加载速度,而且三天两头随意更改规则!气愤!!

于是我开始看看其他大企业的官网网站都是怎么设置的,直到我看到了星巴克的中文官网

让我们查看下星巴克的源代码:

星爸爸真是很良心的帮我们把注释的写好了,最底下的这个就是我们要的:

<!-- WeChat Sharing -->

<script>
  var WECHAT_TITLE = '图筑风暻';
  var WECHAT_DESC = 'Scenery Architecture';
  var WECHAT_IMAGE = 'http://www.nousbuild.org/icon.png';
  var WCHAT_NO_GA = '';
</script>

怎么样,很奇葩的使用了 js 模块来实现,而且插入 <script> 会导致此文章保存错误,真是坑。微信目前我发现了只有 标题、缩略图、站点描述或内容,三个标签。由于找不到官方资料,如果以后发现还有更多标签,我在更新此文章。

注意问题

最后说几个注意问题:

  1. 顺序。有时候你的通用 meta 标签在微信标签之前,读取时有时候会直接读取通用 meta 标签的内容,如果你的微信标签的题目与通用标签的题目不一致,很可能在分享链接时会出现内容替换。
  2. 缩略图。缩略图的链接如果使用相对链接出现问题,建议该用绝对链接。图片最好是正方形,尺寸大于等于300px。

如果你找到更多内容,欢迎评论交流。

继续阅读网页自定义Facebook/Twitter/QQ/微信分享预览