Nancy之给我们的网站添加自定义图标

当我们在做一个网站时,可能经常会有这样一个需求,要给我们做的网站添加一个自定义的图标。

在Nancy中,默认是的下面这样

一个妹子的头像,其实也是挺好看的!!

那么当我们想要替换这个默认的,应该要怎么做呢?

下面就来看看具体的实现

首先,准备一张名为 favicon.ico或 favicon.png 图片

这里有两种实现方法提供参考

方法一:替换默认的图标(IRootPathProvider的实现)

如果我们是使用默认的IRootPathProvider的实现,这个时候,我们直接添加图片在我们的项目根目录即可

Nancy会去搜索这个默认的RootPath的favicon资源,它找到的第一个就将会是我们网站的图标。

效果如下:

有时候,默认的不一定是最好的,所以我们可以

自己去实现IRootPathProvider这个接口,但一个项目中,只能有一个实现(除了默认的)

具体如下

1     public class CustomRootPathProvider : IRootPathProvider
2     {
3         public string GetRootPath()
4         {
5             return AppDomain.CurrentDomain.GetData(".appPath").ToString();
6         }
7     }  

其中,GetRootPath返回的是绝对路径!!

这个路径可以用你能想到的任何方式得到!

然后,我们需要在“引导程序”中做点事

1      protected override IRootPathProvider RootPathProvider
2         {
3             get { return new CustomRootPathProvider(); }
4         } 

这样做是比较保险的一种做法(不需要特地将我们的图片资源设置为嵌入的资源)

方法二:使用嵌入的图标(Override FavIcon)

这种方法需要我们去重写 FacIcon这个方法

 1     protected override byte[] FavIcon
 2         {
 3             get { return this.favicon ?? (this.favicon = LoadFavIcon()); }
 4         }
 5         private byte[] LoadFavIcon()
 6         {
 7             using (var resourceStream = GetType().Assembly.GetManifestResourceStream("NancyFavIconDemo.favicon.ico"))
 8             {
 9                 var tempFavicon = new byte[resourceStream.Length];
10                 resourceStream.Read(tempFavicon, 0, (int)resourceStream.Length);
11                 return tempFavicon;
12             }
13         }  

其中,GetMainifestResourceStream的参数是“程序集名称.资源名称”(NancyFavIconDemo是我这个Demo的程序集名称,favicon.ico是我在根目录的一个图片)

还有重要的一步是

将我们的图片属性中的Build Action设置为 Embedded Resource(嵌入的资源)

具体原因我们可以参考Assembly.GetManifestResourceStream Method (String)里面的Remark

A manifest resource is a resource (such as an image file) that is embedded in the assembly at compile time. 

此时,我们同样可以看到相同的效果

如果 我们没有设置为嵌入的资源,那么我们的resourceStream对象将一直为空

下面我们来看看Nancy这一块内容的内部实现

关于favicon的实现就是在FavIconApplicationStartup.cs里面

来看看它的描述

就像前面说的,它会去找favicon,找到就用找到的,没找到就用默认的。

里面有一个带IRootPathProvider参数构造函数,可以简单理解为指定要搜索的范围。

1         /// <summary>
2         /// Initializes a new instance of the <see cref="FavIconApplicationStartup"/> class, with the
3         /// provided <see cref="IRootPathProvider"/> instance.
4         /// </summary>
5         /// <param name="rootPathProvider">The <see cref="IRootPathProvider"/> that should be used to scan for a favicon.</param>
6         public FavIconApplicationStartup(IRootPathProvider rootPathProvider)
7         {
8             FavIconApplicationStartup.rootPathProvider = rootPathProvider;
9         }

下面是默认的图标实现方法,我们override的实现和它的基本一致!!

 1         private static byte[] ExtractDefaultIcon()
 2         {
 3             var resourceStream =
 4                 typeof(INancyEngine).Assembly.GetManifestResourceStream("Nancy.favicon.ico");
 5
 6             if (resourceStream == null)
 7             {
 8                 return null;
 9             }
10
11             var result =
12                 new byte[resourceStream.Length];
13
14             resourceStream.Read(result, 0, (int)resourceStream.Length);
15
16             return result;
17         }    

默认图标在ErrorPipeline.cs和FormatterExtensions.cs之间(不细心去看,压根就看不见)

