社区使用新的默认头像方式

由于新用户都不喜欢设置头像,后台已经增加了从Gavatar获取头像功能,用的人还是很少。后来我又使用了给新用户设置随机头像,设置系统默认的一些头像,不过效果也不是很好。

现在又换了一种方式,新用户默认就不设置头像了,根据用户名的首字母创建一个SVG作为头像。还有些细节需要继续完善。

现在效果是这样的:

enter image description here

共 8 个回复


shenjiayu

@jimmykuu 开头字母表示不错,我昨晚去把ploymer上面的教程的头像全拉下来了。。感觉也不错~

# 0

Bluek404

背景色也随机就好了

# 1

yue

好喜欢这套字母头像!话说站长有没有再优化Golang中国前端的打算呢?感觉在手机上浏览体验还是差一些,个人比较喜欢 https://ruby-china.orghttps://phphub.org 的风格。嗯,最近在读 Gopher源码,受益匪浅呀~

# 2

jimmykuu

谢谢你的喜欢,前端和后台我会继续优化,因为最近比较忙,所以没怎么提交代码。

Gopher没有用第三方框架,基本上都是内置库的东西,做的封装也不多,应该还是比较容易理解的。

# 3

yue

@jimmykuu
学习读代码到这了,觉得有点乱~

func (u *User) AvatarSVG(size int, properties ...string) template.HTML {
textByte := u.Username[0]
color := colors[int(textByte)%len(colors)]

return template.HTML(fmt.Sprintf(`<svg xmlns="http://www.w3.org/2000/svg" width="%d" height="%d" %s>
  <rect x="0" y="0" width="%d" height="%d" rx="6" ry="6"
  fill="%s" />
  <text fill="white" x="%dpx" y="%dpx" font-size="30" font-weight="bold" text-anchor="middle" style="dominant-baseline: central;">%s</text>
</svg>`, size, size, strings.Join(properties, " "), size, size, color, size/2, size/2, strings.ToUpper(string(textByte))))

var img string
if user.Avatar == "" {
    img = string(user.AvatarSVG(48, "class=\"gravatar\""))
} else {
    img = fmt.Sprintf(`<img class="gravatar img-rounded" src="%s-middle" class="gravatar">`, user.AvatarImgSrc())
}

请教一下,查看首页HTML的源码,没有头像user的class="gravatar"未渲染出来呢?

# 5

jimmykuu

第二段代码没用到,直接在页面中进行的类似于第二段代码判断,并生成HTML,应该是考虑到不同的地方头像的大小什么不同,所以都在页面中判断了,没用这段代码。

# 6

hanswim

终于知道我的头像是怎么来的了。。。

# 7