整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

深色主题的魅力和好处，你知道吗？快来试试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小时内与您取得联系。

推荐阅读
友情链接 石家庄看香高人 志丹县 静安区 上犹县 新密市 兴宁区 郁南县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com   www.hmttv.cn
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服