feat(gravatar): add gravatar.params config option (#508)

* feat(gravatar): add `gravatar.params` config option BREAKING CHANGE: The `gravatar.default` config option has been removed. Please use `gravatar.params` instead. The default value for `gravatar.params` is now `"d=mp&s=240"`. Signed-off-by: qwqcode <[email protected]> * add docs and fix sidebar Signed-off-by: qwqcode <[email protected]> --------- Signed-off-by: qwqcode <[email protected]>
ArtalkJS · May 10, 2023 · 08c0b29 · 08c0b29
1 parent 01ed04c
commit 08c0b29
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 17 deletions.
diff --git a/conf/artalk.example.simple.yml b/conf/artalk.example.simple.yml
@@ -152,7 +152,7 @@ frontend:
   nestSort: DATE_ASC
   gravatar:
     mirror: "https://www.gravatar.com/"
-    default: "mp"
+    params: "d=mp&s=240"
   pagination:
     pageSize: 20
     readMore: true

diff --git a/conf/artalk.example.yml b/conf/artalk.example.yml
@@ -297,8 +297,10 @@ frontend:
   nestSort: DATE_ASC
   # Gravatar
   gravatar:
+    # API URL
     mirror: "https://www.gravatar.com/"
-    default: "mp"
+    # API parameters
+    params: "d=mp&s=240"
   # Comment pagination
   pagination:
     # Number of comments per page

diff --git a/conf/artalk.example.zh-CN.yml b/conf/artalk.example.zh-CN.yml
@@ -302,12 +302,12 @@ frontend:
   nestMax: 2
   # 嵌套评论排序规则 ["DATE_ASC", "DATE_DESC", "VOTE_UP_DESC"]
   nestSort: DATE_ASC
-  # 头像
+  # 头像 Gravatar
   gravatar:
-    # Gravatar 镜像地址
+    # API 地址
     mirror: "https://cravatar.cn/avatar/"
-    # 默认头像
-    default: "mp"
+    # API 参数
+    params: "d=mp&s=240"
   # 评论分页
   pagination:
     # 每页评论数

diff --git a/docs/guide/frontend/config.md b/docs/guide/frontend/config.md
@@ -350,12 +350,24 @@ gravatar: {
 >
 > loli：https://gravatar.loli.net/avatar/
 
-### gravatar.default
+### gravatar.params
 
-**默认头像**（URL or [Gravatar Type](http://cn.gravatar.org/site/implement/images/#default-image)）
+**Gravatar API 参数**
 
 - 类型：`String`
-- 默认值：`"mp"`
+- 默认值：`"d=mp&s=240"`
+
+例如，你可以通过该配置项设置默认头像 (`d=mp`) 和头像尺寸 (`s=240`)。
+
+参考：[Gravatar API 文档](http://cn.gravatar.org/site/implement/images/)
+
+该配置项格式为 HTTP Query。
+
+::: warning 更新注意
+
+v2.5.5 已废弃 `gravatar.default` 配置项，请使用 `gravatar.params` 替代。
+
+:::
 
 ### avatarURLBuilder
 

diff --git a/ui/packages/artalk-sidebar/src/components/Header.vue b/ui/packages/artalk-sidebar/src/components/Header.vue
@@ -11,9 +11,11 @@ const user = useUserStore()
 const { t } = useI18n()
 const { site: curtSite, isAdmin, email } = storeToRefs(user)
 
-const userAvatarImgURL = computed(() =>
-  `${(artalk?.ctx.conf.gravatar.mirror || '').replace(/\/$/, '')}/${MD5(email.value)}`
-  + `?d=${encodeURIComponent(artalk?.ctx.conf.gravatar.default || 'mp')}&s=80`)
+const userAvatarImgURL = computed(() => {
+  const conf = artalk?.ctx.conf?.gravatar
+  if (!conf) return ``
+  return `${conf.mirror.replace(/\/$/, '')}/${MD5(email.value)}?${conf.params.replace(/^\?/, '')}`
+})
 </script>
 
 <template>

diff --git a/ui/packages/artalk/src/defaults.ts b/ui/packages/artalk/src/defaults.ts
@@ -28,8 +28,8 @@ const defaults: ArtalkConfig = {
   pvEl: '#ArtalkPV',
 
   gravatar: {
-    default: 'mp',
     mirror: 'https://cravatar.cn/avatar/',
+    params: 'd=mp&s=240',
   },
 
   pagination: {

diff --git a/ui/packages/artalk/src/lib/utils.ts b/ui/packages/artalk/src/lib/utils.ts
@@ -116,7 +116,8 @@ export function onImagesLoaded($container: HTMLElement, event: Function) {
 }
 
 export function getGravatarURL(ctx: Context, emailMD5: string) {
-  return `${(ctx.conf.gravatar.mirror).replace(/\/$/, '')}/${emailMD5}?d=${encodeURIComponent(ctx.conf.gravatar.default)}&s=80`
+  const { mirror, params } = ctx.conf.gravatar
+  return `${mirror.replace(/\/$/, '')}/${emailMD5}?${params.replace(/^\?/, '')}`
 }
 
 export function sleep(ms: number) {

diff --git a/ui/packages/artalk/types/artalk-config.d.ts b/ui/packages/artalk/types/artalk-config.d.ts
@@ -34,10 +34,10 @@ export default interface ArtalkConfig {
 
   /** Gravatar 头像 */
   gravatar: {
-    /** 镜像 */
+    /** API 地址 */
     mirror: string
-    /** 默认头像（URL or Gravatar Type） */
-    default: string
+    /** API 参数 */
+    params: string
   }
 
   /** 头像链接生成器 */