分类目录归档:Web 类别

网站变成灰度/黑白色

今天是 2020年4月4日 (清明节),让我们一起表达对全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼,国务院决定,2020年4月4日举行全国性哀悼活动。在此期间,全国和驻外使领馆下半旗志哀,全国停止公共娱乐活动。4月4日10时起,全国人民默哀3分钟,汽车、火车、舰船鸣笛,防空警报鸣响。国务院办公厅

首先,请大家一起默哀3分钟,表达我们对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼!

如何将网站变成灰度/黑白色?

如何将我们的网站变成灰度/黑白色?其实不需要一一修改 CSS 样式文件,只需要用 Filter 滤镜调整灰度参数即可。

html {
  filter:grayscale(100%);
  -webkit-filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -ms-filter:grayscale(100%);
  -o-filter:grayscale(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter:grayscale(1)
}

永垂不朽!

继续阅读网站变成灰度/黑白色

将自己网站的搜索功能加入到Chrome Tab中

在使用 Chrome 浏览器的时候,你肯定会发现,在地址栏输入 google.com, bing.com 等网站时,右侧会出现按 Tab 进行搜索的功能,免去了先进入页面再进行搜索的步骤。如果你也想要此功能,那就继续看吧~

实现原理

怎么让浏览器知道你的网站有搜索功能?

非主动添加情况

在使用 Chrome 访问一个网站时,Chrome 会先查看有没有定义 OpenSearch XML,如果没有的话,会在网页中找有没有这样一个表单:

  1. 表单以GET方式提交(POST不可以);
  2. 表单的提交url为HTTP协议的(HTTPS不可以);
  3. 表单没有附加onSubmit事件(确保提交过程不被用户代码干涉);
  4. 表单中仅包含一个input输入框,而且类型为text(其他类型的都不可以,多余的控件也都不可以)

如果有这样一个表单,Chrome会认为这是一个搜索框,并根据这个表单的信息推断出这个网站的搜索方法。具体可以查看 Chrome 文档说明

主动添加情况

如果 Chrome 没有自动识别上,我们只要遵循 OpenSearch XML 协议告诉 Chrome 即可,而且配置方法简单,无需对服务器改造。

前提条件

你的网站必须有搜索功能,且搜索链接较为固定,例如:

// 我的网站搜索格式
https://www.nousbuild.org/search/?q=搜索词

// Bing 的搜索格式
https://cn.bing.com/search?q=搜索词

// Google 的搜索格式
https://www.google.com/search?q=搜索词

// Baidu 的搜索格式
https://www.baidu.com/s?wd=搜索词

即,只要替换 关键词 的内容,即可进行搜索。

OpenSearch 协议

OpenSearch 是用于共享搜索结果的简单格式集合,在 Github 项目中,你可以查看到最新的、详细的说明:点击此处

截至此文章发布,目前最新的协议版本是 OpenSearch 1.1 Draft 6,请尽可能的查看最新说明。

实现操作

下面开始如何操作吧。首先在 首页 <header> 处添加一条 <link> 声明,仅仅在网站首页添加即可:

<link rel="search" type="application/opensearchdescription+xml" href="http://www.nousbuild.org/opensearch.xml" title="SA Search">

你只要修改 title=”网站名称/搜索引擎名称”, href=”xml文件的地址” 即可,建议使用绝对连接(即使支持https协议也建议写成http协议)。

接下来就是新建一个 XML 文件(opensearch.xml):

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
	<ShortName>SA Search</ShortName>
	<Description>Search SA Website</Description>
	<Url type="text/html" method="get" template="http://www.nousbuild.org/search/?q={searchTerms}"/>
</OpenSearchDescription>

我只定义了三个属性,ShortName 表示搜索引擎的名字,Description 表示搜索引擎的描述,Url 表示刚刚说的你的固定搜索格式,你只需将上面说的 关键词 替换为 {searchTerms} 即可 (同样,即使支持https协议也建议写成http协议)。

到此,大功告成,上传更新即可。

除了此方法定义外,还有 JavaScritp 定义当方法等,你可以自行继续阅读官方文档。

继续阅读将自己网站的搜索功能加入到Chrome Tab中

CityWeather小程序问答

城市天气 CityWeather,一个简约风格的世界主要城市的天气查询小程序,是微信讨论组中分享天气的极佳途径,下面来看看这款小程序的开发过程吧~

城市天气 CityWeather 是我开始学习微信小程序开发的第一款 Mini Program,选择从一个简单的天气小程序入手。你也可以从 Udacity 上学习次小程序:点击查看

天气程序需要什么样的功能?

市面上的天气应用或小程序很多很多,但随着应用/小程序不断更新,这些天气应用变得就比较臃肿了,比如一些天气应用/小程序还添加了广告、应用推荐、打赏、账号登录等七七八八但功能,完全脱离了应用/小程序本身。一个好的应用/小程序,就应该在它该出现的时候出现,不需要的时候就不出现。

城市天气 CityWeather 就是这么一款简单的天气小程序,专注于天气本身,一款插画风格的可爱天气小程序,给你每个季节、每个天气应有的“温度”。开发者 Mickey Wu

社么样的天气显示最直观呢?

整体UI设计,当然是插画风格啦!简约、可爱的天气插画背景,让你直接看图片就能直观的看到当天的天气。

因为天气情况很多,最基础的天气就是譬如 多云小雨中雪 等常规天气,还有 微风和风大风 等刮风天气,当然还有一些极端天气 沙尘暴浮沉,甚至是代号为999的,只有会在世界末日中才会出现的 未知天气。目前的部分天气素材来自于Udacity以及网络。

小程序如何内容布局?

第一页UI采用上下两栏设计,上部将近60%的区域用来显示当前天气以及最具特色的天气背景插画;第二页UI采用列表样式布局,显示未来7天天气预报。

当然,未来可能会在增加一个页面用来显示当前天气的风速日出日落时间空气质量紫外线强度等内容。

如何设计好的图标?

应用/小程序 的图标可谓第一脸面,用户最先看到的必然是小图标,所以一个好的图标对于应用/小程序的推广有着举足轻重的作用。如何在众多天气应用/小程序图标中脱颖而出?

当然是在明确主题的同时,美观、简约、有特点,这样能让人第一眼留有印象。

小程序开发

这一步骤是坑最多的,尤其是微信小程序开发工具的bug也非常多,经常代码是正常的,但是模拟器卡死或没有应用的效果,macOS原生中文输入法有时也会出问题,输不进入字符等一系列问题。

我也非常建议学习小程序开发的你,去Udacity上跟着一起制作:开始学习

还有一些历史问题,一些淘汰的函数和接口也得自己排查,比如跳转页面的 wx.openSetting 接口:

小程序推广与分享

城市天气 Weather City 的官方页面:点击进入

城市天气 Weather City Github 项目:点击进入

未来也会新增其他主题的天气背景,增加一个当日详细信息页面,用于查看 空气质量、风速、紫外线强度、日出日落时间等;再或者,加入一个夜间模式也说不定哦,白天打开时显示白天的天气插画,夜晚打开时夜晚的天气插画,当然这都是未来需要做的事情啦。

使用手机 QQ / 微信扫描下方小程序码也可以观看哦~

继续阅读CityWeather小程序问答

WordPress留言随机本地头像

WordPress 留言头像只能使用  Gravatar 头像而且还拖累网站速度。使用头像插件,只能使用一个特定的头像来给未注册的用户显示头像,过于单调?最好的方法是随机显示留言头像,现在来动手实现吧!

WordPress 插件中,关于头像的插件有很多,但是能够实现随机头像的插件却几乎没有,所以这个功能必须自己动手来实现,方法如下:

实现方法:

WordPress 实现方法很简单,利用如下代码:

add_filter( 'get_avatar' , 'local_random_avatar' , 1 , 5 );
function local_random_avatar( $avatar, $id_or_email, $size, $default, $alt) {
    if ( ! empty( $id_or_email->user_id ) ) {
        $avatar = ''.get_template_directory_uri().'/avatar-fruit/admin.png'; // 此处修改链接及图片后缀名
    }else{
        $random = mt_rand(1, 20);   // 此处修改随机头像编号 
        $avatar = ''.get_template_directory_uri().'/avatar-fruit/Fruit-'. $random .'.png';  // 此处修改链接及图片后缀名
    }
    $avatar = "<img alt='{$alt}' src='{$avatar}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />";
    return $avatar;
}

在两条注释的地方修改你自己的图片地址和名称,该有符号的地方要加上符号,随机产生的只有数字,我这里随机数产生范围是(1,20):

使用相对链接

比如我的系列图片命名Fruit-1.pngFruit-2.pngFruit-3.png …,并且头像文件夹名称avatar-fruit,那么我的图片相对链接地址可以写成:

‘avatar-fruit/Fruit-’ + 随机数 + ‘.png’ 这种形式。

需要注意的是,使用相对链接,这个头像文件夹应该放在当前主题下的根目录,这个很重要!

比如我是用的是 twentythirteen 主题,那么就要放在这个位置:/wp-content/themes/twentythirteen/avatar-fruit/

使用绝对链接

如果你拿捏不准位置,或者经常更换主题,那么使用绝对链接肯定没错:

‘http://nousbuild.org/avatar-fruit/Fruit-’ + 随机数 + ‘.png’ 这种形式。

将以上代码粘贴到 当前主题的functions.php 中,这是个老方法,你可以这样做,但是我建议你按照我下面的操作来做,便于维护和选择执行范围:

安装 Snippets

在 WordPress 插件中搜索并安装插件:Code Snippets

插件地址:点击此处

安装好插件后启用,点击 添加片段新建 一个片段。自己命名并插入相关代码,然后注意一下底部选项:

选项 效果
Run snippets everywhere 在所有页面执行此段代码
Only run on site front-end 仅在前端执行此代码,对后端无影响

建议选择第二项效果更佳,仅在前端执行此代码,实现随机头像效果。

保存执行即可!

但是,这样实现起来会有一定的问题,比如你在已经登陆到 WordPress后台 的时候,访问前端网站,Wordpress 会在顶部显示你的登陆状态,由于前端实行随机头像,导致缩略图和个人头像不一致。

到这里,前端随机头像肯定就实现了,如果你没有成功,尝试检查图片路径的问题。下面是修复一个小问题,如果你不在意也可以不管他,可以到此结束了!

如果还有疑问,可以去首页 www.nousbuild.org 最底端,向我发起QQ咨询。

问题修复:

首先,你得先安装一款 WordPress 头像插件,类似于 WP User Avatar,不用非得安装与我相同的插件,Wordpress 大多数的头像插件都很类似。

WP User Avatar 插件连接:点击进入

进入设置界面,我们需要将 默认头像 此处不选中,但这是个单选框,不能取消选中,我们必须借用浏览器进行修改代码。用 Chrome浏览器 Ctrl + Shift + i 打开检查:

定位到选项位置:

radio 改为 checkbox,单选框就变成了复选框:

然后,退出代码检查模式,下面就很简单了,取消选中并保存即可:

最后,只需在 用户编辑 中设置自己的管理员头像即可,这样一来在前端,WP User Avatar 的优先级比 Snippents 修改的 functions.php 的优先级高,不会出现上类问题。

继续阅读WordPress留言随机本地头像

WordPress增加文章字体栏

WordPress 在线文章工具栏太少,无法精确修改文字大小,或是想要更改文字字体、增加下划线?现在无须安装插件,直接调用Wordpress隐藏工具栏就可以拓展更多功能。减少在文章中嵌入HTML的过程。

想增加字体栏?无需安装任何插件,因为Wordpress已经内置的文字调整功能,之时没有显示出来,我们只需要修改当前主题的 functions.php 文件,在其底部增加下列代码:

修改 functions.php 
//Font Size
function add_editor_buttons($buttons) {
$buttons[] = 'fontselect';
$buttons[] = 'fontsizeselect';
$buttons[] = 'backcolor';
$buttons[] = 'underline';
$buttons[] = 'hr';
$buttons[] = 'sub';
$buttons[] = 'sup';
$buttons[] = 'cut';
$buttons[] = 'copy';
$buttons[] = 'paste';
$buttons[] = 'cleanup';
$buttons[] = 'wp_page';
$buttons[] = 'newdocument';
return $buttons;
}
add_filter("mce_buttons_3", "add_editor_buttons");

如果保存时提示 无法更改,可以尝试使用FTP在本地进行更改,再上传。

原先文章栏:
增加文字栏:
继续阅读WordPress增加文章字体栏