好，今天我要給你介紹一個(gè)非常實(shí)用的瀏覽器插件，它叫做Dark Reader。它可以讓你在瀏覽網(wǎng)頁的時(shí)候，享受深色主題的視覺效果，保護(hù)你的眼睛，同時(shí)也讓你的瀏覽器看起來更加酷炫。你可能會(huì)好奇，Dark Reader是如何實(shí)現(xiàn)這樣的功能的，它又有什么優(yōu)勢和特點(diǎn)呢？不用擔(dān)心，我會(huì)一一為你解答，讓你成為一個(gè)深色主題的專家。

首先，我要給你分享一些有趣的案例和故事，讓你看看深色主題是如何改變?nèi)藗兊臑g覽習(xí)慣和體驗(yàn)的。

• 案例一：小明是一個(gè)大學(xué)生，他喜歡在晚上上網(wǎng)看視頻、玩游戲、刷微博等。但是，他發(fā)現(xiàn)自己的眼睛經(jīng)常感到疲勞和干澀，有時(shí)候還會(huì)出現(xiàn)頭痛和失眠的癥狀。他去醫(yī)院檢查，醫(yī)生告訴他，這是因?yàn)樗L時(shí)間暴露在明亮的屏幕光線下，導(dǎo)致了視覺疲勞和生物鐘紊亂。醫(yī)生建議他減少晚上使用電腦的時(shí)間，或者使用一些可以降低屏幕亮度和藍(lán)光的軟件或插件。小明聽從醫(yī)生的建議，他在瀏覽器上安裝了Dark Reader插件，并將其設(shè)置為自動(dòng)在晚上開啟深色主題。他發(fā)現(xiàn)，這樣一來，他的眼睛感覺舒服多了，他也能夠更好地入睡和休息。他還發(fā)現(xiàn)，深色主題讓他的瀏覽器看起來更加酷炫和個(gè)性化，他很喜歡這種風(fēng)格。
• 案例二：小紅是一個(gè)網(wǎng)站設(shè)計(jì)師，她負(fù)責(zé)為客戶制作各種類型的網(wǎng)站。她經(jīng)常需要在不同的瀏覽器和設(shè)備上測試網(wǎng)站的兼容性和效果。她發(fā)現(xiàn)，有些網(wǎng)站在深色主題下顯示得很好，有些網(wǎng)站則不太適合深色主題。她想要了解深色主題對網(wǎng)站設(shè)計(jì)有什么影響和要求，以便為客戶提供更好的服務(wù)。她在瀏覽器上安裝了Dark Reader插件，并將其設(shè)置為動(dòng)態(tài)模式。她發(fā)現(xiàn)，這樣一來，她可以方便地切換不同的網(wǎng)站和主題，觀察它們的差異和優(yōu)缺點(diǎn)。她還可以通過調(diào)整Dark Reader的參數(shù)和模式，來優(yōu)化網(wǎng)站的顯示效果。她通過Dark Reader學(xué)習(xí)到了很多關(guān)于深色主題的知識(shí)和技巧，她也能夠?yàn)榭蛻籼峁└嗟倪x擇和建議。
• 案例三：小剛是一個(gè)程序員，他喜歡在白天寫代碼，在晚上閱讀技術(shù)文檔和博客。他發(fā)現(xiàn)，有些技術(shù)文檔和博客支持深色主題，有些則不支持。他想要統(tǒng)一自己的閱讀環(huán)境，讓所有的文檔和博客都能夠顯示深色主題。他在瀏覽器上安裝了Dark Reader插件，并將其設(shè)置為靜態(tài)模式。他發(fā)現(xiàn)，這樣一來，所有的文檔和博客都能夠快速地生成一個(gè)基本的深色樣式表，并顯示出來。他還可以通過點(diǎn)擊Dark Reader圖標(biāo)，在彈出的菜單中選擇“僅適用于”按鈕，將某些特定的文檔或博客加入或移除忽略列表。他還可以通過使用快捷鍵來進(jìn)行這些操作。他覺得這樣非常方便和高效。

以上就是我為你分享的一些有趣的案例和故事，我希望你能夠從中感受到深色主題的魅力和好處。

接下來，我們來看看Dark Reader是如何工作的。Dark Reader是一個(gè)基于CSS（層疊樣式表）的擴(kuò)展程序，它可以分析網(wǎng)頁的樣式表、背景圖片、向量圖形等元素，然后根據(jù)你的設(shè)置，動(dòng)態(tài)地生成一個(gè)深色主題的樣式表，并應(yīng)用到網(wǎng)頁上。這樣，你就可以看到一個(gè)反轉(zhuǎn)了明亮顏色的網(wǎng)頁，具有高對比度和易于閱讀的效果。Dark Reader不會(huì)修改網(wǎng)頁的內(nèi)容或結(jié)構(gòu)，也不會(huì)影響網(wǎng)頁的功能和交互性。它只是改變了網(wǎng)頁的外觀，讓你有一種全新的瀏覽體驗(yàn)。

