深色主題的魅力和好處，你知道嗎？快來試試Dark Reader插件吧！

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

Dark Reader深色主題

首先，我要給你分享一些有趣的案例和故事，讓你看看深色主題是如何改變人們的瀏覽習慣和體驗的。

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

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

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

那么，Dark Reader有什么優勢和特點呢？我來給你列舉幾個：

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

主題生成模式

Dark Reader支持自定義設置，你可以調整亮度、對比度、灰度、棕褐色濾鏡等參數，以適應你的屏幕和環境。你還可以選擇字體、文字描邊等選項，以提高閱讀舒適度。你還可以為不同的網站設置不同的參數，并保存在網站列表中。

自定義設置

Dark Reader支持快捷鍵和切換按鈕，你可以快速地開啟或關閉深色主題，或者將當前網站加入或移除忽略列表。你還可以點擊Dark Reader圖標，在彈出的菜單中進行各種操作和設置。

現在，你已經了解了Dark Reader的原理和特點，那么如何使用它呢？其實很簡單，只需要幾個步驟：

第一步：打開你喜歡的瀏覽器（Chrome、Firefox、Edge、Safari等），在瀏覽器插件商店中搜索Dark Reader，并安裝它。
第二步：安裝完成后，在瀏覽器右上角找到Dark Reader圖標，并點擊它。如果沒有找到圖標，請在瀏覽器設置中啟用Dark Reader擴展。

Egde瀏覽器中的Dark Reader

第三步：點擊圖標后，在彈出的菜單中選擇“開啟”按鈕，就可以看到當前網頁變成了深色主題。你可以在菜單中調整各種參數和模式，或者點擊“僅適用于”按鈕，將設置應用到當前網站。

開啟

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

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

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

我們將盡量保持文章的循序漸進和通俗易懂，請確保自己已經掌握了那一篇文章的全部內容時才選擇跳過，不然可能會錯過關鍵的信息噢~

這里我們假定你已經知曉了以下基礎知識，這些基礎知識對理解文章內容是至關重要的：

1. HTML/CSS/JS基礎

2. PHP基礎

3. 如何使用Wordpress

4. 如何搭建web環境

如果你已經知曉了以上基礎知識，恭喜你，本系列的任何文章內容對你而言都沒有什么難度。

圖標字體

我們現在為我們的主題引入iconfont（圖標字體），先把圖標字體準備好：

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

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

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

· 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

不在這個白名單里的外鏈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中圖標對應的unicode：

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

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

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

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

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

完善文章列表

現在我們來繼續完善文章列表，首先加入閱讀更多按鈕：

????????????????????<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，效果如下：

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

//?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()

{

????//?暫時空置?以后實現

}

我們加了一個is_spider方法，讓瀏覽量的統計將搜索引擎蜘蛛排除在外，關于點贊的功能我們也留待以后實現，我們先預定好這兩個參數，然后到頁面里顯示：

????????????????????<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>

我們再加上文章的發布日期：

????????????????<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>

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

現在我們做今天的最后一項工作，程序員最愛之分頁：

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

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

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

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

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

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

總結和預告

今天我們為主題引入了iconfont自定義圖標，完成了文章列表頁的全部內容，最后的分頁也十分之輕松。

明天我們將挑戰制作右側邊欄，這也是wordpress傳統blog主題中至關重要的一部分。

如果你喜歡這個系列的文章，趕快關注我們（數字江湖異志錄）吧，不要錯過后續的更多干貨噢。

常玩ZblogPHP的用戶是不是經常在主題里發現主題自帶導航高亮功能，并且還可以給文章頁加上當前分類的高亮，下面我們來看看，這種方法到底是怎么實現的呢，是不是很炫酷呢。

首先我想說一下，這是我在制作主題過程中遇到的問題，我是想給我的主題加上導航高亮的小功能，要是沒有這功能主題怎能變得有特色，于是我借鑒了許多主題模板后，得出了方法和代碼：

首先打開模板template文件夾，找到所存放導航欄的文件，在導航欄的父級div容器，也可以是header、nav、section等，在class="" 后面加上

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}"

加上這串代碼后，恭喜你，重要的一步已經完成了。

然后找到模板下script文件夾，找到模板主js，加上如下代碼。

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){} });});

這是，在你的導航欄父級div容器加上id hamburgermenu，然后在導航欄ul上加上class dhgl，這時，網站已經能夠識別導航所在頁面了！

這樣一個簡單的導航高亮邏輯判斷就完成了，要顯示出導航高亮，還要加上css樣式。

在主題style文件夾上的主題主css樣式上加入a標簽的樣式：

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

background和color后面的顏色也是需要自己自定義的，你可以改成自己的顏色，看著不錯就可以了哦。

原理：第一步的php判斷是通過php的邏輯type判斷，首頁就顯示index，如果是分類頁文章頁就輸出分類id等，然后js判斷li的id，是否和php的首頁、分類id符合，符合就輸出on class，然后css給on加上樣式

來源：捷閃站長網，轉載請保留出處和鏈接！

本文鏈接：http://www.z18zs.com/read/180.html

在線咨詢

上一篇：Axure高保真教程：調用日期選擇器并篩選中繼器表格
下一篇：PHP基礎知識講座：第2課，如何在HTML頁面中嵌入PHP代碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

深色主題的魅力和好處，你知道嗎？快來試試Dark Reader插件吧！

圖標字體

完善文章列表

總結和預告

您的項目需求