2019-03-05-HTML手风琴布局和页面拨号

写一个HTML页面(地址是:https://gdougym.cn)用于展示加油站的分布位置和联系电话。
位置是高德地图的坐标URL,联系电话使用<a href="tel:xxxxx">xxxxx</a>标签的形式,
这样点击电话号码就会跳到系统电话拨号的操作。
页面布局采用了“手风琴菜单”布局,主要代码参考在这里:手风琴菜单
代码里用到font-awesome,相关的教程感觉菜鸟教程做得很不错。
这次也使用了个性化的Web字体,主要使用有字库,感觉还好的样子。
网页托管在一个VPS,这次尝试了使用Apache2的虚拟主机(virtualhost)设置。用一个域名指向VPS的一个主机,这样很方便,也提高了VPS的利用率。关于Apache2虚拟主机的配置主要参考了Apache虚拟主机指南,主要内容摘录如下:

  • 先在/etc/apache2/sites-available目录创建一个网站的配置文件,名称不重要,但是扩展名必须是*.conf
  • 在上一步创建的配置文件(我创建的文件名是stations.conf)中写入配置
<VirtualHost *:80>
ServerName gdougym.cn
ServerAdmin whatever@mail.gdougym.cn
DocumentRoot "/var/www/stations/"
ErrorLog "/var/log/apache2/edunuke_errors.log"
CustomLog "/var/log/apache2/edunuke_accesses.log" common    
</VirtualHost>

这样就是一个配置文件了。

  • 接着使用命令sudo a2ensite stations启用站点
  • 运行命令sudo service apache2 restart重启Apache服务器就会重新加载网站了
  • 使用Let's Encrypt增加了https功能,命令是sudo certbot --apache -d gdougym.cn

总结

平时Web前端写得太少了,一个简单页面都花不少时间,希望未来几个月会写多些前端代码。Apache2的玩法还未非常熟悉,虽然也想去玩Nginx,不过还想先熟悉一种技术再去看同类替代品,这样应该也很快上手的。
最后修改过的代码放到了GitHub