天天看點

gravatar配置和使用【讓你的網站使用全球通用頭像】

前言

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

  

gravatar配置和使用【讓你的網站使用全球通用頭像】

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

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

注冊

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

gravatar配置和使用【讓你的網站使用全球通用頭像】

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

gravatar配置和使用【讓你的網站使用全球通用頭像】

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

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.
gravatar配置和使用【讓你的網站使用全球通用頭像】

使用

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

gravatar配置和使用【讓你的網站使用全球通用頭像】

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

1      string hash = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile("[email protected]", "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 />      

  運作效果:

gravatar配置和使用【讓你的網站使用全球通用頭像】

  我選取的是avatar參數,可以看到url的不同找不到圖檔會随機生成一個圖檔,當然其他幾個參數也是一樣,這個可以用在沒有回複的時候沒有輸入郵箱或是輸入郵箱找不到對應圖檔,可以使用其随機圖檔。

  很酷哦!

作者:田園裡的蟋蟀

微信公衆号:你好架構

出處:http://www.cnblogs.com/xishuai/

公衆号會不定時的分享有關架構的方方面面,包含并不局限于:Microservices(微服務)、Service Mesh(服務網格)、DDD/TDD、Spring Cloud、Dubbo、Service Fabric、Linkerd、Envoy、Istio、Conduit、Kubernetes、Docker、MacOS/Linux、Java、.NET Core/ASP.NET Core、Redis、RabbitMQ、MongoDB、GitLab、CI/CD(持續內建/持續部署)、DevOps等等。

本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接配接。

分享到:

QQ空間

新浪微網誌

騰訊微網誌

微信

更多

繼續閱讀