首页>编程相关>其他源码
下载
潘皮

潘皮

简约固执己见的 Mastodon 网络客户端。

花式截图

?️ 发音: /fænpi/ ( FAN-pee ) ?听

这是 Mastodon 的替代 Web 客户端。

  • ？制作：https://phanpy.social
    • production分部
    • 少休息
    • 除非关键，否则修复速度较慢
  • ?️开发：https://dev.phanpy.social
    • main
    • 可能会更快看到新的很酷的东西
    • 可能会更频繁地破裂
    • 也可能修复得更快

？关注 Mastodon 上的 @phanpy 了解最新动态 ✨

一切都是按照我的品味和愿景设计和设计的。这是我的一个个人业余项目，旨在了解 Mastodon 并尝试新的 UI/UX 想法。

特征

  • ？多个账户
  • ？撰写窗口弹出/输入
  • ？浅色/深色/自动主题
  • ？分组通知
  • ？嵌套评论线程
  • ？未发送草稿恢复
  • ？增强轮播™️
  • ⚡ Shortcuts™️ 具有多列或选项卡栏等视图模式
  • #️⃣ 多标签时间线

设计决策

  • 状态操作（回复、加分、收藏、书签等）默认隐藏。
    它们仅出现在个人状态页面中。这是为了减少混乱和干扰。这可能会导致参与度降低，但我们并不是在这里追逐数字。
  • 助推用火箭图标 表示。
    绿色双箭头图标（Twitter 的转发）看起来不适合术语“boost”。绿色火箭看起来很奇怪，所以我用紫色。
  • 时间线中显示短用户名 ( @username )，而不是完整帐户用户名 ( @username@instance ) 。
    尽管指南中提到“去中心化必须对用户透明”，但我认为我们不应该每次都把它推到脸上。完整用户名还存在一些与屏幕阅读器相关的可访问性问题，但不幸的是，该网络应用程序尚无法访问。
  • 时间线中的视频/GIF/任何内容都无法自动播放。
    时间线已经很混乱了，有很多人、品牌、新闻和媒体试图吸引你的注意力。我们不要让事情变得更糟。 （目前的例外是动画表情符号。）
  • 基于哈希的 URL 。
    这个网络应用程序并不是要完全替代 Mastodon 现有的前端。没有 SEO、数据库、无服务器或任何长期运行的服务器。有一天我可能会错。

微妙的 UI 实现

用户名显示

用户名显示

  • 在时间轴上，用户名显示为[NAME] @[username] 。
  • 对于@[username] ，始终排除实例域名。
  • 如果[NAME]看起来与@[username]相同，则@[username]也会被排除。

增强轮播

增强轮播

  • 从获取的帖子（例如每次获取 20 个帖子）中，如果提升数量超过帖子总数的四分之一或连续提升超过 3 次，将触发提升轮播 UI。
  • 如果提升数量超过帖子总数的四分之三，则提升轮播 UI 将位于获取的总帖子的末尾（每个“页面”）。
  • 否则，增强轮播 UI 将插入帖子之间。

螺纹编号徽章（例如螺纹 1/X）

线程编号徽章

  • 从缓存或其他 API 请求中检查每个帖子的inReplyToId ，直到找到根帖子。
  • 如果找到根帖子，徽章将显示帖子在线程中的索引号。
  • 限制最多 3 个 API 请求，因为根帖子可能很旧或线程超长。
  • 如果找不到索引号，徽章将回退到显示没有索引号的Thread 。

标签填充崩溃

标签填充崩溃

  • 包含超过 3 个主题标签的帖子内容的第一段将折叠至最多 3 行。
  • 第一段之后包含超过 3 个主题标签的后续段落将折叠为 1 行。
  • 折叠段落后具有超过 1 个主题标签的相邻段落将折叠为 1 行。
  • 如果主题标签周围或之间有文本，它们将不会折叠。
  • 折叠的主题标签将在末尾附加...
  • 它们还稍微淡出以减少视觉噪音。
  • 打开帖子视图将显示未折叠的主题标签。

