LOL前端重构规范

# 海外 - 网页分享

目前支持 Facebook Twitter 分享，需要在 html head 设置不同媒体分享的 meta 数据标签

提示

所有海外业务 html 都需要设置分享 meta，因为浏览器自带的分享也会应用

注意：默认配置的 url title description image 是官网的分享信息，根据页面需求进行更改，url 必须改为当前页面地址

<!-- 通用分享图 -->
<meta itemprop="image" content="https://goldenspatula.com/resources/share.jpg">
<!-- facebook 分享 -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="goldenspatula.com">
<meta property="og:title" content="Golden Spatula">
<meta property="og:description" content="Golden Spatula is a champion auto-battler strategy mobile game. It is one of the ‘TFT franchise’ titles together with Teamfight Tactics and Teamfight Tactics Mobile from Riot Games, and is a mobile-exclusive game built primarily with the mobile audience in mind.In Golden Spatula, players need to fully utilize their intellect to recruit champions from a random pool and form the best lineup. They can empower their lineup by leveling up their champions, gearing them with various items including the powerful golden spatula itself. In each match, eight players use their battle formations to engage in one-on-one combat, continuously eliminating each other until the final victorious player remains.">
<meta property="og:url" content="https://goldenspatula.com">
<meta property="og:image" content="https://goldenspatula.com/resources/share.jpg">
<!-- twitter 分享 -->
<meta name="twitter:site" content="@goldenspatula">
<meta name="twitter:title" content="Golden Spatula">
<meta name="twitter:description" content="Golden Spatula is a champion auto-battler strategy mobile game. It is one of the ‘TFT franchise’ titles together with Teamfight Tactics and Teamfight Tactics Mobile from Riot Games, and is a mobile-exclusive game built primarily with the mobile audience in mind.In Golden Spatula, players need to fully utilize their intellect to recruit champions from a random pool and form the best lineup. They can empower their lineup by leveling up their champions, gearing them with various items including the powerful golden spatula itself. In each match, eight players use their battle formations to engage in one-on-one combat, continuously eliminating each other until the final victorious player remains.">
<meta name="twitter:url" content="https://goldenspatula.com">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://goldenspatula.com/resources/share.jpg">
<meta name="twitter:image:src" content="https://goldenspatula.com/resources/share.jpg">

# 点击分享

用于点击页面按钮触发的分享，url 需要替换当前页面的分享地址

// 分享到 Facebook
const facebookShare = () => {
  // 分享的页面地址，通常是当前页面
  const url = encodeURIComponent('https://goldenspatula.com');
  const facebook = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
  window.open(facebook, '_blank');
};

// 分享到 Twitter
const twitterShare = () => {
  // 分享文案内容，可以为空，咨询产品确定文案
  const text = '';
  // 分享的页面地址，通常是当前页面
  const url = encodeURIComponent('https://goldenspatula.com');
  // 填写要 @ 的用户名，会显示 “via @用户名”，可以为空
  const via = '';
  const content = `text=${text}&url=${url}&via=${via}`;
  const twitter = `https://twitter.com/intent/tweet?${content}`;
  window.open(twitter, '_blank');
};

示例：https://goldenspatula.com/act/a20241011testplugin/share.html

← 拉起 APP →