那么，Dark Reader有什么優(yōu)勢和特點(diǎn)呢？我來給你列舉幾個(gè)：

• Dark Reader支持多種瀏覽器，包括Chrome、Firefox、Edge、Safari等，你可以根據(jù)自己的喜好和習(xí)慣選擇合適的瀏覽器安裝Dark Reader。
• Dark Reader支持多種主題生成模式，包括過濾、過濾+、靜態(tài)、動(dòng)態(tài)等，你可以根據(jù)不同的網(wǎng)站和場景選擇合適的模式。過濾模式是最基本的模式，它基于CSS濾鏡反轉(zhuǎn)所有顏色；過濾+模式是在過濾模式的基礎(chǔ)上增加了SVG濾鏡，使得顏色處理更加細(xì)致；靜態(tài)模式是快速生成一個(gè)基本的深色樣式表；動(dòng)態(tài)模式是最高級(jí)的模式，它可以深入分析網(wǎng)站的樣式表，并生成最佳的深色主題。

• Dark Reader支持自定義設(shè)置，你可以調(diào)整亮度、對比度、灰度、棕褐色濾鏡等參數(shù)，以適應(yīng)你的屏幕和環(huán)境。你還可以選擇字體、文字描邊等選項(xiàng)，以提高閱讀舒適度。你還可以為不同的網(wǎng)站設(shè)置不同的參數(shù)，并保存在網(wǎng)站列表中。

• Dark Reader支持快捷鍵和切換按鈕，你可以快速地開啟或關(guān)閉深色主題，或者將當(dāng)前網(wǎng)站加入或移除忽略列表。你還可以點(diǎn)擊Dark Reader圖標(biāo)，在彈出的菜單中進(jìn)行各種操作和設(shè)置。

現(xiàn)在，你已經(jīng)了解了Dark Reader的原理和特點(diǎn)，那么如何使用它呢？其實(shí)很簡單，只需要幾個(gè)步驟：

• 第一步：打開你喜歡的瀏覽器（Chrome、Firefox、Edge、Safari等），在瀏覽器插件商店中搜索Dark Reader，并安裝它。
• 第二步：安裝完成后，在瀏覽器右上角找到Dark Reader圖標(biāo)，并點(diǎn)擊它。如果沒有找到圖標(biāo)，請?jiān)跒g覽器設(shè)置中啟用Dark Reader擴(kuò)展。

• 第三步：點(diǎn)擊圖標(biāo)后，在彈出的菜單中選擇“開啟”按鈕，就可以看到當(dāng)前網(wǎng)頁變成了深色主題。你可以在菜單中調(diào)整各種參數(shù)和模式，或者點(diǎn)擊“僅適用于”按鈕，將設(shè)置應(yīng)用到當(dāng)前網(wǎng)站。

• 第四步：如果你想關(guān)閉深色主題，或者將某個(gè)網(wǎng)站加入或移除忽略列表，你可以點(diǎn)擊圖標(biāo)后選擇“關(guān)閉”或“切換”按鈕。你還可以使用快捷鍵來進(jìn)行這些操作，具體的快捷鍵可以在圖標(biāo)下方的鏈接中修改。
• 第五步：享受你的深色主題吧！

以上就是我為你介紹的瀏覽器插件Dark Reader的使用方法和原理。我希望你能夠喜歡這個(gè)插件，它可以讓你的瀏覽器變得更加美觀和舒適。如果你也想要嘗試一下深色主題，那么不妨下載Dark Reader插件，讓你的瀏覽器變得更加美觀和舒適。如果你喜歡這篇文章，或者有什么問題和建議，歡迎關(guān)注我，并在評論區(qū)留言，我會(huì)及時(shí)回復(fù)你。謝謝你的閱讀，下次再見！

迎來到《真香，30天做一套wordpress主題》系列文章，我們的目標(biāo)是（沒有蛀牙！）建立一套全新的wordpress主題，花上30天的時(shí)間閉關(guān)修煉，如果你看到的第一篇文章不是《基礎(chǔ)框架搭建》，建議你關(guān)注我們（數(shù)字江湖異志錄），從該系列的第一篇開始閱讀。

我們將盡量保持文章的循序漸進(jìn)和通俗易懂，請確保自己已經(jīng)掌握了那一篇文章的全部內(nèi)容時(shí)才選擇跳過，不然可能會(huì)錯(cuò)過關(guān)鍵的信息噢~