过滤的帖子

  • “完全隐藏”过滤的帖子将被隐藏，没有 UI 可以显示它。
  • “警告隐藏”-过滤的帖子将被部分隐藏，显示过滤器名称和作者姓名。
    • 将鼠标悬停在帖子上可以部分显示内容，工具提示会显示帖子文本。
    • 单击它将打开帖子页面。
    • 长按或右键单击它将通过底部工作表 UI“查看”帖子。
    • 在增强轮播中，它们被排序到轮播的末尾。

发展

先决条件：Node.js 18+

  • npm install - 安装依赖项
  • npm run dev - 并行启动开发服务器和messages:extract ( clean + ``watch`)
  • npm run build - 为生产而构建
  • npm run preview - 预览生产版本
  • npm run fetch-instances - 从 joinmastodon.org/servers 获取实例列表，将其保存到src/data/instances.json
  • npm run sourcemap - 在生产版本上运行source-map-explorer
  • npm run messages:extract - 从源文件中提取消息并更新区域设置消息目录

技术栈

  • Vite - 构建工具
  • Preact - UI 库
  • Valtio - 状态管理
  • React Router - 路由
  • masto.js - Mastodon API 客户端
  • Iconify - 图标库
    • 明可爱的图标
  • 临桂-国际化
  • Vanilla CSS -是的，我是老派。

其中一些将来可能会发生变化。前端世界瞬息万变。

国际化

所有翻译均以src/locales文件夹中的 gettext .po文件形式提供。默认语言为英语 ( en )。 CLDR 复数规则用于复数化。 RTL（从右到左）语言也支持正确的文本方向、图标渲染和布局。

页面加载时，通过这些方法按顺序检测默认语言（使用第一个匹配）：

  1. URL 参数lang例如/?lang=zh-Hant
  2. localStorage密钥lang
  3. 浏览器的navigator.language

用户可以在设置中更改语言，这会设置localStorage键lang 。

译员指南

*灵感来自翻译 WordPress 手册：

  • 不要逐字翻译，要有机地翻译。
  • 尝试保持相同程度的正式（或非正式）
  • 不要使用俚语或特定于受众的术语
  • 注意变量的占位符。许多字符串都有占位符，例如{account} （变量）、 <0>{name} （带变量的标签）和# （数字占位符）。
  • 省略号 (…) 是故意的。不要删除它。
    • Nielsen Norman Group：“在命令文本中包含省略号以指示何时需要更多信息”
    • Apple 人机界面指南：“当操作需要更多信息才能完成时，请在菜单项的标签上添加省略号。省略号字符 (...) 表示人们需要输入信息或做出其他选择，通常是在另一个视图中。”
    • Windows 应用程序开发：“省略号意味着不完整。”
  • 日期时间戳、日期范围、数字、语言名称和文本分段由 ECMAScript 国际化 API 处理。
    • Intl.DateTimeFormat - 例如“8 Aug”、“08/08/2024”
    • Intl.RelativeTimeFormat - 例如“2 天前”、“2 天内”
    • Intl.NumberFormat - 例如“1,000”、“10K”
    • Intl.DisplayNames - 例如繁体中文 ( zh-Hant ) 中的“English”( en ) 是“中文”
    • Intl.Locale （带有适用于旧版浏览器的polyfill）
    • Intl.Segmenter （带有适用于旧版浏览器的polyfill）

技术说明

  • 字符串的 ID 是自动生成的，而不是显式定义的。一些好处是避免“命名事物”问题并避免重复。
    • 当需求和优先级发生变化时，将来可能会引入显式 ID。图书馆（Lingui）允许两者。
    • 如果某些字符串根据上下文、文化或地区进行不同的翻译，请报告问题。
  • 没有用于推送通知的字符串。语言在实例服务器上设置。
  • 本机 HTML 日期选择器，例如将始终遵循系统的区域设置，而不是用户设置的区域设置。
  • ALT 徽章中的“ALT”未翻译。它是跨语言的可识别标准。
  • 自定义表情符号名称未本地化，因此搜索不适用于非英语语言。
  • GIPHY API 支持搜索语言列表。
  • Unicode 从右到左标记 (RLM) ( U+200F , ‏ ) 可能需要用于混合 RTL/LTR 文本，特别是对于</code>元素 ( <code>document.title</code> )。</li><li>在开发过程中，还有一个额外的<code>pseudo-LOCALE</code>语言环境，用于伪本地化。它用于测试，不会出现在生产中。</li><li>在进行生产构建时，英语 ( <code>en</code> ) 目录消息不会单独捆绑。其他语言环境捆绑为单独的文件并按需加载。这确保<code>en</code>始终可用作后备。</li></ul><div class="markdown-heading" dir="auto"><h3>志愿者翻译</h3></div><p dir="auto">翻译在 Crowdin 上进行管理。您可以通过志愿翻译来提供帮助。</p><p dir="auto">阅读介绍文档以开始使用。</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> 自托管</h2></div><p dir="auto">这是一个<strong>纯静态的网络应用程序</strong>。您可以将其托管在任何您想要的地方。</p><p dir="auto">两种方式（二选一）：</p><div class="markdown-heading" dir="auto"><h3>简单的方法</h3></div><p dir="auto">转到版本并下载最新的<code>phanpy-dist.zip</code>或<code>phanpy-dist.tar.gz</code> 。它是预先构建的，因此不需要运行任何安装/构建命令。提取它。提供提取文件的文件夹。</p><div class="markdown-heading" dir="auto"><h3>定制方式</h3></div><p dir="auto">需要 Node.js。</p><p dir="auto">下载或<code>git clone</code>此存储库。使用<code>production</code>分支来发布<em>稳定</em>版本，使用<code>main</code>来发布<em>最新版本</em>。通过运行<code>npm run build</code> （在<code>npm install</code>之后）来构建它。提供<code>dist</code>文件夹。</p><p dir="auto">可以通过将环境变量传递给构建命令来完成自定义。示例： </p><div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="PHANPY_CLIENT_NAME="Phanpy Dev" PHANPY_WEBSITE="https://dev.phanpy.social" npm run build"><pre>PHANPY_CLIENT_NAME= <span class="pl-s"><span class="pl-pds">"</span> Phanpy Dev <span class="pl-pds">"</span></span> PHANPY_WEBSITE= <span class="pl-s"><span class="pl-pds">"</span> https://dev.phanpy.social <span class="pl-pds">"</span></span> npm run build</pre></div><div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="PHANPY_DEFAULT_INSTANCE=hachyderm.io PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL=https://hachyderm.io/auth/sign_up PHANPY_PRIVACY_POLICY_URL=https://hachyderm.io/privacy-policy npm run build"><pre>PHANPY_DEFAULT_INSTANCE=hachyderm.io PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL=https://hachyderm.io/auth/sign_up PHANPY_PRIVACY_POLICY_URL=https://hachyderm.io/privacy-policy npm run build</pre></div><p dir="auto">也可以在<code>.env</code>文件中设置它们。</p><p dir="auto">可用变量：</p><ul dir="auto"><li> <code>PHANPY_CLIENT_NAME</code> （可选，默认值： <code>Phanpy</code> ）影响：<ul dir="auto"><li>网页标题，显示在浏览器窗口或选项卡标题中</li><li>应用程序标题，当安装为 PWA 时，显示在主屏幕、macOS Dock、Windows 任务栏等中</li><li>OpenGraph 卡标题（在社交网络上共享时）</li><li>客户端名称，在注册应用程序进行身份验证时并显示为在某些应用程序/客户端中的帖子中使用的客户端</li></ul></li><li><code>PHANPY_WEBSITE</code> （可选但推荐，默认值： <code>https://phanpy.social</code> ）影响：<ul dir="auto"><li>网站的规范 URL</li><li> OpenGraph 卡 URL（在社交网络上共享时）</li><li> OpenGraph 卡图像的根路径</li><li>客户端 URL，在注册应用程序进行身份验证时并显示为在某些应用程序/客户端中的帖子中使用的客户端</li></ul></li><li><code>PHANPY_DEFAULT_INSTANCE</code> （可选，无默认值）：<ul dir="auto"><li>例如“mastodon.social”，不带<code>https://</code></li><li>默认登录实例</li><li>登录时，用户将立即重定向到实例的身份验证页面，而无需手动输入实例 URL 并提交</li></ul></li><li><code>PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL</code> （可选，无默认值）：<ul dir="auto"><li>实例注册页面的URL</li><li>例如<code>https://mastodon.social/auth/sign_up</code></li></ul></li><li> <code>PHANPY_PRIVACY_POLICY_URL</code> （可选，默认为官方实例的隐私政策）：<ul dir="auto"><li>隐私政策页面的 URL</li><li>可以指定实例自己的隐私策略</li></ul></li><li><code>PHANPY_DEFAULT_LANG</code> （可选）：<ul dir="auto"><li>如果未指定，默认语言为英语 ( <code>en</code> )。</li><li>多种检测方法后的后备语言（ <code>lang</code>查询参数、 <code>localStorage</code>和<code>navigator.language</code>中的<code>lang</code>键）</li></ul></li><li> <code>PHANPY_LINGVA_INSTANCES</code> （可选，以空格分隔的列表，默认值： <code>lingva.phanpy.social [...hard-coded list of fallback instances]</code> ）：<ul dir="auto"><li>指定以空格分隔的实例列表。在回退到后续实例之前，第一个将用作默认值。如果只有 1 个实例，则意味着没有后备。</li><li>可以指定一个自托管的 Lingva 实例，由 lingva-translate 或 lingva-api 提供支持</li><li><code>/.env</code>中硬编码的后备实例列表</li><li><g-emoji class="g-emoji" alias="arrow_upper_right">↗️</g-emoji> lingva-translate 实例列表</li></ul></li><li><code>PHANPY_IMG_ALT_API_URL</code> （可选，无默认值）：<ul dir="auto"><li> img-alt-api 自托管实例的 API 端点。</li><li>如果提供，将出现一个设置，供用户在编辑器中启用图像描述生成器。默认禁用。</li></ul></li><li> <code>PHANPY_GIPHY_API_KEY</code> （可选，无默认值）：<ul dir="auto"><li> GIPHY 的 API 密钥。请参阅 API 文档。</li><li>如果提供，将出现一个设置，供用户在编辑器中启用 GIF 选择器。默认禁用。</li><li>这不是自托管的。</li></ul></li></ul><div class="markdown-heading" dir="auto"><h3>静态网站托管</h3></div><p dir="auto">尝试在线搜索“如何自行托管静态网站”，因为有很多方法可以做到这一点。</p><div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto"> Lingva-translate 或 lingva-api 托管</h4></div><p dir="auto">请参阅 lingva-translate 或 lingva-api 的文档。</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> 社区部署</h2></div><p dir="auto">这些都是由其他优秀人士自行主持的。</p><ul dir="auto"><li> ferengi.one 作者：@david@weaknotes.com</li><li> halo.mookiesplace.com 作者：@mookie@mookiesplace.com</li><li> phanpy.bauxite.tech 作者：@b4ux1t3@hachyderm.io</li><li> phanpy.blaede.family 作者：@cassidy@blaede.family</li><li> phanpy.crmbl.uk 作者：@snail@crmbl.uk</li><li> phanpy.cz 作者：@zdendys@mamutovo.cz</li><li> phanpy.fulda.social 作者：@Ganneff@fulda.social</li><li> phanpy.gotosocial.social 作者：@admin@gotosocial.social</li><li> phanpy.hear-me.social 作者：@admin@hear-me.social</li><li> phanpy.mastodon.world 作者：@ruud@mastodon.world</li><li> phanpy.mstdn.mx 作者：@maop@mstdn.mx</li><li> phanpy.social.tchncs.de 作者：@milan@social.tchncs.de</li><li> phanpy.tilde.zone 作者：@ben@tilde.zone</li><li> phanpy.vmst.io 作者：@vmstan@vmst.io</li><li> Social.qrk.one 作者：@kev@fosstodon.org</li></ul><blockquote><p dir="auto">注意：通过创建拉取请求来添加您的。 </p></blockquote><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">成本</h2></div><p dir="auto">运行和开发此 Web 应用程序涉及的成本：</p><ul dir="auto"><li>域名 (.social)： <strong>23.18 美元/年</strong>（第一年 6.87 美元）</li><li>托管：免费</li><li>开发、设计、维护：“免费”（我的宝贵时间） </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">吉祥物</h2></div><p dir="auto">Phanpy 是地面型神奇宝贝。</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> 维护者+贡献者</h2></div><ul dir="auto"><li>Chee Aun（乳齿象）（推特）</li></ul><div class="markdown-heading" dir="auto"><h3>翻译志愿者</h3></div><ul dir="auto"><li>alidsds11（阿拉伯语）</li><li>另类（韩语）</li><li> BoFFire（阿拉伯语、法语、卡比尔语）</li><li>布拉瓦鲁（俄语）</li><li> cbasje（荷兰语）</li><li> cbo92（法语）</li><li> CDN（简体中文）</li><li> dannypsnl（繁体中文）</li><li>数据生物（加泰罗尼亚语）</li><li>迪兹罗（意大利语）</li><li> Drift6944（捷克语）</li><li> drydenwu（繁体中文）</li><li> elissarc（法语）</li><li>埃尔潘普利纳（西班牙语）</li><li> Fitik（世界语、希伯来语）</li><li>小苍兰（日语）</li><li>高斯（加利西亚语）</li><li>洪敏熙（韩语）</li><li> Hugoglyph（世界语、西班牙语）</li><li> isard (加泰罗尼亚语)</li><li> kaliuwu（波兰语）</li><li>卡拉菲（捷克）</li><li> katullo11​​（意大利语）</li><li>凯塔（德语）</li><li>伦 (泰语)</li><li> lucasofchirst（奥克西唐语、葡萄牙语、葡萄牙语、巴西语）</li><li> LukeHong（繁体中文）</li><li> marcin.kozinski（波兰语）</li><li> mkljczkk（波兰语）</li><li> mojosoeun（韩语）</li><li>莫雷尔（韩语）</li><li> MrWillCom（简体中文）</li><li> nclm（法语）</li><li>帕斯皮（意大利语）</li><li>朋克摇滚女孩（巴斯克）</li><li> radecos（法语）</li><li>拉泽姆（捷克）</li><li> realpixelcode（德语）</li><li>雷扎侯赛因扎德（波斯语）</li><li> rwmpelstilzchen（世界语、希伯来语）</li><li> SadmL（俄语）</li><li> SadmL_AI（俄语）</li><li> shuuji3（日语）</li><li> Sky_NiniKo（法语）</li><li> Steffo99（意大利语）</li><li> Su5hicz（捷克）</li><li>特费雷莫（西班牙语）</li><li> tkbremnes（挪威语 Bokmal）</li><li> tux93（德语）</li><li>真空31。 （立陶宛语）</li><li>瓦尔特莱（芬兰语）</li><li>瓦西里里（波兰语）</li><li> voyagercy（繁体中文）</li><li> xabi_itzultzaile（巴斯克语）</li><li> xen4n（乌克兰语）</li><li> xqueralt（加泰罗尼亚语）</li><li> ZiriSut（卡比尔语）</li><li> zkreml（捷克语） </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">背景故事</h2></div><p dir="auto">我是 Twitter 最早的用户之一。 Twitter 于 2006 年 7 月 15 日推出。我于 2006 年 12 月加入，我的第一条推文于 2006 年 12 月 18 日发布。</p><p dir="auto">我知道早期的 Twitter 是什么样子。很有趣。</p><p dir="auto">当时，我用 Python 和 Google App Engine 编写了一个名为“Twig”的 Twitter 克隆版。我几乎用 Appcelerator Titanium 编写了自己的 Twitter 桌面客户端。我在一次小型会议上发表了有关 Twitter 客户端的最佳演讲之一。我构建了一个名为“Twitter Columns”的网络应用程序，可以显示您的关注者列表、您的关注者的关注者、您的关注者、您的关注者的关注者等等。 2009 年，我写了一篇题为“我如何开始使用 Twitter”的博文。我为 DestroyTwitter（Jonnie Hallman 用 Adob​​e Air 制作的桌面客户端）创建了两个主题，其中一个名为“Vimeo”。 2013 年，我编写了自己的推文备份站点，其中包含一个用于查看我的推文的前端和一个用于存储推文的 CouchDB 后端。</p><p dir="auto">已经过去<strong>15年多了</strong>。</p><p dir="auto">我在这里。构建 Mastodon 网络客户端。</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> 替代网络客户端</h2></div><ul dir="auto"><li>圆叉 ↓<ul dir="auto"><li>集市</li></ul></li><li>Pinafore（退役）-叉子 ↓<ul dir="auto"><li>信号</li><li>埃纳福尔</li></ul></li><li>杜鹃+</li><li>森吉</li><li>肥皂盒</li><li>麋鹿-叉子↓<ul dir="auto"><li> elk.fedified.com</li></ul></li><li>桅杆甲板</li><li>内裤</li><li>图蒂</li><li>垃圾箱</li><li>斯塔图泽</li><li>獠牙</li><li>Mastodon Glitch Edition（独立前端）</li><li>锰</li><li>办公桌</li><li>更多的... </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> ?‍♂️ 致所有其他社交媒体客户端开发人员的通知</h2></div><p dir="auto">请复制此应用程序中的 UI 想法和实验。我认为其中一些非常好，如果更多的应用程序拥有它们那就太好了。</p><p dir="auto">如果您不是开发人员，请告诉您最喜欢的社交媒体客户端开发人员有关此应用程序的信息，并要求他们复制 UI 想法和实验。</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> 执照</h2></div><p dir="auto">麻省理工学院。</p> </div> <div class="zd_btn more_version_btn" data-more="展开" data-less="收起">展开</div> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template"> <span class="title">附加信息</span> </div> <ul class="more_info grid gap_y6 gap_x6 grid_c3"> <li> <span class="title">版本</span> <span class="text"></span> </li> <li> <span class="title">类型</span> <a class="text" href="/zh-cn/category/list_228_1.html">其他源码</a> </li> <li> <span class="title">更新时间</span> <span class="text">2024-11-09</span> </li> <li> <span class="title">大小</span> <span class="text"></span> </li> <li> <span class="title">语言</span> <span class="text">简体中文</span> </li> </ul> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template arrow_link"> <span class="title">相关应用</span> </div> <ul class="version_list grid gap_x6 gap_y6 grid_c2"> </ul> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template arrow_link"> <span class="title">为您推荐</span> </div> <ul class="column3_box lr_img_text_template grid gap_x6 gap_y6 grid_c3"> <li> <a class="img_item" href="/zh-cn/download/28990.html"><img src="https://images.downcodes.com/uploads/20220919/logo_63281248401771.jpg" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="知识付费系统源码丨在线教育内容付费知识变现丨视频问答图文付费课程小程序定制H5"></a> <div class="content"> <h3><a href="/zh-cn/download/28990.html">知识付费系统源码丨在线教育内容付费知识变现丨视频问答图文付费课程小程序定制H5</a></h3> <div class="cate"> <a href="/zh-cn/category/list_55_1.html">其他类别</a> </div> <div class="other"> <span></span> </div> </div> </li> <li> <a class="img_item" href="/zh-cn/app/45483.html"><img src="https://images.downcodes.com/uploads/20230317/logo_6413c6576e3f21.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="植物大战僵尸西游版"></a> <div class="content"> <h3><a href="/zh-cn/app/45483.html">植物大战僵尸西游版</a></h3> <div class="cate"> <a href="/zh-cn/category/list_299_1.html">休闲益智</a> </div> <div class="other"> <span></span> </div> </div> </li> <li> <a class="img_item" href="/zh-cn/app/179136.html"><img src="https://images.downcodes.com/uploads/20240818/logo_66c1c8413413d1.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="PVZ杂交版2.3.5内置菜单版"></a> <div class="content"> <h3><a href="/zh-cn/app/179136.html">PVZ杂交版2.3.5内置菜单版</a></h3> <div class="cate"> <a href="/zh-cn/category/list_299_1.html">休闲益智</a> </div> <div class="other"> <span>2.3</span> </div> </div> </li> <li> <a class="img_item" href="/zh-cn/app/176855.html"><img src="https://images.downcodes.com/uploads/20240628/logo_667e0d8fe35261.jpg" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="披萨塔噪音DLC模组"></a> <div class="content"> <h3><a href="/zh-cn/app/176855.html">披萨塔噪音DLC模组</a></h3> <div class="cate"> <a href="/zh-cn/category/list_299_1.html">休闲益智</a> </div> <div class="other"> <span>1.0</span> </div> </div> </li> <li> <a class="img_item" href="/zh-cn/app/176584.html"><img src="https://images.downcodes.com/uploads/20240624/logo_6678eedab44bc1.jpg" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="快乐方块屋家庭模拟器手机"></a> <div class="content"> <h3><a href="/zh-cn/app/176584.html">快乐方块屋家庭模拟器手机</a></h3> <div class="cate"> <a href="/zh-cn/category/list_307_1.html">模拟经营</a> </div> <div class="other"> <span>1.0.41</span> </div> </div> </li> <li> <a class="img_item" href="/zh-cn/app/176463.html"><img src="https://images.downcodes.com/uploads/20240622/logo_66764c7e969a71.jpg" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="修勾地铁逃生安装"></a> <div class="content"> <h3><a href="/zh-cn/app/176463.html">修勾地铁逃生安装</a></h3> <div class="cate"> <a href="/zh-cn/category/list_309_1.html">飞行射击</a> </div> <div class="other"> <span>1.25.20</span> </div> </div> </li> <li> <a class="img_item" href="/zh-cn/app/178338.html"><img src="https://images.downcodes.com/uploads/20240731/logo_66a9c40e360431.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="BodyCam手游"></a> <div class="content"> <h3><a href="/zh-cn/app/178338.html">BodyCam手游</a></h3> <div class="cate"> <a href="/zh-cn/category/list_309_1.html">飞行射击</a> </div> <div class="other"> <span>1.0</span> </div> </div> </li> <li> <a class="img_item" href="/zh-cn/app/178465.html"><img src="https://images.downcodes.com/uploads/20240802/logo_66ac4e39342541.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="BodyCam手机版"></a> <div class="content"> <h3><a href="/zh-cn/app/178465.html">BodyCam手机版</a></h3> <div class="cate"> <a href="/zh-cn/category/list_309_1.html">飞行射击</a> </div> <div class="other"> <span>1.0</span> </div> </div> </li> <li> <a class="img_item" href="/zh-cn/app/179461.html"><img src="https://images.downcodes.com/uploads/20240828/logo_66cee47da77471.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="帮我一个拼多多"></a> <div class="content"> <h3><a href="/zh-cn/app/179461.html">帮我一个拼多多</a></h3> <div class="cate"> <a href="/zh-cn/category/list_285_1.html">生活服务</a> </div> <div class="other"> <span>7.13.0</span> </div> </div> </li> </ul> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template arrow_link"> <span class="title">相关资讯</span> <a href="/category/list_336_1.html">全部</a> </div> <ul class="cate_list_template"> <li> <a href="/zh-cn/wz/212995.html"> <div class="text">如何解决《潜行者 2：切尔诺贝利之心》中的卡顿问题</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/zh-cn/wz/212994.html"> <div class="text">《堡垒之夜》中的 Juice WRLD 在哪里？</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/zh-cn/wz/212993.html"> <div class="text">如何开始《星球大战：亡命徒》中的外卡扩展</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/zh-cn/wz/212992.html"> <div class="text">北京市再添一家新型研发机构 完善人工智能安全与治理布局</div> <span class="time">2024-11-22</span> </a> </li> <li> <a href="/zh-cn/wz/212991.html"> <div class="text">研讨班在沪开班 古特雷斯出席 合作加强人工智能能力建设 中国提议在联合国大会通过</div> <span class="time">2024-11-22</span> </a> </li> <li> <a href="/zh-cn/wz/212990.html"> <div class="text">北京人工智能安全与治理实验室在京西智谷成立</div> <span class="time">2024-11-22</span> </a> </li> </ul> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template arrow_link"> <span class="title">网友评论</span> </div> </div> </section> <footer class="footer_template"> <div class="w12_box"> <div class="clearfix"> <div class="l_item"> <img src="https://images.downcodes.com/newdown/images/down-logo-foot.png" alt=""> <div class="f_icon"> <a href="https://www.facebook.com/" title="facebook"></a> <a href="https://telegram.org/" title="telegram"></a> <a href="https://www.tiktok.com/" title="tiktok"></a> <a href="https://www.youtube.com/" title="youtube"></a> </div> </div> <div class="r_item"> <dl> <dt>Products & Services</dt> <dd><a href="javascript:;">Install APK</a></dd> <dd><a href="javascript:;">APK signature verification</a></dd> <dd><a href="javascript:;">APK Download Service</a></dd> </dl> <dl> <dt>Company</dt> <dd><a href="javascript:;">Developer Console</a></dd> <dd><a href="javascript:;">Submit APK</a></dd> <dd><a href="javascript:;">Monetization of traffic through downcodes</a></dd> </dl> <dl> <dt>Legal</dt> <dd><a href="javascript:;">About us</a></dd> <dd><a href="javascript:;">Contact Us</a></dd> <dd><a href="javascript:;">Cooperation</a></dd> </dl> </div> </div> <p>© 2006-2024Copyright All rights reserves</p> </div> </footer> <!-- Matomo --> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="//tongji.zhangwan.net/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '3']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script> <!-- End Matomo Code --> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-5D64MDP2H8"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-5D64MDP2H8'); </script> </body> <script src="/newdown/js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="/newdown/js/lazy.js" type="text/javascript" charset="utf-8"></script> <script src="/newdown/js/swiper.min.js" type="text/javascript" charset="utf-8"></script> <script src="/newdown/js/viewer.js" type="text/javascript" charset="utf-8"></script> <script src="/newdown/js/index.js" type="text/javascript" charset="utf-8"></script> <script> commonMethod.appdetail(); function phpLoadPage(){ this.kid = ''; this.lang = 'zh-cn'; this.pageIndex = 1; this.resultLen = 10; this. requestUrl = "/show_comment_list"; } phpLoadPage.prototype.init = function() { var _this = this; var moreComment = '点击查看更多加载'; $(".loadmore_item").click(function(){ if(_this.resultLen >= 10){ _this.pageIndex = _this.pageIndex + 1 $(".loadmore_item").html("loading...") $.ajax({ async: true, url: _this.requestUrl, type: 'GET', data : { page : _this.pageIndex,kid:_this.kid,lang:_this.lang }, dataType: 'json', timeout: 30000, success: function(result){ _this.resultLen = result.newArray.length if(_this.resultLen < 10){ $(".loadmore_item").html("Reached the end...") }else{ $(".loadmore_item").html(`${moreComment}`) } $(".comment_template").append(_this.mergeHtml(result.newArray)); }, error: function(xhr, status){ console.log('An error occurred...'); }, complete: function(xhr, status){ console.log('Ajax request has ended...'); } }) } }) } phpLoadPage.prototype.mergeHtml = function(data){ var textHtml = ""; var lang = 'zh-cn'; let fromto = '来自于'; for(var i=0;i<data.length;i++) { var item= data[i]; var lsHtml = item.mark == 1 && item.status == 1 ? `<span class="tip">${fromto}</span><a href="/${lang}/ask/${item.aid}.html">${item.title}</a>` : ''; textHtml += `<dd> <span class="img_item"> <img src="${item.headlogo}" alt="${item.adduser}"> </span> <div class="main"> <div class="title"> <span>${item.adduser}</span> ${lsHtml} <span>${item.showtime}</span> </div> <div>${item.content}</div> </div> </dd>`; } return textHtml; } new phpLoadPage().init() </script> </html>