標簽:站長經歷
經驗雜筆忘給主域名解析后對301跳轉的一些研究
先森前些日子將萬網/阿里云域名DNS地址修改到DNSPod,當時高興的不得了,因為DNSPod對搜索引擎線路的解析非常準確,但卻竟然忘記了對主域名進行解析。直到一位學弟告訴先森,先森的網站不加www無法訪問。先森當時就懵逼了——被萬網慣壞了。先解釋下為什么會忘記。用過萬網云虛擬主機的同學應該都知道,在萬網主機管理控制臺內,就有域名的301跳轉設置選項:萬網主機管理控制臺因為萬網這邊301跳轉是設置好的,所以先森第一次設置后,就再沒管過主域名的事情,結果連換DNS服務商了都沒有想起主域名解析的問題。連解析都沒解析,還談什么301跳轉啊,白癡了一回。但通過這次的白癡行為,先森對301跳轉總結出了3種方法。為什么要301重定向?簡單的說,301重定向是對搜索引擎友好,將一個網站的權重很好的轉移到另一個網站。常用在主域名與www域名互轉,老域名轉移到新域名。第一種:DNS直接設置301跳轉DNSPod的解析設置中,記錄類型包括一種“顯性URL”記錄,這種記錄DNSPod用的就是301跳轉。所以我們在為主域名設置301跳轉的時候,可以直接使用這種方式。DNSPod顯性URL設置需要注意的是,如果你的域名轉入DNSPod的時間不足30天,不能設置顯性/隱形URL記錄類型。但是可以提交工單的方式獲得設置權限。通過這樣的設置,就能很簡單的將主域名301重定向到www的域名了。第二種:設置CNAME記錄看到這種方法可能大家會覺得有點奇怪,其實這樣還是用的萬網主機控制臺的跳轉。直接給主域名設置CNAME記錄,記錄值填www的地址。用了CDN的也可以直接填CDN的CNAME地址,先森覺得這樣可以減少一次解析的次數。至于為什么不直接設置A記錄,原因是網站最好不要泄露自己的真實IP地址。CNAME記錄設置這樣設置的前提是,我們使用的是萬網云虛擬主機,并在萬網主機管理控制臺設置了301跳轉。如此一來,主域名會通過CDN再解析到主機上,進而進行301跳轉。第三種:修改.htaccess此方法適用于Apache服務器。上面提到的都是用DNS解析的方法,如果是直接解析到服務器上,那么就可以使用這種方法了。在網站根目錄的.htaccess文件中,添加下列三行代碼即可實現:RewriteEngine onRewriteCond %{HTTP_HOST} ^capjsj.cn [NC]RewriteRule ^(.*)$ //www.cnidcc.cn/$1 [L,R=301]添加時注意修改域名。最后說兩句關于跳轉的速度,先森只測試了第一種和第二種的ping通時間。第一種先森本地的ping通時間在190ms左右,第二種的話在20ms左右。但這只是ping通時間,第一種當然ping通之后就開始跳轉了,第二種開始跳轉的時間具體是多少,先森還不知道要怎么測。如果看跳轉到打開的總時間,各地DNS緩存的時間又不同,先森想從奇云測來測試也不是那么方便。所以,要用那種方式做301跳轉就根據各位的喜好了。
經驗雜筆分享大一時寫的寬帶撥號bat批處理腳本
大一的時候嫌電腦剛開機的時候右下角網絡按鈕根本不能點,要等一會兒才能點開寬帶撥號界面,覺得很麻煩,就研究了一下批處理腳本,寫了一段能開機就自動撥號,撥號失敗自動重試的腳本。此文也算記錄下先森曾經的折騰了。這也快畢業了,就把一些經驗分享出來,希望有學弟學妹們能用的上。可惜,現在一般都是用無線路由器了,用的著的應該很少了。批處理腳本批處理腳本的內容很簡單,3行搞定::loop@echo offrasdial 寬帶連接 028######## ******||goto loop使用方法:①新建文本文檔,將上面的代碼復制,然后將028########改成你的寬帶賬號,后面的******則改成寬帶密碼,保存文檔。②將文檔后綴.txt改成.bat③依次點擊win鍵 --> 所有程序 --> 找到“啟動”,右鍵“打開”。開始-啟動④將.bat文件拖進“啟動文件夾”,這一步是為了讓其開機啟動。啟動文件夾效果最終達到的效果會是這樣:⑴ 批處理腳本會在開機時自動運行;⑵ 連接失敗不斷重試。⑶ 寬帶連接成功會自動退出;再說幾句雖然現在大家基本開始用無線路由器了,但是我們成都航空職業技術學院堪稱大學中的高中,每晚23點斷電,24點斷網。斷電之后,無線路由器總不能用了吧,男生總是不甘熄燈就睡覺,所以本文的代碼還是有點市場的。先森自己目前還在用,畢竟剛斷網的那會,你不反復撥號幾次你是登錄不上的。如果要讓這段批處理腳本開機啟動,你得注意你的殺毒軟件,別把它禁止開機啟動了。再簡單的說下撥號時遇到的錯誤。錯誤651這個可能是你雖然插了網線,但是網線沒有插穩,重新插拔再做嘗試一般能夠解決。錯誤691這個錯誤一般出現在剛開始撥號的時候,一般重復撥號幾次就能連上寬帶了。如果一直顯示691的話,那就看看是不是你的寬帶欠費了。
經驗雜筆直播了一段用騰訊云校園計劃1元購買免費域名+專享服務器及安全認證
無意中在中國博客聯盟的群里面直播了一次一元買服務器,還透露了先森免費買了一個.cn的域名,讓群里的博主羨慕有之,鄙視有之。主要是.cn域名和騰訊云主機很多博主瞧不起。但既然都直播了,先森還是發個博文來記錄一下折騰經歷,畢竟是可以得免費域名的。這是什么活動?先森參加的是騰訊云的云+校園計劃,云+校園計劃是騰訊云為在讀高校生量身打造的扶持計劃,旨在為高校生提供先進的技術支持、資金扶持和經驗分享。同時讓更多高校生了解云計算及互聯網知識,為后續職業、創業發展奠定基礎。想參加這個活動,首先你得是在校全日制統招大學生,然后需要完成騰訊云平臺的學生認證。優惠的截止日期就是你學生生涯的結束日期。說到這先森就傷心,要畢業了,55555~下面先森摘抄一下活動內容:【1元云主機-65元服務器代金券】代金券有效期:31天,用戶使用代金券滿65減64元;指定配置:CPU1核、內存1G、帶寬1M、贈送系統盤linux8G/windows50G(每人限買1臺,如超過指定配置,需補齊價)發放規則:通過學生認證后1個工作日內發放首次代金券,按月扶持,每月提前7天自動發放;特別注意:用戶連續90天不繼續使用騰訊云服務(騰訊云域名除外),將被認為放棄特權,系統不再發放代金券?!久赓M域名-38元域名代金券】代金券有效期:1年,首次代金券金額38元;指定配置:.cn域名1年,如超過指定配置,需補齊差價;發放規則:通過學生認證后1個工作日內發放首次代金券,按年扶持,每年提前1個月自動發放,每次50元。直播購買域名因為是之前購買的,所以這里就不多說了,反正大家在這把cn當免費域名吧。下面講購買云服務器。選擇云服務器得按照標準來,什么都是最低標準的,1核、1G、1M,沒什么選的,值得注意的是購買之前要創建SSH密鑰,購買的時候要用來選擇。購買騰訊云服務器這也就是按照要求的,最低檔65元/月。不得不說服務器還真貴,65元個一月,相較而言域名的續費都不算啥了。還好,騰訊云會在下個月的前七天發代金券。下面開始付錢。本來65元的東西,結果發現能用優惠券,用了之后Duang的一下變成1元錢,這種體驗真的很好。當然買域名的時候更爽,38元的域名一用代金券錢都不用給了。支付的方式先森選擇了微信支付,畢竟微信錢包里的錢都是搶紅包搶來的,用著不心疼。而且微信提現都要收手續費了,這種時候正是體現微信錢包作用的時候了。微信二維碼掃碼支付微信二維碼掃碼支付先森故意把二維碼發到中國博客聯盟群里面,那群混蛋們果然沒有幫先森支付一波的。最終先森成功的搶在其他人支付前支付成功。這里先森就完成了1元購買cn免費域名+云服務器了,再來曬一波訂單:騰訊云付費訂單希望看到上圖的博主們不要眼紅,是學生就趕緊注冊一波,不是的話...就找親戚家的孩子幫幫忙吧。當然也不要把騰訊云的服務器看的太重,反正先森是準備拿來練手的。最終還是購買了騰訊云的東西,騰訊,你夠狠。下面再來講講關于騰訊云安全認證的事情。騰訊云安全認證可能不了解的朋友還會納悶,什么是騰訊云安全認證?其實對于此,我們應該都不陌生,騰訊云對其解釋一大堆,其實我們看中的僅僅一點:QQ對話框安全鏈接認證展示:也就是在QQ里面發你的網站鏈接的時候,會顯示綠色安全的勾勾。實際上也并無卵用,只為了好看。騰訊云其它的介紹無非就是為其增加賣點。其實先森在接入騰訊云CDN的時候,就談到過騰訊云安全認證的事情。但是那時候也說了,在申請的時候,主營業務選擇框不能彈出選擇,所以申請不了。有時候甚至連申請認證頁面都進入不了,直接跳轉到購買云服務器的頁面,讓你購買之后再訪問。現在先森購買了騰訊云的云服務器了,趕緊去嘗試了一波。結果一看,果然可以選擇主營業務了:騰訊云安全認證主營業務變為可選既然可選,當然要嘗試申請一下,能否成功暫且不說嘛。申請騰訊云安全認證看到提示上說預計3個工作日,想到今天周六,也就打算不管了。沒想到的是,沒過多久,騰訊云發了一封郵件、一條短信,以及站內通知,提示申請結果校驗完畢。申請結果當然是杠杠的失??! 申請認證不通過好吧,還是去看看申請不成功的原因,畢竟還是折騰了半天。赤裸裸的結果就是沒有使用騰訊云的主機:未通過騰訊云安全認證原因點擊查看具體原因,就來到了詳細介紹騰訊云安全的頁面,先森還是仔細看了下。發現網站唯一不滿足的條件也是最重要的條件,以及先森不能接受的條件,就在第一條:騰訊云安全認證申請要求既然如此,除非是真心打算好好在騰訊云建站的,其他人就還是別想了吧。QQ聊天窗口的事情就隨他去吧,反正我們的網站主要也不是在QQ上傳播的。另外還有個什么安全聯盟,這里就不多說了。最后說幾句本文中所述活動的重要依托,是有一個全日制大學生的身份。先森作為大學晚期學生,對學校還是有著非常多的不舍的,想著即將畢業,真的有點不甘。所以奉勸各位學生博主們,要做什么就趁著大學期間,趕緊實踐了,不然一錯過可能就是一輩子的事情了。下面對文中提到的一些內容做些傳送門,方便需要之人:【云+校園計劃】 1元=免費域名+專享服務器騰訊云SSH密鑰-控制臺騰訊云安全認證 - 騰訊云平臺一個字,就是干!
WordPress技巧Apache上WordPress免插件生成適應360站長平臺sitemap.xml的php代碼
先森使用了WordPress的DX-Seo插件,該插件已經能自動生成sitemap.xml文件了,但是先森為什么還要折騰有張戈博客提供的代碼版呢?因為DX-Seo生成的sitemap.xml文件360不能識別,而百度則識別正常。先來看看先森用了張哥代碼版的效果,我設置的代碼版是sitemap-360.xml文件:360站長平臺 Sitemap提交DX-Seo生成的sitemap.xml文件在360中鏈接數量一直顯示為0.而用了張哥的代碼版生成的則非常給力。下面就為大家介紹這個WordPress技巧。既然是代碼版,首先你得確定你有顆愿意折騰的心。PHP代碼部分張戈提供的代碼版sitemap.xml文件可以同時生成首頁、文章、單頁面、分類和標簽,這點比網上其他代碼要完善的多。<?phprequire('./wp-blog-header.php');header("Content-type: text/xml");header('HTTP/1.1 200 OK');$posts_to_show = 1000; echo '<?xml version="1.0" encoding="UTF-8"?>';echo '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:mobile="http://www.baidu.com/schemas/sitemap-mobile/1/">'?><!-- generated-on=<?php echo get_lastpostdate('blog'); ?> Diy By 張戈博客(http://zhangge.net)--> <url> <loc><?php echo get_home_url(); ?></loc> <lastmod><?php $ltime = get_lastpostmodified(GMT);$ltime = gmdate('Y-m-d\TH:i:s+00:00', strtotime($ltime)); echo $ltime; ?></lastmod> <changefreq>daily</changefreq> <priority>1.0</priority> </url><?php/* 文章頁面 */ $myposts = get_posts( "numberposts=" . $posts_to_show );foreach( $myposts as $post ) { ?> <url> <loc><?php the_permalink(); ?></loc> <lastmod><?php the_time('c') ?></lastmod> <changefreq>monthly</changefreq> <priority>0.6</priority> </url><?php } /* 文章循環結束 */ ?> <?php/* 單頁面 */ $mypages = get_pages();if(count($mypages) > 0) { foreach($mypages as $page) { ?> <url> <loc><?php echo get_page_link($page->ID); ?></loc> <lastmod><?php echo str_replace(" ","T",get_page($page->ID)->post_modified); ?>+00:00</lastmod> <changefreq>weekly</changefreq> <priority>0.6</priority> </url><?php }} /* 單頁面循環結束 */ ?> <?php/* 博客分類 */ $terms = get_terms('category', 'orderby=name&hide_empty=0' );$count = count($terms);if($count > 0){foreach ($terms as $term) { ?> <url> <loc><?php echo get_term_link($term, $term->slug); ?></loc> <changefreq>weekly</changefreq> <priority>0.8</priority> </url><?php }} /* 分類循環結束 */?> <?php /* 標簽(可選) */$tags = get_terms("post_tag");foreach ( $tags as $key => $tag ) { $link = get_term_link( intval($tag->term_id), "post_tag" ); if ( is_wp_error( $link ) ) return false; $tags[ $key ]->link = $link;?> <url> <loc><?php echo $link ?></loc> <changefreq>monthly</changefreq> <priority>0.4</priority> </url><?php } /* 標簽循環結束 */ ?> </urlset>將以上代碼保存為sitemap.php,傳到網站根目錄。一定要記住,是網站根目錄。眼尖的同學估計已經發現,代碼結尾處有一個</urlset>的關閉標簽,這并不是多寫了哦,千萬不要刪除。Apache偽靜態如果要看Nginx的偽靜態代碼可以去下面的原文鏈接張戈博客那里去看,先森本文著重講下Apache方面的偽靜態。張哥提供的Apache偽靜態代碼是在.htaccess中添加下面的代碼:RewriteRule ^(sitemap)\.xml$ $1.php先森實際操作后發現,可能還需要在前面加上一句,也就是在.htaccess中添加下面的代碼:RewriteEngine onRewriteRule ^(sitemap)\.xml$ $1.php由于.htaccess是比較重要的文件,在修改前請務必備份。做好偽靜態規則后,就可以直接訪問sitemap.xml看看效果了,比如 //www.cnidcc.cn/sitemap-360.xml 總結這篇WordPress技巧一定要有愿意折騰的心,實際操作中可能會出現很多意外的問題。下面總結一下需要注意的地方:①php文件要放在網站根目錄下;②注意不要誤刪除結尾的</urlset>標簽;③php代碼可以根據實際需求增減內容,如刪除標簽部分的php代碼;④修改.htaccess前注意備份;⑤php文件設置的什么文件名,.htaccess文件中寫規則時則做相應的修改。如新建的是sitemap-360.php,那么.htaccess規則中的(sitemap)需改成(sitemap-360)。
WordPress技巧WordPress針對360搜索智能摘要的優化措施
先森之前將博客針對360搜索智能摘要進行了優化,做好之后提交了就沒有再管了??凑鹃L統計的時候看到了360搜索引擎引入的訪問,再去看360看關鍵詞搜索的效果,發現智能摘要生效了。再查詢了下收錄,看到收錄的文章中只要帶圖片的,都變成智能摘要的樣式了,效果不錯,趕緊分享下。雖然360流氓依舊,但是它流氓的結果還是比較顯著的——360搜索在搜索引擎中的分量越來越重。360瀏覽器、360導航被360有錢聯盟的能手們裝進了家家戶戶,所以360搜索用的人就越來越多了。既如此,作為站長,就應該滿足網民們的喜好。重點是,先森感覺相對于百度,360顯得要親民一些。360搜索智能摘要先森先將360的原文摘抄一下:智能摘要有什么好處?智能摘要有利于網站結果在網頁搜索中更具有時效性的展現,有別于一般網站結果的展現,將會吸引更多用戶的點擊。用戶的點擊增長則對于網站收錄權重和排序權重都會帶來有力的影響。智能摘要實現的前提是需要站長提供結構化的數據結構化數據在這里特定指對網站具有一致特征的數據,每一列數據都不能再細分,數據類型一致,且數據之間是唯一關聯的數據,所有關系型數據庫都可以理解為結構化數據。智能摘要展現范例360搜索智能摘要,是通過網頁特殊的標簽將需要的數據提供給搜索引擎,并在搜索結果中按照既定的模版展現的實現形式,目的是為了提升搜索結果的體驗,幫助站長提升搜索結果點擊率。360搜索智能摘要得到很多大站的支持,包括阿里巴巴,搜狐,新浪,迅雷看看,縱橫中文網,爆米花等等,取得良好效果。以上是360站長平臺的解釋。如何優化在網站上添加360智能摘要能識別的Meta標簽:360搜索智能摘要標準化的標簽模版有很多種類型,我們WordPress基本上都是被人拿來做博客,所以我們直奔博客的標準化標簽模板去就行了。如下是360分享的博客標準化標簽模板:<!--必填--><meta property="og:type" content="blog"/><meta property="og:image" content="圖片地址"/><meta property="og:release_date" content="發表時間"/><!--選填--><meta property="og:title" content=" 博客標題"/><meta property="og:description" content=" 博客描述" /><meta property="og:author" content="博客作者"/>會DIY的同學估計自己兩下就能搞定了,先森借鑒一下張戈博客關于百度星火計劃的代碼,輕松實現。實話說,先森本身也是先部署了星火計劃的代碼,再來部署的360智能摘要的。只使用360搜索智能摘要的,則用以下代碼:/*** WordPress針對360搜索智能摘要的優化措施* 只添加360搜索智能摘要版* 文章地址://www.cnidcc.cn/wpr_zd360ssznzydyhcs.html*/add_action('wp_head', 'starfire',0);if(!function_exists('starfire')){ function starfire(){ if (is_singular()) { date_default_timezone_set('PRC'); //必填部分 echo '<meta property="og:type" content="blog"/> <meta property="og:release_date" content="'.get_the_date('c').'"/> <meta property="og:image" content="'.get_mypost_thumbnail($post->ID).'" />'; //選填部分 //輸出文章標題+分隔符+網站名稱,不喜歡這種形式的請自行改造(如果不需要這個標簽,請刪除以下三行)。 echo '<meta property="og:title" content="'.trim(wp_title('',0)).' | '; bloginfo('name'); echo '" />'; //默認截取文章220個字作為摘要,可以自行修改下行220為其他整數 echo '<meta property="og:description" content="'.get_mypost_excerpt($post->ID, 220).'……" />'; //博客作者 echo '<meta property="og:author" content="'; bloginfo('name'); echo '" />'; } }}/*** WordPress 獲取文章摘要整理版 By 張戈博客*/function get_mypost_excerpt($post_ID,$len){ if (!function_exists('utf8Substr')) { function utf8Substr($str, $from, $len) { return preg_replace('#^(?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.$from.'}'. '((?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.$len.'}).*#s', '$1',$str); } } if(!$post_content){ $post = get_post($post_ID); $post_content = $post->post_content; } if ($post->post_excerpt) { $description = $post->post_excerpt; } else { if(preg_match('/<p>(.*)<\/p>/iU',trim(strip_tags($post->post_content,"<p>")),$result)){ $post_content = $result['1']; } else { $post_content_r = explode("\n",trim(strip_tags($post->post_content))); $post_content = $post_content_r['0']; } $description = utf8Substr($post_content,0,$len); return $description; }}/*** WordPress 獲取文章圖片加強版 By 張戈博客*/function get_mypost_thumbnail($post_ID){ if (has_post_thumbnail()) { $timthumb_src = wp_get_attachment_image_src( get_post_thumbnail_id($post_ID), 'full' ); $url = $timthumb_src[0]; } else { if(!$post_content){ $post = get_post($post_ID); $post_content = $post->post_content; } preg_match_all('|<img.*?src=[\'"](.*?)[\'"].*?>|i', do_shortcode($post_content), $matches); if( $matches && isset($matches[1]) && isset($matches[1][0]) ){ $url = $matches[1][0]; }else{ $url = ''; } } return $url;}如果想要即滿足百度的星火計劃,又想滿足360搜索的智能摘要,則使用下面的代碼:/*** WordPress針對360搜索智能摘要的優化措施* 百度星火、360搜索智能摘要同時滿足版* 文章地址://www.cnidcc.cn/wpr_zd360ssznzydyhcs.html*/add_action('wp_head', 'starfire',0);if(!function_exists('starfire')){ function starfire(){ //新增判斷,如果是原創文章才加入星火計劃META申明 $copy = get_post_meta($post->ID, 'author', true); if (is_singular()) { date_default_timezone_set('PRC'); //360智能摘要必填部分 echo '<meta property="og:type" content="blog"/> <meta property="og:release_date" content="'.get_the_date('c').'"/> <meta property="og:image" content="'.get_mypost_thumbnail($post->ID).'" />'; //360智能摘要選填部分 //輸出文章標題+分隔符+網站名稱,不喜歡這種形式的請自行改造(如果不需要這個標簽,請刪除以下三行)。 echo '<meta property="og:title" content="'.trim(wp_title('',0)).' | '; bloginfo('name'); echo '" />'; //默認截取文章220個字作為摘要,可以自行修改下行220為其他整數 echo '<meta property="og:description" content="'.get_mypost_excerpt($post->ID, 220).'……" />'; //博客作者 echo '<meta property="og:author" content="'; bloginfo('name'); echo '" />'; if(empty($copy)){ //百度星火計劃必填部分 echo '<meta property="og:type" content="article"/> <meta property="article:published_time" content="'.get_the_date('c').'"/>'; echo '<meta property="article:author" content="';bloginfo('name');echo '" />'; //百度星火計劃選填部分 //輸出博客名稱,如果想改成其他內容,比如作者請自行修改 bloginfo('name') echo '<meta property="article:published_first" content="'; bloginfo('name'); echo ','; the_permalink(); echo '" />'; } } }}/*** WordPress 獲取文章摘要整理版 By 張戈博客*/function get_mypost_excerpt($post_ID,$len){ if (!function_exists('utf8Substr')) { function utf8Substr($str, $from, $len) { return preg_replace('#^(?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.$from.'}'. '((?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.$len.'}).*#s', '$1',$str); } } if(!$post_content){ $post = get_post($post_ID); $post_content = $post->post_content; } if ($post->post_excerpt) { $description = $post->post_excerpt; } else { if(preg_match('/<p>(.*)<\/p>/iU',trim(strip_tags($post->post_content,"<p>")),$result)){ $post_content = $result['1']; } else { $post_content_r = explode("\n",trim(strip_tags($post->post_content))); $post_content = $post_content_r['0']; } $description = utf8Substr($post_content,0,$len); return $description; }}/*** WordPress 獲取文章圖片加強版 By 張戈博客*/function get_mypost_thumbnail($post_ID){ if (has_post_thumbnail()) { $timthumb_src = wp_get_attachment_image_src( get_post_thumbnail_id($post_ID), 'full' ); $url = $timthumb_src[0]; } else { if(!$post_content){ $post = get_post($post_ID); $post_content = $post->post_content; } preg_match_all('|<img.*?src=[\'"](.*?)[\'"].*?>|i', do_shortcode($post_content), $matches); if( $matches && isset($matches[1]) && isset($matches[1][0]) ){ $url = $matches[1][0]; }else{ $url = ''; } } return $url;}請將以上代碼二選一添加到WordPress主題functions.php函數模板當中,新增的Meta標簽將從wp_head()這個函數輸出到前臺。若發現沒效果,那就只有直接將代碼進行修改,將輸出Meta標簽部分單獨放置在header.php中的<head>中(個別主題可能未用wp_head()函數)。使用第二段代碼的,如果不是原創文章,我們可以新增一個自定義欄目author,值任意或者填寫原文地址。而原創文章則不新增這個欄目。有了這個自定義欄目做判斷,代碼就只會在原創文章頁面中插入星火計劃的META申明了,不至于違反百度的游戲規則!360搜索的智能摘要則不會受到自定義欄目的影響。如果想對星火計劃有更多了解的朋友,可以去看看張戈博客的介紹:張戈博客:WordPress針對百度星火計劃2.0原創保護的優化措施前臺效果上文為大家提供了兩種代碼,不同的代碼效果也是不一樣的,我們只需要針對文章和頁面進行優化,所以代碼中有文章和頁面的判斷。加入代碼后,到前臺隨便打開一篇文章,然后查看源代碼即可見到代碼的效果。首先是只使用360搜索智能摘要的:360搜索智能摘要然后是百度星火、360搜索智能摘要同時滿足版:百度星火、360搜索智能摘要同時滿足版到這里,關于兩個搜索引擎的Meta標簽優化就做好了,至于兩種標簽規范放在一起是否會產生問題,短時間內還不得而知,不過問了下張戈博客的張哥,好像是沒什么問題的。讓時間來檢驗吧。部署好之后,還要到360站長平臺提交哦,提交鏈接的注意事項請看下文。360智能摘要的要求根據上面的解釋我們不難看出,360推出的這個智能摘要是為了增加點擊、權重的,符合我們站長的需求。而提交的前提符合智能摘要的要求,先森整理了一下基本的注意事項:1. 提交之前檢查頁面是否被收錄,只有索引了頁面才有可能被展現,進而通過提升點擊率來影響權重,因而建議選擇被索引,有展現,最好是有點擊的頁面進行重點提交。2.正確的按照要求插入了頁面標簽。3.提交預覽URL必須是可以正常訪問,解析的。4. 檢查站點是否限制了360蜘蛛的抓取,如果限制了蜘蛛抓取,會因為無法下載頁面而不能展現,且多次提交會被拉入限制申請黑名單。5. 一個站點一個類型提交一個預覽地址即可,避免重復提交,一定時間內提交次數太頻繁,會被視為作弊。6.提交并不一定展現,展現與否取決于頁面的質量和整體頁面的相關性。
經驗雜筆用cookie記住用戶信息后ajax實現實時顯示Gravatar頭像并實時緩存到本地
首先說一點,本文的內容是先森研究了幾天的成果,并且還導致了網站幾天沒有更新。先森之前遇到了開啟CDN后網站會連先森登錄之后的顯示樣式一起緩存的問題。想想還是很危險的,要是文章頁第一次是被已知用戶訪問,那么其他所有人訪問后就是他看到的樣子,那樣說不定連他的郵箱地址都被暴露了。這個問題很容易解決,通過張戈博客的cookie記住用戶信息的方法,再加上讓所有人訪問網站都是未登錄狀態,這個問題就OK了。再加上一些優化用戶體驗的操作,也沒有花先森多少時間,但是gravatar頭像的事情,卻一直橫在了先森心中,先森的強迫癥就又犯了。關于過往研究的歷程,先森已經分享過了,如果沒有看的最好可以去看看,本文是建在之前的基礎之上的:用cookie解決網站開啟CDN緩存之后已知用戶頭像昵稱被緩存等系列問題用cookie記住用戶信息后隱藏信息輸入框,優化用戶體驗預期效果先森想實現的顯示Gravatar的方式,并不是簡單的用多說或者Gravatar中國的服務器的那種。先森之前就用的是將頭像本地緩存,用以提高加載速度。所以先森想實現的是:1.用戶是已知用戶的時候,頁面打開時自動加載緩存在本地服務器的其郵箱對應的Gravatar頭像。2.如果用戶修改或填寫郵箱的時候,則自動將其對應的Gravatar緩存到本地服務器,再顯示出來。如果服務器不使用本地服務器的話,上面的兩條很容易實現。因為不用緩存,而Gravatar的頭像鏈接又是固定的http://www.gravatar.com/avatar/xxxx(xxxx為郵箱的md5加密值),只要獲取到郵箱,將郵箱通過哈希算法變為md5加密值,將這段MD5值填入鏈接中,就是用戶的頭像了。但難就難在先森想要將頭像同時本地緩存。不過,經過幾天的努力,繞了很大的圈子,總算是搞定了。效果實現相信很多WordPress站長的評論源代碼,是由comments.php、comments-ajax.php、comments-ajax.js三個文件構成。如果是則很會很方便,不是也沒有多大差別。1.將Gravatar頭像緩存到本地服務器這個教程早就已經爛大街了,為了本文內容先森不得不重提一遍。為什么要緩存到本地服務器?因為Gravatar是國外服務器的,很容易被墻,且容易訪問超時,導致網頁加載速度變慢。緩存到本地服務器就可以有效的解決這個尷尬。當然,你也可以直接把頭像緩存到七牛云儲存,也就沒有本文這么麻煩了。為什么先森要選擇麻煩的方法?愛折騰唄~將Gravatar頭像緩存到本地服務器的方法就是,在你的functions.php中加入以下代碼://本地緩存gravatar頭像function fa_cache_avatar($avatar, $id_or_email, $size, $default, $alt){ $avatar = str_replace(array("www.gravatar.com", "0.gravatar.com", "1.gravatar.com", "2.gravatar.com"), "gravatar.duoshuo.com", $avatar); $tmp = strpos($avatar, 'http'); $url = get_avatar_url( $id_or_email, $size ) ; $url = str_replace(array("www.gravatar.com", "0.gravatar.com", "1.gravatar.com", "2.gravatar.com"), "gravatar.duoshuo.com", $url); $avatar2x = get_avatar_url( $id_or_email, ( $size * 2 ) ) ; $avatar2x = str_replace(array("www.gravatar.com", "0.gravatar.com", "1.gravatar.com", "2.gravatar.com"), "gravatar.duoshuo.com", $avatar2x); $g = substr($avatar, $tmp, strpos($avatar, "'", $tmp) - $tmp); $tmp = strpos($g, 'avatar/') + 7; $f = substr($g, $tmp, strpos($g, "?", $tmp) - $tmp); $w = home_url(); $e = ABSPATH .'avatar/'. $size . '*'. $f .'.jpg'; $e2x = ABSPATH .'avatar/'. ( $size * 2 ) . '*'. $f .'.jpg'; $t = 1209600; //緩存更新時間 if ( (!is_file($e) || (time() - filemtime($e)) > $t) && (!is_file($e2x) || (time() - filemtime($e2x)) > $t ) ) { copy(htmlspecialchars_decode($g), $e); copy(htmlspecialchars_decode($avatar2x), $e2x); } else { $avatar = $w.'/avatar/'. $size . '*'.$f.'.jpg'; $avatar2x = $w.'/avatar/'. ( $size * 2) . '*'.$f.'.jpg'; if (filesize($e) < 1000) copy($w.'/avatar/default.jpg', $e); if (filesize($e2x) < 1000) copy($w.'/avatar/default.jpg', $e2x); $avatar = "<img alt='{$alt}' src='{$avatar}' srcset='{$avatar2x}' class='avatar avatar-{$size} photo' id='real-time-gravatar' height='{$size}' width='{$size}' />"; } return $avatar;}add_filter('get_avatar', 'fa_cache_avatar',1,5);如果你的網站已經實現則忽略,沒有的話就先添加備用。2.新建gravatar.php上面的代碼是修改了WordPress的get_acatar函數。而我們想要實時的緩存Gravatar郵箱,則需要將郵箱的MD5值傳遞給get_acatar函數。上面的代碼最后會有輸出,而我們并不需要它的輸出,只要它將頭像緩存即可。所以我們需要新建一個gravatar.php文件,將ajax傳遞過來的郵箱MD5值接收,并讓get_acatar函數將對應的頭像緩存。gravatar.php的代碼如下:<?php //緩存頭像if ( 'POST' != $_SERVER['REQUEST_METHOD'] ) { header('Allow: POST'); header('HTTP/1.1 405 Method Not Allowed'); header('Content-Type: text/plain'); echo "請不要直接訪問該頁面"; exit;}require( dirname(__FILE__) . '/../../../wp-load.php' );//使用 WordPress自帶函數進行數據提交 $email = $_POST['email'];//獲取郵箱md5值 get_avatar( $email, $size = '48' ); //將頭像緩存 ?>其中,下面這段代碼很重要:require( dirname(__FILE__) . '/../../../wp-load.php' );如果不加上的話會導致數據存入失敗,POST訪問也會返回錯誤500。這也是擋住了先森研究很久的一個問題。之前代碼中之后最后的兩句,獲取和緩存,結果一直顯示不成功。訪問錯誤500后來在百度找原因一直沒找到,卻意外看到了一篇寫用ajax提交評論的優點的文章中有一句“使用wordpress自帶的admin-ajax.php進行數據提交”,先森感覺腦子一炸,將comments-ajax.php中一句不起眼的代碼(即上面那句)復制過來。一嘗試。OK返回成功。3.ajax動態刷新ajax是一種在不刷新整個頁面,與服務器實現數據交換的網頁開發技術。這個技術被稱為稱為“藝術”,但先森是不懂藝術的,所以這幾天花的最多的時間就是在這里了。先森還專門跑去w3school學了一下ajax方面的教程,結果也沒懂個啥,僅僅是對概念更清楚了些。這個技術在本文的擔當是,動態的將郵箱md5值提交給服務器,服務器將頭像緩存。我們的ajax代碼,可以加入到comments-ajax.js中,也可以自己新建一個js文件。首先,我們需要將Gravater郵箱地址變換為MD5值,需要用到一串復雜的算法,將以下代碼加入js中:Gravatar頭像郵箱轉MD5下載因為比較長,所以提供下載,不直接將代碼貼出來了。接下來將下面的代碼加入comments-ajax.js或你準備好的js文件中:/**張戈博客原創*成航先森修改* //www.cnidcc.cn/ycookiejzyhxxhsxssxsgravatartxbsshcdbd.html ?*/var Umail = decodeURIComponent(GetCookie('email'));//通過cookie獲取用戶郵箱,并解碼var Uname = decodeURIComponent(GetCookie('author'));var Umail_md5 = "";if (Umail != "null" && Umail != "" && Umail != null) {//如果郵箱有內容,則賦值 var Umail_md5 = hex_md5(Umail);}if (Umail_md5 != "" && Umail_md5 != null && Umail_md5 != "null") {//如果郵箱哈希后存在內容 jQuery(document).ready(function($) { jQuery('#comment-author-info').hide();//隱藏信息填寫框 }); /*下面的real-avatar是包裹著頭像的div*/ document.getElementById('real-avatar').innerHTML = "<img src='//cos.capjsj.cn/avatar/96*" + Umail_md5 + ".jpg' width='48' height='48' alt='avatar' class='avatar avatar-48 photo' id='real-time-gravatar'>"; var changeMsg = '修改信息'; var closeMsg = '關閉'; function toggleCommentAuthorInfo() { jQuery('#comment-author-info').slideToggle('slow', function() { if (jQuery('#comment-author-info').css('display') == 'none') {//如果信息填寫框被隱藏 jQuery('.switch-author').text(changeMsg);//改變標簽內容為“修改信息” } else { jQuery('.switch-author').text(closeMsg);//改變標簽內容為"關閉" } }); }}var gar_img = document.getElementById("real-time-gravatar");/*頭像img標簽*/var U_email = document.getElementById("email");var textarea = document.getElementById("comment");/*評論輸入框*/var KaK = navigator.userAgent.toLowerCase();/*獲取瀏覽器信息*/var chrome = KaK.indexOf('webkit') != -1;function changeGravatar() { email_value = U_email.value; email_md5 = hex_md5(email_value); php_url=js_url.replace('comments-ajax.js','gravatar.php');//替換js鏈接中的文件名 $.ajax({ type:'POST', data:{ "email": email_value, }, //ajax對象文件:gavater.php url:php_url, cache: false, }); new_ga = "//cos.capjsj.cn/avatar/48*" + email_md5 +".jpg"; newGravatar(new_ga);/*啟動下面的腳本*/};function newGravatar(new_ga) { gar_img.setAttribute('src', new_ga);/*將圖片鏈接換成新的鏈接*/};if (chrome) { U_email.onblur = changeGravatar;/*鼠標離開輸入框時執行 JavaScript 代碼*/} else { U_email.onchange = changeGravatar;/*在內容改變的時候執行*/};textarea.onmouseover = changeGravatar;/*在鼠標指針移動到元素上時觸發行 JavaScript 代碼代碼是從張戈博客那里扒來的,因為張戈實現的是Nginx自動將Gravatar頭像本地緩存,所以他不用擔心先森的這種緩存問題。所以先森將張哥的代碼稍作修改,增加了ajax代碼,既可以滿足先森的要求了。上面的代碼中,ajax代碼是下面這串:$.ajax({ type:'POST', data:{ "email": email_value, }, //ajax對象文件:gavater.php url:php_url, cache: false, });如果你需要調試,可以將代碼緩存下面這樣,根據彈窗信息確認是否成功: $.ajax({ type:'POST', data:{ "email": email_value, }, //ajax對象文件:gavater.php url:php_url, cache: false, error: function(){ alert('發生意外錯誤!'); //彈窗顯示 return false; }, success:function(){ alert('緩存成功'); } });應網友要求,先貼出comments.php中form標簽的內容,以供參考。 <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform"> <div class="comt-title" id="comt-title"> <div class="comt-avatar pull-left" id="real-avatar"> <?php //輸入評論上的頭像 global $current_user; get_currentuserinfo(); if ( is_user_logged_in() ) //$current_user->user_email獲取郵箱 echo get_avatar( $current_user->user_email, $size = '48' ,'');//如果是管理員 elseif( !is_user_logged_in() && get_option('require_name_email') && $comment_author_email=='' ) echo get_avatar( $current_user->user_email, $size = '48','');//沒有登錄,但是是已知用戶 elseif( !is_user_logged_in() && get_option('require_name_email') && $comment_author_email!=='' ) echo get_avatar( $comment->comment_author_email, $size = '48','');//, $touxiang else echo get_avatar( $comment->comment_author_email, $size = '48' ,'');//, $touxiang ?> </div> <div class="comt-author" id="switch-author"> <?php if ( is_user_logged_in() ) {//判斷登錄 printf('<b id="nickname">'.$user_identity.'</b><span>發表我的評論</span>'); }else{ if( get_option('require_name_email') && !empty($comment_author_email) ){//如果沒登錄,但是是已知用戶 printf('<b id="nickname">'.$comment_author.'</b><span>歡迎回來</span> <b>【<a class="switch-author" href="javascript:toggleCommentAuthorInfo();" data-type="switch-author" style="font-size:15px;">修改信息</a>】</b>'); }else{//如果是未知用戶 printf('<b id="nickname"></b><span id="huilai">歡迎發表評論</span>'); } } ?> <?php //如果關閉了WP Super Cache中的讓已知用戶匿名,則要刪除下面的<b>標簽?> <b id="switch-author" style="display:none">【<a class="switch-author" href="javascript:;" data-type="switch-author" style="font-size:15px;">修改信息</a>】</b> </div> <a id="cancel-comment-reply-link" class="pull-right" href="javascript:;">取消評論</a> </div> <div class="comt"> <div class="comt-box"> <textarea placeholder="說點什么吧,您的回復是對先森最大的支持!" class="input-block-level comt-area" name="comment" id="comment" cols="50%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"></textarea> <div class="comt-ctrl"> <button class="btn btn-primary pull-right" type="submit" name="submit" id="submit" tabindex="5"><i class="fa fa-check-square-o"></i> 提交評論</button> <div class="comt-tips pull-right"><?php comment_id_fields(); do_action('comment_form', $post->ID); ?></div> <span class="muted comt-mailme"><?php deel_add_checkbox() ?></span> <span data-type="comment-insert-smilie" class="muted comt-smilie"><i class="fa fa-smile-o"></i> 表情</span> <div id="comment-smilies" class="hide" style="display:"><?php include(TEMPLATEPATH . '/smiley.php'); ?></div> </div> </div> <?php if ( !is_user_logged_in() ) { ?> <?php if( get_option('require_name_email') ){ ?> <div class="comt-comterinfo" id="comment-author-info"<?php if ( !empty($comment_author) ) echo 'style="display:none"';else echo 'style="display:block"'; ?>> <h4>Hi,您需要填寫昵稱和郵箱!</h4> <ul> <li class="form-inline"><label class="hide" for="author">昵稱</label><input class="ipt" type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" tabindex="2" placeholder="昵稱"><span class="help-inline">昵稱 (必填)</span></li> <li class="form-inline"><label class="hide" for="email">郵箱</label><input class="ipt" type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" tabindex="3" placeholder="郵箱"><span class="help-inline">郵箱 (必填)</span></li> <li class="form-inline"><label class="hide" for="url">網址</label><input class="ipt" type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" tabindex="4" placeholder="網址"><span class="help-inline">網址</span></li> </ul> </div> <?php } ?> <?php } ?> </div> </form>總結文中的代碼涉及到了很多標簽的ID,請參考本站的設置情況進行對應修改。因為代碼逐行執行的速度比服務器緩存的速度快,所以當剛修改郵箱的時候,可能圖片會顯示404,但再次觸發更換頭像鏈接函數的時候,相關的頭像已經被緩存成功就會顯示出來了。先森目前沒有想到解決的辦法,所以最后有一個經過評論輸入框的時候也會觸發函數。這樣增加觸發,頭像就能很好的顯示出來了,目前先這樣,等以后想到解決辦法再說。這樣設置后的好處還有一點,就是默認頭像始終都是你設置本地緩存中的那個默認頭像。
經驗雜筆用cookie記住用戶信息后隱藏信息輸入框,優化用戶體驗
上一篇文章,先森解決了設置CDN緩存后,用戶信息無法被記住的問題。使用的是JS代碼操作cookie,用cookie記住用戶信息,這樣就可以無視緩存了。但這解決的只是初步的技術難題,后續我們還需要對用戶體驗做好優化。先森是這樣想的,當cookie中,保存了用戶有效信息后,起碼要做到這幾點:1.昵稱、郵箱、網址的填寫框就應該自動隱藏。2.頭像旁邊顯示用戶昵稱。3.同時,還需要在旁邊增加一個按鈕,方便用戶修改信息。隱藏信息填寫框其實很簡單,我們只需要在讀取cookie信息并寫入填寫框之后,添加一段代碼即可。關于用cookie保存用戶信息的全部代碼,大家請看前篇文章:用cookie解決網站開啟CDN緩存之后已知用戶頭像昵稱被緩存等系列問題我們在“加載用戶信息”那一段中添加代碼。你們可以把前文中的“加載用戶信息”部分的代碼換成下面這段(主要是19行)://加載用戶信息function LoadRememberInfo() { var strName=GetCookie("author"); var strEmail=GetCookie("email"); var strHomePage=GetCookie("url"); var bolRemember=GetCookie("chkRemember"); var a_vlaue= document.getElementById("author"); if (a_vlaue != null){ if(bolRemember=="true"){ //如果勾選了“記住我” //通過decodeURIComponent對內容解碼 if(strName){document.getElementById("author").value=decodeURIComponent(strName);//從 cookie獲取填寫昵稱 }; if(strEmail){document.getElementById("email").value=strEmail;};//從 cookie獲取填寫郵箱 //通過decodeURIComponent對內容解碼 if(strHomePage){document.getElementById("url").value=decodeURIComponent(strHomePage);};//從 cookie獲取填寫網址 if(bolRemember){document.getElementById("saveme").checked=bolRemember;};//----------------新增代碼-開始--------------------- document.getElementById("comment-author-info").style.display="none";//隱藏“需要填寫昵稱郵箱” document.getElementById("nickname").innerHTML=document.getElementById("author").value;//讓頭像旁邊,顯示已知用戶的名稱 document.getElementById("huilai").innerHTML='歡迎回來';//將“歡迎發表評論”改為“歡迎回來” document.getElementById("switch-author").style.display="";//顯示“修改信息”//----------------新增代碼-結束--------------------- } if(GetCookie("username")){ document.getElementById("author").value=unescape(GetCookie("username")); } } }主要是上面新增代碼部分,后面的注解寫的很清楚了,請根據自己的實情修改。
經驗雜筆用cookie解決網站開啟CDN緩存之后已知用戶頭像昵稱被緩存等系列問題
先森之前也提到過,CDN開啟網頁HTML緩存之后,一篇文章在沒有緩存的情況下,如果第一次訪問是先森自己訪問的(或者是其他已知訪客訪問的),那CDN緩存的時候,就會把先森登錄后顯示的界面緩存下來。先森自己的頭像被緩存也就是其他訪客訪問的時候,會顯示“內容管理”、“登出”、評論框會顯示先森的頭像,前面兩個因為沒有登錄,所以點擊之后也沒有用,但是評論框顯示先森的頭像的時候,沒有更改昵稱和郵箱的選項,當訪客寫好評論提交的時候會提示“請輸入昵稱和郵箱”。雖然可以修改PHP代碼,讓昵稱和郵編填寫框都顯示出來,但是這樣是逃避問題,治標不治本。免費資源部落的博主提醒先森,可能是開了瀏覽器緩存的問題。但是先森看了百度云加速的緩存設置,瀏覽器緩存最低設置時間都是兩個小時,沒有關閉瀏覽器緩存的選項。而且,先森仔細想了一下,覺得也不可能是瀏覽器緩存的問題,先森的問題是當先森自己訪問后一篇文章后,別人在自己的電腦上再訪問同樣的網頁后,會顯示和先森一樣的界面。而瀏覽器緩存,只會存在自己的電腦上。解決問題在網上搜索了半天解決方法都沒有找到類似的教程,最后終于在張戈博客找到了很適合的解決方案。就是用cookie來記住已知用戶,摒棄WordPress本身的記住用戶。先森的想法是:1.WordPress方面。用WP Super Cache設置訪客訪問到的頁面樣式。用之前介紹過的兩個設置“不要為已知用戶緩存”和“讓已知用戶匿名使他們瀏覽的內容是緩存文件”來使所有訪客訪問到的頁面都相同,并且不增加服務器的負擔。WP Super Cache的兩個設置2.CDN方面。通過了第一步的設置,CDN再設置緩存除后臺外的所有內容,則不會再出現緩存到已知用戶頭像和昵稱的問題了。因為就算是站長登錄,網頁中顯示的也是未登錄的狀態。3.JS方面。通過上面兩步設置之后,即使是以前在網站評論過的小伙伴,每次評論也都需要重新填寫昵稱和郵箱,這樣對用戶體驗不好,所以我們就要使用上文提到的將已知用戶信息存在用戶自己的設備cookie中,每次進入網站,會自動從cookie讀取填寫信息,這樣就不用勞煩已知用戶們自己填寫了。當然,昵稱郵箱這些并不是私密等級非常高的信息,我們沒必要用session了。WordPress的WP Super Cache設置和CDN的設置很簡單,需要注意的是緩存的時間,這個根據自己網站來設定。關鍵的是JS代碼布置的問題。張戈為我們分享了他的代碼,前后共有兩篇文章,前篇是舊的代碼分享及如何布置,后篇是改良之后的代碼分享:WordPress記住評論用戶信息的js版本,直接操作cookie無視緩存解決JS操作Cookies出現的亂碼問題,修復WordPress評論亂碼先森以為布置起來會很麻煩,但是經過實踐后發現,布置起來還是很快的,只要你和張戈一樣,使用的是原生的WordPress評論。部署代碼很簡單,將下面的代碼加入主題的comments-ajax.js中,或者其他js里面:/**WordPress記住評論用戶信息的js版本,直接操作cookie無視緩存*https://zhangge.net/4538.html*https://zhangge.net/4684.html*///設置Cookiefunction SetCookie(sName, sValue,iExpireDays) { if (iExpireDays){ var dExpire = new Date(); dExpire.setTime(dExpire.getTime()+parseInt(iExpireDays*24*60*60*1000)); document.cookie = sName + "=" + escape(sValue) + "; expires=" + dExpire.toGMTString()+ "; path=/;domain=.capjsj.cn"; } else{ document.cookie = sName + "=" + escape(sValue)+ "; path=/;domain=.capjsj.cn"; }}// 目的: 返回Cookiefunction GetCookie(sName) { var arr = document.cookie.match(new RegExp("(^| )"+sName+"=([^;]*)(;|$)")); if(arr !=null){return unescape(arr[2])}; return null; }//加載用戶信息function LoadRememberInfo() { var strName=GetCookie("author"); var strEmail=GetCookie("email"); var strHomePage=GetCookie("url"); var bolRemember=GetCookie("chkRemember"); var a_vlaue= document.getElementById("author"); if (a_vlaue != null){ if(bolRemember=="true"){ //如果勾選了“記住我” //通過decodeURIComponent對內容解碼 if(strName){document.getElementById("author").value=decodeURIComponent(strName);//從 cookie獲取填寫昵稱 }; if(strEmail){document.getElementById("email").value=strEmail;};//從 cookie獲取填寫郵箱 //通過decodeURIComponent對內容解碼 if(strHomePage){document.getElementById("url").value=decodeURIComponent(strHomePage);};//從 cookie獲取填寫網址 if(bolRemember){document.getElementById("saveme").checked=bolRemember;}; } if(GetCookie("username")){ document.getElementById("author").value=unescape(GetCookie("username")); } } }//通過jQuery ready在頁面加載時自動從cookies中載入已保存的用戶信息jQuery(document).ready(function($){ LoadRememberInfo();//給評論提交按鈕綁定信息保存函數 $("#respond #submit").click(function(){ SaveRememberInfo(); });//給評論重置按鈕綁定信息移除函數 $("#respond #reset").click(function(){ RemoveRememberInfo(); });});//保存信息函數function SaveRememberInfo() { var strName=document.getElementById("author").value; var strEmail=document.getElementById("email").value; var strHomePage=document.getElementById("url").value; var bolRemember=document.getElementById("saveme").checked; //通過encodeURIComponent對內容進行url編碼 SetCookie("author",encodeURIComponent(strName),365); SetCookie("email",strEmail,365); //通過encodeURIComponent對內容進行url編碼 SetCookie("url",encodeURIComponent(strHomePage),365); SetCookie("chkRemember",bolRemember,365); }//移除信息函數function RemoveRememberInfo() { SetCookie("author",'',365); SetCookie("email",'',365); SetCookie("url",'',365); SetCookie("chkRemember",'false',365);}當然上面的代碼還是要根據你自己主題設置的標簽ID來更改。新的問題但是布置好之后,先森卻遇到了麻煩。cookie可以記錄郵箱和網址的信息,卻死活記錄不了昵稱的信息。在網頁cookie中看到,author的信息顯示的是undefined(未定義)。昵稱author顯示undefined先森前前后后折騰了幾個小時,百度各種搜索,甚至還在張戈博客留言問張哥。最后還是顯示在凌晨1點多,想要放棄的時候,發生了轉機。先森之前測試cookie的時候,只填寫了昵稱和郵箱,但是昵稱author始終顯示undefined,而網址一欄的cookie顯示的是空值。開始先森沒有在意,后來一想,如果昵稱是沒有獲取到值的話,為什么不是和網址一樣,顯示的是空值呢?這樣一想就醒悟了,應該是標簽的ID存在沖突了。果然,先森發現,文章頁中,標題下的編輯的<span>標簽,也用的author標簽。標簽ID重復把標簽的ID換了,刪除緩存,刷新查看。果然,該緩存的都緩存了。另外,下圖中的comment_author_****的三行代碼,是WordPress比較通用的comments-ajax.php中添加的,其實使用這種方法之后,這些cookie就可以刪掉了。但是先森覺得有點麻煩,還沒鉆研透,也就還沒刪。等以后鉆研透了再刪除,畢竟cookie信息也會影響網頁打開速度。cookie測試成功刪改代碼經過這樣一番整改之后,網站前端在設計的時候,增加的一些判斷管理員登錄的代碼都失效了,所以這類內容就可以刪除了。功能-登錄-管理網站先森網站上比較突出的,就是登錄之后的管理按鈕,這些都可以直接刪除了。<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?> <p class="categoryName1"><?php _e('Meta'); ?></p> <img src="<?php bloginfo('template_url'); ?>/images/news_fenge2.jpg" alt="分段圖" title="分段圖"><ul class="categoryName2 login_ul"><?php wp_register(); ?><li><?php wp_loginout(); ?></li><?php wp_meta(); ?></ul> <?php endif; ?>總結用cookie的方式記錄訪客信息,訪客信息會放在訪客自己的設備上,只要訪客自身不禁用cookie,就沒有什么問題。經過本文的設置之后,gavater頭像就不能實時顯示了。當然,也有解決辦法,實時顯示gavater頭像的教程很多。但先森不滿足,因為之前先森的gavater頭像都緩存到了自身服務器,先森不想使用多說等其他服務器。先森目前已經實現了實時將訪客輸入的郵箱對應的gavater頭像緩存到自身服務器,并顯示出來,相關教程如下:用cookie記住用戶信息后ajax實現實時顯示Gravatar頭像并實時緩存到本地用cookie記住用戶信息后隱藏信息輸入框,優化用戶體驗cookie保存信息失敗,要檢查是否是因為標簽的ID沖突原因。
經驗雜筆全站CDN緩存加速之接入百度云加速
先森現在待業,時間比較多,所以折騰網站的時間就比較多了。成航先森已經接入過騰訊云、VeryCloud兩家的全站CDN了,接入經過也跟大家分享了。而現在,先森又將網站接入到百度云加速了。雖然接入時間不長,但是先森還是將自己汲取到的經驗趕緊分享出來,不然自己都忘了就不好了。百度云加速關于接入騰訊云、VeryCloud的經歷,有興趣的童鞋可以去看看:全站CDN緩存加速之接入騰訊云全站CDN緩存加速之接入VeryCloud接入百度云加速先森之前CDN的默認解析使用的是VeryCloud,電信線路解析的是騰訊云。使用了一段時間,先森發現電信線路下,網站經常莫名的打不開:同一個WIFI網絡下,電腦打不開,手機卻正常;手機不能打開內容頁,電腦卻正常等等各種奇葩問題。還有就是聯通線路下,網頁再怎么刷新,響應頭中還是顯示的MISS,沒有命中緩存,雖然Linux中通過命令查看可以HIT,但是先森是強迫癥的嘛,心里總是有個疙瘩。綜上所述,再加上想鼓搗一下百度云,所以就跟換到百度云加速了。怎樣接入百度云加速,網上的教程一大堆,先森就不再贅述了。WordPress嘛,使用CDN主要的一點,就是不能把后臺也給緩存進去了。我們要使用百度云加速的規則自定義,設置緩存和不緩存的內容。百度云加速免費版只能設置3條規則,各位小伙伴要根據實情設置。先森要求不高,暫時3條完全夠用。規則自定義-百度云加速根據張戈博客張哥的建議,先森這里只設置了網站后臺細致緩存,其他全緩存(細致緩存其實就是只緩存靜態文件)。百度云加速經驗歸納1.免費版國內線路不包括移動百度云加速設置有免費版和專業版。CDN節點免費版不提供移動節點,也就是移動網絡訪問你的網站,將會從電信、聯通等其他服務器獲取數據。免費版與專業版的區別-百度云加速對于這個問題,先森的解決辦法是單獨設置移動解析線路,解析到騰訊云。要怎么解決這個問題,或者解析到什么CDN服務商,大家就根據自己的喜好來了。2.查看回源與命中緩存先森提交工單問客服,百度云加速給網站響應頭加入哪些信息,又分別是什么意思,尤其是怎么查看是否命中緩存。其實先森自己心中已經有了猜測,只是想找客服證實一下。工單客服竟然說,Request Method(請求的方法)是GET則命中緩存??蓯鄣目头€截了本站的圖,將GET部分給我看。最后把這位客服虐了一遍,他讓我第二天上班時間找QQ在線客服(4008768800)。先森問了在線客服,了解到實際上重點需要關注的信息有兩個:CF-Cache-Status:HITCF-RAY:291d911c1d5d1cc5-CTUCF-Cache-Status的話,HIT表示命中緩存,MISS表示回源。CF-RAY是查看通過什么節點訪問的,這里表示的是通過成都節點訪問的。至于如何來查看是通過是什么節點訪問,客服說有需要可以詢問他們,沒有公開的查詢方式。3.雙重設置百度云加速中,規則自定義中設置規則里的選項,在網站通用設置中也有同樣的選項設置,如瀏覽器檢查、CC防護等設置。優先級是規則自定義大于通用設置。4.安全防護百度云能設置WAF等安全防護,小站表示會很放心。重點是這些是免費的。需要注意的是,不知道是WAF里的瀏覽器檢查,還是ADS里的CC防護(或者是規則自定義里的CC防護),開啟之后(CC防護設置為強力防護)會讓如奇云測等網站檢測工具的訪問HTTP狀態返回503。5.七牛訪問源站響應超時,錯誤503不知道是真的只是當時源站響應超時還是百度云加速的問題,反正先森網站上新的圖片不能訪問,單獨打開顯示以下內容:{"error":"get from image source failed: E503"}先森的想法是:1.設置了瀏覽器檢查的原因;2.WAF防護過猛,把七牛給防在外面了。先森覺得瀏覽器檢查平時沒什么用,訪客首次打開還會顯示5秒的瀏覽器檢查頁面,所以就把它關了。至于WAF防護,WAF可以設置白名單,先森趕緊發起七牛工單,將七牛的回源IP段添加到白名單中了。七牛給先森的回復如下,需要的童鞋也趕緊添加吧:鏡像回源User Agent: qiniu-imgstg-spider-1.0鏡像回源IP段 :183.136.139.0/24當然,百度云加速只能添加IP段,用戶代理User Agent加在哪先森就不清楚了。不知道是哪個設置生效了,網站上的圖片又能被七牛鏡像緩存了。6.關閉了瀏覽器檢查,但是訪問網站還是經常有“瀏覽器檢查中”的界面?瀏覽器檢查,功能很好,對于明顯不是瀏覽器的訪問請求予以拒絕,以防止惡意抓取和垃圾信息。但是先森覺得對用戶體驗并不好。別人打開你的網站找教程,結果還要等5秒你的網站才開始加載,有幾個會乖乖的等著的?百度云加速瀏覽器檢查界面有時我們會發現,明明在設置中關閉了“瀏覽器檢查”,但是打開的時候還是存在這個界面。第一種可能,上面也說過,你僅僅關閉了通用設置中的“瀏覽器檢查”,在規則自定義中還有個一個“瀏覽器檢查”的設置,而且這個設置的優先級還高于通用設置中的。第二種可能,你設置的CC防護的等級是“強力防護”,這個在規則自定義中也有設置,但是名字是“游覽器檢查”(先森向客服反饋,被證實為錯字??头呀浄答伾先チ?,估計很快會修正)。客服告訴先森,設置CC防護等級為“高”,則不會再檢查瀏覽器了。同時,設置為“高”的時候,再開啟“瀏覽器檢查”,用戶訪問也不會顯示“瀏覽器安全檢查中...”的字樣。百度云加速CC防護7.沒有日志與API接口百度云加速和VeryCloud、騰訊云不同的是,沒有API,也沒有日志。8.實時同步百度云加速可以打開實時同步,也就不做任何緩存,直接回源,這一點非常方便??偨Y用了兩天的百度與云加速,感覺還是非常不錯的。同一個頁面,第一次訪問顯示MISS,刷新一下就顯示HIT了,見效特別快,先森覺得特別痛快。雖說WordPress要多折騰,但是也確實很感謝如VeryCloud、騰訊云、七牛云、百度云加速這些能為我們提供免費服務的CDN服務商,它們讓我們這些草根站長能見識的更多,擁有更多可能,謝謝。
經驗雜筆用css3 calc()使你的自適應更完美
不知道各位有沒有遇到過,想在一盒模型內,一個元素占據固定寬度,另一個元素將剩余的寬度占滿。一般,我們的解決方法是,給這兩個元素都設置浮動,讓他們貼緊或各占一邊。這種在盒模型的寬度固定的時候還比較好設置,但是當盒模型總寬度不固定(如它自己寬度設為100%),我們需要設置另一個占滿剩余寬度的元素寬度為百分之多少的時候,就不怎么方便了。效果如下:calc()完成自適應或者是,盒模型中只有一個元素,這個元素寬度設置的是100%,如果這個元素還設置了其他盒模型屬性,如邊框、margin或padding,這樣就會讓你的盒子被撐破。這樣一來處理起來就非常麻煩,有時候甚至是無解的。今天先森要介紹的calc()就是解決這些問題的。什么是calc()?學習calc()之前,我們有必要先知道calc()是什么?只有知道了它是個什么東西,在實際運用中更好的使用它。calc()從字面我們可以把他理解為一個函數function。其實calc是英文單詞calculate(計算)的縮寫,是css3的一個新增的功能,用來指定元素的長度。比如說,你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。為何說是動態值呢?因為我們使用的表達式來得到的值。不過calc()最大的好處就是用在流體布局上,可以通過calc()計算得到元素的寬度。通俗的講,就是你可以通過calc()用算數表達式來設置指定元素的width、margin、padding、border等。calc()語法calc()語法非常簡單,就像我們小時候學加 (+)、減(-)、乘(*)、除(/)一樣,使用數學表達式來表示:.div { width: calc(expression);}其中"expression"是一個表達式,用來計算長度的表達式。calc()的運算規則calc()使用通用的數學運算規則,但是也提供更智能的功能:1.使用“+”、“-”、“*” 和 “/”四則運算;2.可以使用百分比、px、em、rem等單位;3.可以混合使用各種單位進行計算;4.表達式中有“+”和“-”時,其前后必須要有空格,如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的;5.表達式中有“*”和“/”時,其前后可以沒有空格,但建議留有空格。瀏覽器的兼容性及寫法瀏覽器對calc()的兼容性還算不錯,在IE9+、FF4.0+、Chrome19+、Safari6+都得到較好支持,同樣需要在其前面加上各瀏覽器廠商的識別符,不過可惜的是,移動端的瀏覽器還沒僅有“firefox for android 14.0”支持,其他的全軍覆沒。大家在實際使用時,同樣需要添加瀏覽器的前綴:.elm { /*設置給不能識別calc()的瀏覽器*/ width:90%; /*Firefox火狐瀏覽器*/ width:-moz-calc(expression); /*chrome safari等webkit內核瀏覽器*/ width:-webkit-calc(expression); /*Standard 標準使用*/ width:calc(expression); }好了,對于calc()先森就介紹到這里,具體使用就靠大家自己摸索啦!

川公網安備 51011202000104號