這里我們假定你已經(jīng)知曉了以下基礎(chǔ)知識(shí)，這些基礎(chǔ)知識(shí)對理解文章內(nèi)容是至關(guān)重要的：

1. HTML/CSS/JS基礎(chǔ)

2. PHP基礎(chǔ)

3. 如何使用Wordpress

4. 如何搭建web環(huán)境

如果你已經(jīng)知曉了以上基礎(chǔ)知識(shí)，恭喜你，本系列的任何文章內(nèi)容對你而言都沒有什么難度。

圖標(biāo)字體

我們現(xiàn)在為我們的主題引入iconfont（圖標(biāo)字體），先把圖標(biāo)字體準(zhǔn)備好：

查閱AMP文檔之后，我們可以了解到AMP可以直接引入字體css：

<link?rel="stylesheet"?href="https://fonts.googleapis.com/css?family=Tangerine">

但是這種方式要求引入的CSS所屬域只能是以下列表里的網(wǎng)站：

· Typography.com:?https://cloud.typography.com
· Fonts.com:?https://fast.fonts.net
· Google Fonts:?https://fonts.googleapis.com
· Typekit:?https://use.typekit.net
· Font Awesome:?https://maxcdn.bootstrapcdn.com,?https://use.fontawesome.com

不在這個(gè)白名單里的外鏈CSS是無法在AMP頁面引入的，還好我們可以選擇直接在頁面CSS中引入字體文件，就像是這樣：

???????????@font-face?{

????????????????font-family:?'iconfont';

????????????????src:?url('<?php?echo?get_template_directory_uri()??>/fonts/iconfont.eot?#iefix')?format('embedded-opentype'),

????????????????????url('<?php?echo?get_template_directory_uri()??>/fonts/iconfont.woff2')?format('woff2'),

????????????????????url('<?php?echo?get_template_directory_uri()??>/fonts/iconfont.woff')?format('woff'),

????????????????????url('<?php?echo?get_template_directory_uri()??>/fonts/iconfont.ttf')?format('truetype'),

????????????????????url('<?php?echo?get_template_directory_uri()??>/fonts/iconfont.svg#iconfont')?format('svg');

????????????}

然后我們直接再頁面里定義并使用iconfont中圖標(biāo)對應(yīng)的unicode：

????????????.iconfont?{

????????????????font-family:?"iconfont";

????????????????-webkit-font-smoothing:?antialiased;

????????????????-moz-osx-font-smoothing:?grayscale;

????????????}

完善文章列表

現(xiàn)在我們來繼續(xù)完善文章列表，首先加入閱讀更多按鈕：

????????????????????<div?class="flex-box">

????????????????????????<a?href="<?php?the_permalink();??>"?class="read-more"><?php?_e('READ?MORE');??><span?class="iconfont?icon-ml-readmore"></span></a>

????????????????????</div>

這里我們就用上了iconfont，效果如下：

現(xiàn)在我們加上評論、閱讀、點(diǎn)贊信息，這里需要注意，wordpress默認(rèn)其實(shí)是沒有瀏覽量和點(diǎn)贊的，這里我們在functions.php里加入這些功能，然后后面我們就可以到頁面模板里插入這個(gè)方法：

//?add?views

function?is_spider()?{

????$agent=?strtolower($_SERVER['HTTP_USER_AGENT']);

????if?(!empty($agent))?{

????????????$spiders=?array(

????????????????'Googlebot',?'Baiduspider',?'ia_archiver',?

????????????????'R6_FeedFetcher',?'NetcraftSurveyAgent',?

????????????????'Sogou?web?spider',?'bingbot',?'Yahoo!?Slurp',?

????????????????'facebookexternalhit',?'PrintfulBot',?'msnbot',?

????????????????'Twitterbot',?'UnwindFetchor',?'urlresolver'

????????????);

????????????foreach($spiders?as?$val)?{

????????????????if?(strpos($agent,?strtolower($val))?!==?false)?{

????????????????????return?true;

????????????????}

????????????}

????}?else?{

????????????return?false;

????}

}

function?set_post_views()

{

????if?(is_singular()?&&?!is_spider())

????{

??????$post_id?=?get_the_ID();

??????if($post_id)

??????{

??????????$post_views?=?(int)get_post_meta($post_id,?'views',?true);

??????????if(!update_post_meta($post_id,?'views',?($post_views+1)))

??????????{

????????????add_post_meta($post_id,?'views',?1,?true);

??????????}

??????}

????}

}

//?add?likes

function?set_post_likes()

{

????//?暫時(shí)空置?以后實(shí)現(xiàn)

}

