gravatar配置和使用【讓你的網站使用全球通用頭像】 - xishuai－IT工程師數位筆記本

文章出處

前言

　　我們在很多博客或者網站留言，評論的時候會看到有的人頭像很酷很個性化，但是這個博客和網站本身并沒有提供設置頭像的功能，感覺有點神奇，那么是怎么做到的呢？其實這是使用了Gravatar。

　　Gravatar是Globally Recognized Avatar的縮寫，是gravatar推出的一項服務，意為“全球通用頭像”。如果在Gravatar的服務器上放置了你自己的頭像，那么在任何支持 Gravatar的blog或者留言本上留言時，只要提供你與這個頭像關聯的email地址，就能夠顯示出你的Gravatar頭像來。

　　如果你使用過wordpress，那你對Gravatar肯定不會陌生，如果你對Gravatar不是很熟悉，在自己的個站中加入Gravatar可能會有些不知所措，剛開始配置的時候網上找了相關資料，但是都是些關于Gravatar介紹的東西，最后還在其官網上找到相關東西（當然是google翻譯過來的，哈哈），其實很簡單，我們細細道來。

注冊

　　如果在自己的個人加入Gravatar，其實不需要注冊，只不過回復的時候要顯示自己的頭像，還是要注冊一個屬于自己的個性頭像，官網：http://en.gravatar.com

　　打開注冊頁面，會發現域名變成wordpress了，網上說wordpress是Gravatar的爹，肯定是有些關系。

　　注冊只需要郵箱和用戶名就行了，注冊成功后，我們進入個人中心，我們可以添加郵箱和頭像，一個郵箱可以傳多個頭像，但是一個郵箱只能對應一個頭像。

　　上傳完頭像后，會看到一個等級選項，本人英語很爛，大家可以翻譯一下看下，大概的意思是頭像安全等級，這個選擇后可能在審核的時候會用到，我們上傳默認會是g，這個在引用圖片的時候也會用到。

g: suitable for display on all websites with any audience type.
pg: may contain rude gestures, provocatively dressed individuals, the lesser swear words, or mild violence.
r: may contain such things as harsh profanity, intense violence, nudity, or hard drug use.
x: may contain hardcore sexual imagery or extremely disturbing violence.

使用

　　在個人中心有個Link，我們點開就可以看到剛才上傳的頭像地址。

　　http://www.gravatar.com/avatar/aae1e25f99469f5c616f77b2c7682e9d.png，aae1e25f99469f5c616f77b2c7682e9d是個哈希值，看到這里大家可能就清楚了，為什么回復的時候要填寫郵箱，就是要生成一個哈希值，對應一個頭像，因為郵箱是唯一，所有對應的頭像也是唯一的，我們可以在自己的個站這樣編寫代碼：

1      string hash = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile("624541997@qq.com", "md5");
2      string imageUrl = string.Format(@"http://www.gravatar.com/avatar/{0}?s={1}&d=mm&r=g", hash.ToLower(), "100");
3      Image1.ImageUrl = imageUrl;

　　其實使用就這么簡單，這邊需要注意的是生成的哈希值是大寫的，因為gravatar郵箱生成哈希值是小寫，所有要hash.ToLower()轉成小寫。

　　在鏈接后面有幾個參數，這邊說明下：s是大小的意思，r就是我們上面說的等級，參數一般是g。

　　關于d有幾個選項：

404: do not load any image if none is associated with the email hash, instead return an HTTP 404 (File Not Found) response
mm: (mystery-man) a simple, cartoon-style silhouetted outline of a person (does not vary by email hash)
identicon: a geometric pattern based on an email hash
monsterid: a generated 'monster' with different colors, faces, etc
wavatar: generated faces with differing features and backgrounds
retro: awesome generated, 8-bit arcade-style pixelated faces
blank: a transparent PNG image (border added to HTML below for demonstration purposes)

　　關于這幾個選項就不多說，大家可以翻譯看下，除了404、mm和blank其他幾種都是隨機的，這個一般是在找不到圖片的情況下才會出現，比如地址錯誤找不到圖片，就會顯示默認的，根據d的參數顯示相應圖片。我們做個測試看下效果：

1         <asp:Image ID="Image2" runat="server" ImageUrl="http://www.gravatar.com/avatar/aae1e25f99469f5c616f777e9d?d=wavatar&s=40" />url:http://www.gravatar.com/avatar/aae1e25f99469f5c616f777e9d?d=wavatar&s=40 <br />
2         <asp:Image ID="Image3" runat="server" ImageUrl="http://www.gravatar.com/avatar/aae1e25f99469f5c616f7e9d?d=wavatar&s=40" />url:http://www.gravatar.com/avatar/aae1e25f99469f5c616f7e9d?d=wavatar&s=40 <br />
3         <asp:Image ID="Image4" runat="server" ImageUrl="http://www.gravatar.com/avatar/aae1e25f99469f5c616f777d?d=wavatar&s=40" />url:http://www.gravatar.com/avatar/aae1e25f99469f5c616f777d?d=wavatar&s=40 <br />
4         <asp:Image ID="Image5" runat="server" ImageUrl="http://www.gravatar.com/avatar/aae1e25f99469f5c616f777?d=wavatar&s=40" />url:http://www.gravatar.com/avatar/aae1e25f99469f5c616f777?d=wavatar&s=40 <br />