关于从零开始尝试做可以复用的静态网站

鉴于前几天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.html、footer.html两个文件

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

<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

@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，采用的如下代码，成功进行切换。

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的方法

于是有了下边的代码。

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文件，我根据我的目录，修改了第八行内容，如下

# 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页面