里面还有一个“搜索”图标的方法

 1          private static byte[] LocateIconOnFileSystem()
 2         {
 3             if (rootPathProvider == null)
 4             {
 5                 return null;
 6             }
 7
 8             var extensions = new[] { "ico", "png" };
 9
10             var locatedFavIcon = extensions.SelectMany(EnumerateFiles).FirstOrDefault();
11             if (locatedFavIcon == null)
12             {
13                 return null;
14             }
15
16             try
17             {
18                 return File.ReadAllBytes(locatedFavIcon);
19             }
20             catch (Exception e)
21             {
22                 if (!StaticConfiguration.DisableErrorTraces)
23                 {
24                     throw new InvalidDataException("Unable to load favicon", e);
25                 }
26
27                 return null;
28             }
29         }

我们可以发现,我们用的后缀可以是.ico和.png。

时间: 2024-08-10 00:07:14

Nancy之给我们的网站添加自定义图标的相关文章

网站加上图标

网站加上图标,语句 <link rel="icon" href="favicon.ico" type="image/x-icon" /> 图标需要满足以下条件: 1.ico格式 2.图片 256*256 ico图片制作工具 ps6 + ICOFormat.8bi 插件

高德地图-添加自定义图标

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, wi

为 Drupal 7 网站添加自定义CSS

当我们在逛聊天室或者论坛时,经常会碰到有人提问怎么向 Drupal 网站中添加自定义CSS —— 通常来讲,通过 Drupal 主题来进行添加最好.不过在某些情况下,因为环境限制或网站管理员没有访问主题文件的权限,而不得不考虑其它办法. 今天本文就来介绍一下,如何使用CSS Injector模块来为 Drupal 7 网站中添加自定义CSS. (译注:不论是 CSS Injector 还是 CSS Editor,都可作为临时性的CSS添加和调整手段,但最终都还是应该通过主题CSS文件来进行添加)

为网站设置图标,显示在浏览器标签页

这句话起什么作用 ? <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />是定义站点的icon图标,跟网页中的图片有本质上的区别,icon是显示在地址栏最前面的一个16*16的小图标 是图片,ico格式的图片用于为网站设置图标,显示在浏览器标签页

完美解决网站PNG图标在IE6下的透明显示

现在IE6虽然有些落后,但不少xp用户还是首选IE6浏览器,一款经典长久也标准快速的浏览器必然会有忠实的用户,png图标IE6下默认是不支持的,可以通过js代码实现,下面由一叶扁舟为大家整理,代码可直接下载 一.下载我整理好的js文件 上传至网站js目录中 二.然后在需要实现透明的网页中head之间直接插入下面代码即可 <!--[if IE 6]> <script src="js/DD_belatedPNG_0.0.8a.js" type="text/jav

网站微图标,页标签,favicon.ico

随便打开一个网页:比如 http://www.baidu.com/ 可以看到在浏览器的标签头上面显示了一个图标,也就是我们常说的favicon.ico, 由于这篇文章主要讨论favicon.ico,以及各个浏览器对其的不同处理,所以还是新建web项目如下: home.html 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ho

在浏览器的标签页显示网站标志图标(或指定图标)的方法

对于不同的浏览器,方法是有差别的1.对于IE或TT浏览器:把需要显示的16x16像素的ICO图标命名为favicon.ICO放置在网站根目录下,浏览器会自动检索2.这大概是所有浏览器通用的在标签页加入指定图标的方法:把favicon.ico图标放到网站根目录下,在网页的<head></head>中加入<link rel="shortcut icon" href="favicon.ico" type="image/x-icon&

网站小图标

访问网站的时候,可以在标题栏.搜索栏.收藏夹看到网站的小图标,它们其实就放在网站根目录下,名为:favicon.ico 如: http://www.cnblogs.com/favicon.ico 制作Favicon.ico的方法: 创建2个256色的小图片:像素大小为32×32(用于桌面图标)和16 ×16(用于浏览器),调色板要选用"Windows 默认调色板",不然,在最终的效果展示中图形可能会发生迥异于您初衷的颜色上变化. 使用: 图片制作好后,使用如Image2Ico之类的小程

easyui添加自定义图标

最近用easyui发现图标挺少的,其实可以另外添加一个css样式,不过我偷懒,直接在easyui的css里面添加了. 下面是目录: icon.css是easyui的默认样式文件,ext_icons文件夹呢装有要添加的图标文件.这时候直接修改icon.css 1处就是对应的图标名,即data-options里面的iconCls名,如: <a href="javascript:void(0);" class="easyui-menubutton" data-opt