鉴于前几天Boss给的项目我实在不会用,Boss放弃使用那个,决定可以先做静态的网站,所以有了这篇文章。

配置文件目录

首先需要一个index.html文件,这个是服务器自动加载根目录下的文件,也就是说,如果直接输入域名/ip进行访问时,有这个文件,就可以不用写出具体文件名称了

不同目录下,也都会优先读取该名称文件。

比如我的ip地址是172.0.0.1,那么服务器会自动寻找网站根目录下的index.html文件,地址栏就会为172.0.0.1,否则,如果我需要加载根目录下的如hello.html,地址栏就会变成172.0.0.1/hello.html

配置公共部分

根据对网站的研究,我发现,无论是哪个页面,其头部导航栏和底部的页脚部分,内容几乎是一样的(除了被选中的页面会变色以外)

根据之前研究Hexo主题文件的经验,我想到,可不可以把header和footer只作一个版本,然后剩下的直接调用不就可以了

这样也不用每次都复制粘贴很多代码进去了(这里写的是纯静态网站,并且没有框架自动生成,所以全部内容都是从零实现)

那么就把所有公共部分放在layout文件夹下,需要的时候调用就可以了

于是我在这个文件夹下创建了header.htmlfooter.html两个文件

在其他页面中,需要调用的时候,直接引入下部分代码即可

1
2
3
4
5
6
7
8
9
10
<header>
<div class="headerPage"></div>
</header>
<footer>
<div class="footerPage"></div>
</footer>
<script type="text/javascript">
$(".headerPage").load("/layout/header.html");
$(".footerPage").load("/layout/footer.html");
</script>

移动端适配

在网站最开始建设的时候,我并不了解具体如何做移动端适配,只是大体上知道要尽量用公用元素,使用不同css进行适配

这也多归功于我折腾Hexo模板时候的经验了

所以我在写的时候,虽然只写了我电脑屏幕的css,但是html代码我是尽量按照可以被复用的方式进行构建的。

这样在最后做不同分辨率适配的时候,我真的非常感谢自己之前这样的写法,才能让我在半天时间内做好移动端适配。

对于我做的网站来说,其中最重的移动适配的代码如下

1
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

在html

1
2
3
4
5
6
@media screen and (max-width: 1440px) {
#className {
display: none;
transform: scale(0.5);
}
}

在css部分采用媒体查询方式,来限制不同分辨率下的设备按照不同的css进行加载。

Html代码部分

在编写一些固定的内容的时候,应该完全避免使用绝对的写法

比如

  • absolute
  • x px(像素写法)

这里对于一些大小、定位等内容可以用相对方式去写

比如百分比、vw

css3新单位,viewpoint width的缩写,视窗宽度,1vw等于视窗宽度的1%。 举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。 css3新单位,viewpoint height的缩写,视窗高度,1vh等于视窗高度的1%

顺便一提:我写的这个网站大多数都是上来直接使用的vw进行的定位,后期对于不同的分辨率来说,基本上都是自动适应不需要去修改的

多语言适配

似乎这一块现在来看很简单,因为最开始就打算做多语言的适配了,所以网站布局尽量都是提前写好的。

Google到了各种各样的解决方案,但由于这个网站是纯手写的静态html,没有用到任何的框架和动态页面,所以我的初步想法是按照hexo的写法,直接提前写好布局,然后直接进行调用相应的语言文件填充相应文字即可。

但是考虑到hexo的方式是生成时调用,最终静态页面中并不体现这一点。

所以在想,是否可以通过js去直接改变页面的内容,并且将所有的内容都写入语言部分,html代码只控制网站结构,而不进行内容编写。

这样做的好处是,后期更改内容的时候就会直接进行框架部分的修改即可,只用做一份框架代码就可以。

于是说干就干,最终选定的是一个叫做jquery-i18n-properties的jq模块。

根据ibm的开发者文档,最终成功使用。

最初找到了world_7735小可爱的blog,采用的如下代码,成功进行切换。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var language_pack = {
now_lang: 0, // 0:ch,1:en
loadProperties: function(new_lang) {
var self = this;
var tmp_lang = '';
if (new_lang == 0) {
tmp_lang = 'zh';
$('body').removeClass('en').addClass('zh');
} else {
tmp_lang = 'en';
$('body').removeClass('zh').addClass('en');
}
jQuery.i18n.properties({ //加载资浏览器语言对应的资源文件
name: 'strings', //资源文件名称
path: '/source/i18n/', //资源文件路径
language: tmp_lang,
cache: true,
mode: 'map', //用Map的方式使用资源文件中的值
callback: function() { //加载成功后设置显示内容
for (var i in $.i18n.map) {
$('[data-lang="' + i + '"]').html($.i18n.map[i]);
}
document.title = $.i18n.map['string_title'];
}
});
self.now_lang = new_lang;
}
}
$(document).ready(function() {
$('#J_lang_switch').click(function() {
var new_lang;
if (language_pack.now_lang == 0) {
new_lang = 1;
} else {
new_lang = 0;
}
language_pack.loadProperties(new_lang);
});
});

