首頁>編程相關>其他源碼
下載
潘皮

潘皮

簡約固執己見的 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 日推出。</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-tw/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-tw/app/44151.html"><img src="https://images.downcodes.com/uploads/20230315/logo_641169e22e95f1.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="嗶嘀影視bdys 安卓版"></a> <div class="content"> <h3><a href="/zh-tw/app/44151.html">嗶嘀影視bdys 安卓版</a></h3> <div class="cate"> <a href="/zh-tw/category/list_297_1.html">影音播放</a> </div> <div class="other"> <span>V2.1.7</span> </div> </div> </li> <li> <a class="img_item" href="/zh-tw/app/39387.html"><img src="https://images.downcodes.com/uploads/20230216/logo_63edd21d622421.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="突擊莉莉遊戲下載"></a> <div class="content"> <h3><a href="/zh-tw/app/39387.html">突擊莉莉遊戲下載</a></h3> <div class="cate"> <a href="/zh-tw/category/list_301_1.html">角色扮演</a> </div> <div class="other"> <span>v1.0.5</span> </div> </div> </li> <li> <a class="img_item" href="/zh-tw/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-tw/download/28990.html">知識付費系統原始碼丨線上教育內容付費知識變現丨影片問答圖文付費課程小程式客製化H5</a></h3> <div class="cate"> <a href="/zh-tw/category/list_55_1.html">其他類別</a> </div> <div class="other"> <span></span> </div> </div> </li> <li> <a class="img_item" href="/zh-tw/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-tw/app/45483.html">植物大戰殭屍西遊版</a></h3> <div class="cate"> <a href="/zh-tw/category/list_299_1.html">休閒益智</a> </div> <div class="other"> <span></span> </div> </div> </li> <li> <a class="img_item" href="/zh-tw/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-tw/app/179136.html">PVZ雜交版2.3.5內建選單版</a></h3> <div class="cate"> <a href="/zh-tw/category/list_299_1.html">休閒益智</a> </div> <div class="other"> <span>2.3</span> </div> </div> </li> <li> <a class="img_item" href="/zh-tw/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-tw/app/176855.html">披薩塔噪音DLC模組</a></h3> <div class="cate"> <a href="/zh-tw/category/list_299_1.html">休閒益智</a> </div> <div class="other"> <span>1.0</span> </div> </div> </li> <li> <a class="img_item" href="/zh-tw/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-tw/app/176584.html">快樂方塊屋家庭模擬器手機</a></h3> <div class="cate"> <a href="/zh-tw/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-tw/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-tw/app/176463.html">修勾地鐵逃生安裝</a></h3> <div class="cate"> <a href="/zh-tw/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-tw/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-tw/app/178338.html">BodyCam手遊</a></h3> <div class="cate"> <a href="/zh-tw/category/list_309_1.html">飛行射擊</a> </div> <div class="other"> <span>1.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-tw/wz/212997.html"> <div class="text">嗶嘀影視官網址</div> <span class="time">2024-11-24</span> </a> </li> <li> <a href="/zh-tw/wz/212996.html"> <div class="text">突擊莉莉國際服怎麼充值</div> <span class="time">2024-11-24</span> </a> </li> <li> <a href="/zh-tw/wz/212995.html"> <div class="text">如何解決《潛行者 2：切爾諾貝利之心》的卡頓問題</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/zh-tw/wz/212994.html"> <div class="text">《要塞英雄》中的 Juice WRLD 在哪裡？</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/zh-tw/wz/212993.html"> <div class="text">如何開始《星際大戰：亡命徒》中的外卡擴展</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/zh-tw/wz/212992.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-tw'; 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-tw'; 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>