鉴于前几天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
两个文件
在其他页面中,需要调用的时候,直接引入下部分代码即可
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代码部分 在编写一些固定的内容的时候,应该完全避免使用绝对的写法
比如
这里对于一些大小、定位等内容可以用相对方式去写
比如百分比、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 , 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' , 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 , 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' , 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=/" ; } 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 ( ) { var user = getCookie("8CCBA0AAEDE9908775967AD5C7D661D6" ); 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); }); });
在上述代码中,比最开始多了下面一点内容
这行内容解决了我的不同页面保存了不同的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页面