但是我发现了一个问题,在我更换页面的时候,多语言切换的功能也被刷新,结果需要重新点击切换语言才可以。

这样可不行,于是我想到了加一个记录的东西,最先想到的是url保存内容,但是看起来似乎要多些很多东西,本着简化代码的原则,于是我选择了使用cookies的方法

于是有了下边的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
var language_pack = {
now_lang: 0, // 0:ch,1:en
loadProperties: function(new_lang) {
var self = this;
var tmp_lang = '';
if (new_lang == 0) {
tmp_lang = 'zh';
$('body').removeClass('en').addClass('zh');
} else {
tmp_lang = 'en';
$('body').removeClass('zh').addClass('en');
}
jQuery.i18n.properties({ //加载资浏览器语言对应的资源文件
name: 'strings', //资源文件名称
path: '/source/i18n/', //资源文件路径
language: tmp_lang,
cache: true,
mode: 'map', //用Map的方式使用资源文件中的值
callback: function() { //加载成功后设置显示内容
for (var i in $.i18n.map) {
$('[data-lang="' + i + '"]').html($.i18n.map[i]);
}
document.title = $.i18n.map['string_title'];
}
});
self.now_lang = new_lang;
}
}

function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires + ";path=/"; // 增加了根目录指定,避免不同目录存储了不同的cookies导致中英文无法同步
}

function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); }
}
return "";
}

$(document).ready(function() {
// language_pack.loadProperties(0);
var user = getCookie("8CCBA0AAEDE9908775967AD5C7D661D6"); // 这里的8CCBA0AAEDE9908775967AD5C7D661D6是一个MD5
if (user != "") {
if ("0" == user) {
language_pack.loadProperties(0);
} else if ("1" == user) {
language_pack.loadProperties(1);
}
} else {
language_pack.loadProperties(1);
}
$('#J_lang_switch').click(function() {
var new_lang;
if (language_pack.now_lang == 0) {
new_lang = 1;
} else {
new_lang = 0;
}
setCookie("8CCBA0AAEDE9908775967AD5C7D661D6", new_lang, 30);
language_pack.loadProperties(new_lang);
});
});

在上述代码中,比最开始多了下面一点内容

1
+ ";path=/"

这行内容解决了我的不同页面保存了不同的cookies值,这样读取的都是存储为根目录的cookies值,这样就可以共享,以保证真正的只存储一个cookies来保证全站切换时候语言统一。

配置服务器

配置Apache

由于我放弃了那个动态网站,做了静态网站。。但是还是需要HTML的服务器的

像我的萌茶屋是基于GitHub Page运行的,这本身就相当于一个web服务器

但是在公司的服务器中,没有相应的服务器

所以这里我需要配置一个Apache服务器

这里就体现出来linux的好处了

只需要一次执行下列命令就算是配置好了

1
2
3
sudo apt-get update
sudo apt-get install apache2
y

然后就是等待了

阿里云的服务器自动配置了阿里云的CDN,因此国内速度还是挺快的

然后配置一下安全策略,具体可以参考这篇文章的最后部分,将80端口开放到公网下

然后直接访问我的hostname,成功出现apache的标志性页面了

配置网站文件

直接用WinSCP上传整个网站代码到 /var/www/html目录下,把原来apache那个index.html文件删掉

配置404页面

首先必须要先写好一个404页面哦(这是废话

然后找到/etc/apache2/conf-enable/localized-error-pages.conf文件,我根据我的目录,修改了第八行内容,如下

1
2
3
4
5
6
7
8
9
10
11
12
13
# Customizable error responses come in three flavors:
# 1) plain text
# 2) local redirects
# 3) external redirects
#
# Some examples:
#ErrorDocument 500 "The server made a boo boo."
- # ErrorDocument 404 /missing.html
+ ErrorDocument 404 /404/
#ErrorDocument 404 "/cgi-bin/missing_handler.pl"
#ErrorDocument 402 http://www.example.com/subscription_info.html
#
···

然后随便访问一下试一试:https://ip/x(x是不存在的目录),成功显示了我的404页面