精品国语人妻色乱码二区,免费乱理伦片在线观看2018,日韩精品视频在线播放,高潮无码又爽又刺激视频在线

<source id="8jepl"><menu id="8jepl"></menu></source>
    <source id="8jepl"><menu id="8jepl"></menu></source>
    <rp id="8jepl"><mark id="8jepl"><label id="8jepl"></label></mark></rp>
          <source id="8jepl"><menu id="8jepl"><label id="8jepl"></label></menu></source>
          <source id="8jepl"></source>
              <source id="8jepl"></source>
                <video id="8jepl"><menu id="8jepl"></menu></video>
                0712-2888027 189-8648-0214
                微信公眾號

                孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號

                當(dāng)前位置:主頁 > 技術(shù)支持 > 優(yōu)化推廣 > 代碼適配對百度友好代碼詳解

                代碼適配對百度友好代碼詳解

                時(shí)間:2015-12-17來源:風(fēng)信官網(wǎng) 點(diǎn)擊: 917次
                代碼適配站點(diǎn)目前并非主流,但有其自己的特點(diǎn)和設(shè)計(jì)規(guī)范。學(xué)院邀請相關(guān)專家再次分享下如何建設(shè)對百度友好的代碼適配站點(diǎn)。

                一、什么樣的網(wǎng)站適合做代碼適配?

                代碼適配的特點(diǎn)是網(wǎng)站在移動(dòng)化的過程中,使用了相同的網(wǎng)址作為移動(dòng)適配的方法,根據(jù)服務(wù)器對用戶設(shè)備瀏覽器user agent參數(shù)的獲取,針對不同設(shè)備類型加載不同的訪問界面。也就是代碼適配成功之后,同一套網(wǎng)站url,在不同設(shè)備上打開的情況下可以是完全不同的頁面結(jié)構(gòu)和樣式(包括htmlcss)。

                代碼適配的優(yōu)點(diǎn):和自適應(yīng)站點(diǎn)一樣,網(wǎng)頁版和移動(dòng)版使用了同一套url規(guī)則,保持了網(wǎng)頁版的原有鏈接,SEO策略可以保持一致,也避免了站內(nèi)重復(fù)內(nèi)容的產(chǎn)生;相對于自適應(yīng)網(wǎng)站設(shè)計(jì)前端性能會(huì)很高,因?yàn)槭峭惶状a應(yīng)對所有的設(shè)備顯示,需要加載針對響應(yīng)式所需要的css,javascript,但是代碼適配的話可以簡化為只包含為相應(yīng)設(shè)備優(yōu)化的內(nèi)容,以實(shí)現(xiàn)較少的前端性能損耗。

                代碼適配的缺點(diǎn):后期代碼維護(hù)很麻煩,要針對不同設(shè)備或不同分辨率屏幕設(shè)計(jì)相應(yīng)的模板文件,內(nèi)容的部分雖然可以使用內(nèi)容管理系統(tǒng)在所有模板上自動(dòng)同步更新內(nèi)容,但是根據(jù)網(wǎng)站的復(fù)雜程度,代碼適配所需的開發(fā)時(shí)間很有可能較長。

                綜上所述,網(wǎng)站結(jié)構(gòu)簡單,網(wǎng)頁模板不是很多的站點(diǎn)比較適合做代碼適配,比如企業(yè)站,個(gè)人博客等。另外要注意的是,因?yàn)樾枰?wù)器端腳本來輔助實(shí)現(xiàn),所以您的網(wǎng)站必須在獨(dú)立服務(wù)器或VPS云主機(jī)上,虛擬主機(jī)用戶就不要進(jìn)行代碼適配您的網(wǎng)站了。
                 

                二、如何實(shí)現(xiàn)代碼適配?

                 1.服務(wù)器端的準(zhǔn)備工作

                為什么要修改Vary HTTP頭?其實(shí)代碼適配應(yīng)用的是HTTP的內(nèi)容協(xié)商機(jī)制,即服務(wù)器為同一個(gè)URL的請求提供了多份不同的文檔作為響應(yīng),服務(wù)端和客戶端之間會(huì)根據(jù)事先設(shè)定好的協(xié)商機(jī)制來選擇適合的版本。最常見的就是服務(wù)端根據(jù)客戶端發(fā)送的請求頭中包含某些字段自動(dòng)發(fā)送最合適的版本。Vary的作用就在于告訴代理服務(wù)器、緩存或者CDN,如何判斷請求是否一樣,vary中的組合就是代理服務(wù)器、緩存或者CDN判斷的依據(jù),比如Vary中有 User-AgentUser-Agent告訴HTTP服務(wù)器,客戶端使用的操作系統(tǒng)和瀏覽器的名稱和版本。例 如: User-Agent: Mozilla/4.0 (compatible; MSIE8.0; Windows NT 5.1; Trident/4.0; CIBA; .NET CLR 2.0.50727; .NET CLR3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; InfoPath.2; .NET4.0E)),那么User-Agent是否變化就是判斷的依據(jù),即使同一個(gè)頁面請求,用戶使用IE打開,再用Firefox打開的時(shí)候,會(huì)被代理服務(wù)器/CDN/緩存認(rèn)為是不同的請求,如果Vary中沒有User-Agent,那么代理服務(wù)器/CDN/緩存會(huì)認(rèn)為是相同的頁面,直接給用戶返回緩存的頁面,而不會(huì)再去web服務(wù)器請求相應(yīng)的頁面??傊?wù)器開啟了Vary:User-Agent之后,客戶端的任何請求信息中會(huì)包含UA的信息。同時(shí)官方說明它有助于百度spdier 更快速地發(fā)現(xiàn)針對移動(dòng)設(shè)備進(jìn)行優(yōu)化的內(nèi)容,并且提高其他ua抓取此網(wǎng)頁的優(yōu)先級。

                2.如何修改服務(wù)器http

                首先查看自己網(wǎng)站的http響應(yīng)頭的方法有很多,Linux服務(wù)器端可以直接使用這個(gè)shell命令:curl –head http://www.xxxx.com/ ;Chrome 瀏覽器自帶的抓包工具也可以查看;或者直接使用站長平臺的抓取診斷工具就可以,下面就是查詢一個(gè)服務(wù)器響應(yīng)的http頭的結(jié)果:

                 

                這個(gè)例子里目前的http頭信息中,Vary項(xiàng)現(xiàn)在是Accept-Encoding;而我們要修改的也就是這一項(xiàng)。具體修改http頭的方法根據(jù)不同的web服務(wù)器用不同的設(shè)置方法:

                1)     如果web服務(wù)器是apache的話,第一步要確保服務(wù)器是否安裝了mod_headers模塊。如果是第一次編譯安裝apache,確保./configure--prefix=/usr/local/apache2 --enable-rewrite --enable-so --enable-headers--enable-expires --with-mpm=worker --enable-modules=most --enable-deflate等,后面有--enable-headers;如果apache已經(jīng)安裝編譯好了,httpd -M 指令可以列出編譯過的模塊,同時(shí)能看到哪些模塊是static靜態(tài)編譯,哪一些是shared動(dòng)態(tài)加載的。要往已經(jīng)編譯安裝好的apache添加mod_headers模塊,要在httpd的源文件里面找到mod_headers.c ,運(yùn)行程序編譯出mod_headers.so ,然后在httpd.conf添加進(jìn)來,參考步驟如下:

                #cd /root/src/httpd-2.2.26/modules/mappers

                #/usr/local/apache/bin/apxs-c mod_headers.c

                #gcc-shared -o mod_headers.so mod_headers.o -lgdbm

                #/usr/local/apache/bin/apxs-i -A -n mod_headers mod_headers.so

                /usr/local/apache/bin/是正在使用的apahce的目錄

                第二步,在httpd.conf 中添加headers_module模塊:

                找到# LoadModule,在它的下一行插入:

                LoadModule headers_module  modules/mod_headers.so

                保存更新,然后在要修改的目標(biāo)站點(diǎn)的配置文件中,添加下面語句:

                <IfModulemod_headers.c>

                        <FilesMatch".(js|css|xml|gz|html)$">

                          Header append Vary: User-Agent

                        </FilesMatch>

                </IfModule>

                保存之后,然后重啟apache就可以生效了。不需要對服務(wù)器進(jìn)行重新編譯。
                 

                2如果web服務(wù)器是nginx的話,第一步要確定安裝了ngx_headers_more模塊,nginx源碼沒有包含該模塊,需要另行添加。安裝方法:

                wget ‘http://nginx.org/download/nginx-1.5.8.tar.gz’

                tar –xzvf nginx-1.5.8.tar.gz

                cd nginx-1.5.8/

                #here we assume you would install you nginx under/opt/nginx/.

                ./configure –prefix=/opt/nginx \--add-module=/path/to/headers-more-nginx-module

                make

                make install

                第二步,在配置文件nginx.conf中,添加如下代碼:

                gzip_vary on;

                more_set_headers -s 200 "Vary: ""Accept-Encoding, User-Agent";

                然后重啟服務(wù)器。
                 

                3)  如果是IIS

                web.config里加上如下配置,web.config位置在:%windir%\Microsoft.NET\Framework\.net版本號\CONFIG\Web.config <system.webServer>
                 <httpProtocol>
                 <customHeaders>
                <remove name="Vary"></remove>
                <add name="Vary" value="Accept-Encoding"></add>
                </customHeaders>
                </httpProtocol>
                </system.webServer>

                最后,同樣可以用上面方法再請求一次http頭,來判斷我們的設(shè)置有沒有成功。如果返回的頭中,有Vary:User-Agent 或者Vary:Accept-Encoding User-Agent 就表明我們設(shè)置成功了。

                3.完成內(nèi)容協(xié)商

                首先設(shè)計(jì)好針對不同設(shè)備的網(wǎng)站模板文件,可以和pc端相應(yīng)的模板文件放在同一個(gè)路徑下,命名成不同的文件比如index.pc.htm index.iphone.htm index.andori.htm index.tv.htm等都是網(wǎng)站首頁在不同設(shè)備下的模板文件等待調(diào)用。

                在這里簡單的僅以通過php代碼來實(shí)現(xiàn)的方式舉例,在url對應(yīng)的動(dòng)態(tài)文件中(可能是某個(gè)入口文件,也可能是通過入口文件include某控制文件),通過如下代碼實(shí)現(xiàn)動(dòng)態(tài)適配:

                $UA = strtoupper($_SERVER['HTTP_USER_AGENT']);

                if(preg_match("/(iPhone|iPad|iPod|Android|ucweb|windowsphone|Blackberry)/i", $UA)) {

                  /* 加載相應(yīng)的模板文件 */

                }

                這段代碼含義是,首先通過$UA =strtoupper($_SERVER['HTTP_USER_AGENT'])來獲取用戶 訪問的瀏覽器設(shè)備信息,通過匹配得到加載出不同設(shè)備系統(tǒng),瀏覽器下適配好的不同模板文件(以上匹配的UA只限iphone,ipad,ipod,android,uc移動(dòng)瀏覽器,windows phone,黑莓手機(jī)等設(shè)備),如果大家想了解更多的httpuser-agent關(guān)鍵字,可自行去網(wǎng)上查找。
                 

                4.添加metaapplicable-device標(biāo)簽

                Vary標(biāo)頭添加好后,服務(wù)器端就能根據(jù)請求頭中的UA信息,判斷客戶端是PC還是移動(dòng)設(shè)備甚至是什么移動(dòng)設(shè)備的請求了,有了這個(gè)服務(wù)器就能根據(jù)設(shè)定給出相應(yīng)的響應(yīng)文件,從而達(dá)到同一套url,不一樣的設(shè)備顯示不一樣的頁面樣式。為了讓百度更好地識別我們的頁面是 PC 還是 Mobile,就需要使用百度自定義的這個(gè) Meta applicable-device 標(biāo)簽。這個(gè)標(biāo)簽可以幫助百度校驗(yàn)自己的判斷,并及時(shí)進(jìn)行修正。這部分是在網(wǎng)站的模板里添加的。如果是PC端的模板文件,則在<head></head> 之間添加<metaname="applicable-device"content="pc">;如果是移動(dòng)端的模板文件,則在<head></head> 之間添加<metaname="applicable-device"content=" mobile ">;這樣即使通過服務(wù)器的設(shè)置BaiduSpider判斷錯(cuò)誤了,這個(gè)標(biāo)簽的設(shè)置也能起到修正的作用。

                5.Firefox插件

                之前站長學(xué)院文章<代碼適配移動(dòng)站點(diǎn)對百度友好案例分享>中提到過Google 瀏覽器來模擬UA效果的插件,在此我再介紹一款火狐瀏覽器的UA模擬插件,它可以幫助各位站長輕松的偽裝”成其他平臺/品牌的瀏覽器,來測試自己網(wǎng)站的適配結(jié)果

                首先通過https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/ 下載并安裝此插件,

                完成后,點(diǎn)擊工具欄上的按鈕,打開UserAgent Switcher的菜單

                 

                選擇“EditUser Agent”“UserAgent Switcher”=>"Options",打開如下的設(shè)置頁面。

                 

                點(diǎn)擊右下角的“Downloadlists of user agents to import...”鏈接,在打開的網(wǎng)頁中找到下圖中標(biāo)注的位置,我們可以找到最常用的UA列表了,這里直接給出列表的下載地址,方便大家下載。

                 

                下載完成后,回到設(shè)置頁面,點(diǎn)擊左下方的“Import...”按鈕,將剛才下載的useragentswitcher.xml 導(dǎo)入到擴(kuò)展中即可 ,之后我們就可以在瀏覽器上通過切換訪問剛剛適配好的頁面啦,之后補(bǔ)充一點(diǎn)我們?nèi)匀豢梢栽诂F(xiàn)有的UA基礎(chǔ)上“新建”(New)以及“修改”(Edit),來滿足我們的要求。

                效果如下:

                熱門關(guān)鍵詞: 代碼適配 百度友好代碼
                欄目列表
                推薦內(nèi)容
                熱點(diǎn)內(nèi)容
                展開