我們加了一個(gè)is_spider方法，讓瀏覽量的統(tǒng)計(jì)將搜索引擎蜘蛛排除在外，關(guān)于點(diǎn)贊的功能我們也留待以后實(shí)現(xiàn)，我們先預(yù)定好這兩個(gè)參數(shù)，然后到頁面里顯示：

????????????????????<div?class="flex-box?justify-between">?

????????????????????????<a?href="<?php?the_permalink();??>"?class="read-more"><?php?_e('READ?MORE');??><span?class="iconfont?icon-ml-readmore"></span></a>

????????????????????????<div?class="flex-box?post-meta-box">

????????????????????????????<a?class="post-meta"?href="<?php?the_permalink()??>#comments"><span?class="iconfont?icon-mr-postmeta"></span><?php?comments_number('0',?'1',?'%');??></a>

????????????????????????????<a?class="post-meta"?href="<?php?the_permalink()??>"><span?class="iconfont?icon-mr-postmeta"></span><?php?echo?(int)get_post_meta(get_the_ID(),?'views',?true);??></a>

????????????????????????????<a?class="post-meta"?href="<?php?the_permalink()??>"><span?class="iconfont?icon-mr-postmeta"></span><?php?echo?(int)get_post_meta(get_the_ID(),'likes',true);??></a>

????????????????????????</div>

????????????????????</div>

我們再加上文章的發(fā)布日期：

????????????????<div?class="flex-box?post-publish-date">

????????????????????????<div?class="post-date">

????????????????????????????<?php?echo?get_the_date('d')??>

????????????????????????</div>

????????????????????????<div?class="post-month">

????????????????????????????<?php?echo?get_the_date('M')??>

????????????????????????</div>??

????????????????????</div>

這樣我們的首頁文章列表就基本完成了：

現(xiàn)在我們做今天的最后一項(xiàng)工作，程序員最愛之分頁：

????????????????<?php?echo?get_the_posts_pagination(?array(

????????????????????'mid_size'?=>?3,

????????????????????'prev_next'?=>?false,

????????????????)?);??>

聲明？就這么幾行就OK了？沒錯(cuò)！我們加上一些CSS描述后，就成這樣了：

Wordpress對分頁的輸出還是比較好的，基本不用費(fèi)事就完成了。

總結(jié)和預(yù)告

今天我們?yōu)橹黝}引入了iconfont自定義圖標(biāo)，完成了文章列表頁的全部內(nèi)容，最后的分頁也十分之輕松。

明天我們將挑戰(zhàn)制作右側(cè)邊欄，這也是wordpress傳統(tǒng)blog主題中至關(guān)重要的一部分。

如果你喜歡這個(gè)系列的文章，趕快關(guān)注我們（數(shù)字江湖異志錄）吧，不要錯(cuò)過后續(xù)的更多干貨噢。

data-type="{if $type=='article'}article{elseif $type=='page'}page{elseif $type=='index'}index{else}category{/if}" data-infoid="{if $type=='article'}{$article.Category.ID} {elseif $type=='page'}{$article.ID}{elseif $type=='index'} {else}{$category.ID}{/if}"

jQuery(document).ready(function($){ var datatype=$("#hamburgermenu").attr("data-type"); $(".dhgl>li ").each(function(){ try{ var myid=$(this).attr("id"); if("index"==datatype){ if(myid=="nvabar-item-index"){ $("#nvabar-item-index a:first-child").addClass("on"); } }else if("category"==datatype){ var infoid=$("#hamburgermenu").attr("data-infoid"); if(infoid!=null){ var b=infoid.split(' '); for(var i=0;i<b.length;i++){ if(myid=="navbar-category-"+b[i]){ $("#navbar-category-"+b[i]+" a:first-child").addClass("on"); } } } }else if("article"==datatype){ var infoid=$("#hamburgermenu").attr("data-infoid"); if(infoid!=null){ var b=infoid.split(' '); for(var i=0;i<b.length;i++){ if(myid=="navbar-category-"+b[i]){ $("#navbar-category-"+b[i]+" a:first-child").addClass("on"); } } } }else if("page"==datatype){ var infoid=$("#hamburgermenu").attr("data-infoid"); if(infoid!=null){ if(myid=="navbar-page-"+infoid){ $("#navbar-page-"+infoid+" a:first-child").addClass("on"); } } }else if("tag"==datatype){ var infoid=$("#hamburgermenu").attr("data-infoid"); if(infoid!=null){ if(myid=="navbar-tag-"+infoid){ $("#navbar-tag-"+infoid+" a:first-child").addClass("on"); } } } }catch(E){} });});

#hamburgermenu .dhgl li a.on{background:#333;color:#fff;}