เว็บไคลเอ็นต์ Mastodon ที่เน้นความเรียบง่าย
️ การออกเสียง : /fænpi/ ( FAN-pee ) ? ฟัง
นี่คือเว็บไคลเอ็นต์ทางเลือกสำหรับ Mastodon
productionmain- ติดตาม @phanpy บน Mastodon เพื่อรับข้อมูลอัปเดต ✨
ทุกอย่างได้รับการออกแบบและออกแบบตามรสนิยมและวิสัยทัศน์ของฉัน นี่เป็นโปรเจ็กต์ส่วนตัวสำหรับฉันเพื่อเรียนรู้เกี่ยวกับ Mastodon และทดลองใช้แนวคิด UI/UX ใหม่
@username ) จะแสดงในไทม์ไลน์ แทนที่จะเป็นชื่อผู้ใช้เต็มของบัญชี ( @username@instance )
[NAME] @[username]@[username] ให้ยกเว้นชื่อโดเมนอินสแตนซ์เสมอ[NAME] ดูเหมือน @[username] แสดงว่า @[username] จะถูกแยกออกเช่นกัน
inReplyToId จากแคชหรือคำขอ API เพิ่มเติม จนกว่าจะพบโพสต์หลักThread โดยไม่มีหมายเลข
... ต่อท้ายข้อกำหนดเบื้องต้น: 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.jsonnpm run sourcemap - รัน source-map-explorer บนบิลด์ที่ใช้งานจริงnpm run messages:extract - แยกข้อความจากไฟล์ต้นฉบับและอัพเดตแค็ตตาล็อกข้อความโลแคล สิ่งเหล่านี้บางส่วนอาจมีการเปลี่ยนแปลงในอนาคต โลกส่วนหน้ามีการเปลี่ยนแปลงตลอดเวลา
คำแปลทั้งหมดมีอยู่ในไฟล์ gettext .po ในโฟลเดอร์ src/locales ภาษาเริ่มต้นคือภาษาอังกฤษ ( en ) กฎพหูพจน์ของ CLDR ใช้สำหรับการทำให้เป็นพหูพจน์ ภาษา RTL (ขวาไปซ้าย) ยังรองรับด้วยทิศทางของข้อความ การแสดงไอคอน และการจัดวางที่เหมาะสม
ในการโหลดหน้าเว็บ ภาษาเริ่มต้นจะถูกตรวจพบโดยวิธีการเหล่านี้ ตามลำดับ (ใช้รายการแรก):
lang เช่น /?lang=zh-HantlocalStorage langnavigator.language ของเบราว์เซอร์ ผู้ใช้สามารถเปลี่ยนภาษาในการตั้งค่า ซึ่งกำหนดคีย์ localStorage lang
*ได้รับแรงบันดาลใจจากคู่มือแปล WordPress:
{account} (ตัวแปร), <0>{name} (แท็กพร้อมตัวแปร) และ # (ตัวยึดตัวเลข)Intl.DateTimeFormat - เช่น "8 ส.ค.", "08/08/2024"Intl.RelativeTimeFormat - เช่น "2 วันที่แล้ว", "ใน 2 วัน"Intl.NumberFormat - เช่น "1,000", "10K"Intl.DisplayNames - เช่น "ภาษาอังกฤษ" ( en ) ในภาษาจีนตัวเต็ม ( zh-Hant ) คือ "英文"Intl.Locale (พร้อม polyfill สำหรับเบราว์เซอร์รุ่นเก่า)Intl.Segmenter (พร้อม polyfill สำหรับเบราว์เซอร์รุ่นเก่า)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"> ไปที่ Releases และดาวน์โหลด <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"> การปรับแต่งสามารถทำได้โดยการส่งตัวแปรสภาพแวดล้อมไปยังคำสั่ง build ตัวอย่าง: </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, ทาสก์บาร์ของ Windows ฯลฯ</li><li> ชื่อการ์ด OpenGraph เมื่อแชร์บนโซเชียลเน็ตเวิร์ก</li><li> ชื่อลูกค้า เมื่อลงทะเบียนแอปเพื่อตรวจสอบสิทธิ์ และแสดงเป็นไคลเอ็นต์ที่ใช้ในโพสต์ในบางแอป/ไคลเอ็นต์</li></ul></li><li> <code>PHANPY_WEBSITE</code> (เป็นทางเลือก แต่แนะนำ ค่าเริ่มต้น: <code>https://phanpy.social</code> ) ส่งผลต่อ:<ul dir="auto"><li> Canonical URL ของเว็บไซต์</li><li> URL การ์ด OpenGraph เมื่อแชร์บนโซเชียลเน็ตเวิร์ก</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>lang</code> ใน <code>localStorage</code> และ <code>navigator.language</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> ตำแหน่งข้อมูล API สำหรับอินสแตนซ์ img-alt-api ที่โฮสต์ด้วยตนเอง</li><li> หากระบุไว้ การตั้งค่าจะปรากฏขึ้นเพื่อให้ผู้ใช้เปิดใช้งานตัวสร้างคำอธิบายรูปภาพในตัวแต่งเพลง ปิดใช้งานตามค่าเริ่มต้น</li></ul></li><li> <code>PHANPY_GIPHY_API_KEY</code> (เป็นทางเลือก ไม่มีค่าเริ่มต้น):<ul dir="auto"><li> คีย์ API สำหรับ GIPHY ดูเอกสาร 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"> ค่าใช้จ่ายที่เกี่ยวข้องกับการใช้งานและการพัฒนาเว็บแอปนี้:</p><ul dir="auto"><li> ชื่อโดเมน (.social): <strong>USD$23.18/ปี</strong> (USD$6.87 ปีที่ 1)</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> ชีอั๋น (มาสโตดอน) (Twitter)</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> databio (คาตาลัน)</li><li> ดิซโร (อิตาลี)</li><li> Drift6944 (เช็ก)</li><li> drydenwu (จีนดั้งเดิม)</li><li> เอลิสซาร์ก (ฝรั่งเศส)</li><li> เอลปัมพลินา (สเปน)</li><li> Fitik (เอสเปรันโต, ฮีบรู)</li><li> ฟรีเซีย (ญี่ปุ่น)</li><li> ghose (กาลิเซีย)</li><li> ฮงมินฮี (เกาหลี)</li><li> Hugoglyph (เอสเปรันโต, สเปน)</li><li> isard (คาตาลัน)</li><li> คาลิอูวู (โปแลนด์)</li><li> คาร์ลาเฟจ (เช็ก)</li><li> katullo11 (ภาษาอิตาลี)</li><li> กิตตา (เยอรมัน)</li><li> ลุน (ไทย)</li><li> lucasofchirst (อ็อกซิตัน, โปรตุเกส, โปรตุเกส, บราซิล)</li><li> ลูกฮง (ภาษาจีนดั้งเดิม)</li><li> marcin.kozinski (โปแลนด์)</li><li> mkljczkk (โปแลนด์)</li><li> โมโจโซอึน (เกาหลี)</li><li> โมเรียล (เกาหลี)</li><li> MrWillCom (จีนประยุกต์)</li><li> nclm (ฝรั่งเศส)</li><li> ปาซปี (ภาษาอิตาลี)</li><li> พังค์ร็อกเกิร์ล (บาสก์)</li><li> radecos (ฝรั่งเศส)</li><li> ราเซ็ม (เช็ก)</li><li> รหัส realpixel (เยอรมัน)</li><li> เรซาฮอสเซนซาเดห์ (เปอร์เซีย)</li><li> rwmpelstilzchen (เอสเปรันโต, ฮีบรู)</li><li> SadmL (รัสเซีย)</li><li> SadmL_AI (รัสเซีย)</li><li> ชูจิ3 (ภาษาญี่ปุ่น)</li><li> Sky_NiniKo (ฝรั่งเศส)</li><li> สเตฟโฟ99 (อิตาลี)</li><li> ซู5ฮิชซ์ (เช็ก)</li><li> เทเฟอร์เรร์โม (สเปน)</li><li> tkbremnes (ภาษานอร์เวย์ Bokmal)</li><li> tux93 (เยอรมัน)</li><li> วัคซีน31. (ลิทัวเนีย)</li><li> วัลไล (ฟินแลนด์)</li><li> วาซิริริ (โปแลนด์)</li><li> การเดินทาง (ภาษาจีนแบบดั้งเดิม)</li><li> xabi_itzultzaile (บาสก์)</li><li> xen4n (ยูเครน)</li><li> xqueralt (คาตาลัน)</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"> ฉันเป็นหนึ่งในผู้ใช้ Twitter คนแรกๆ ทวิตเตอร์เปิดตัวเมื่อวันที่ 15 กรกฎาคม พ.ศ. 2549 ฉันเข้าร่วมเมื่อเดือนธันวาคม พ.ศ. 2549 และทวีตแรกของฉันถูกโพสต์เมื่อวันที่ 18 ธันวาคม พ.ศ. 2549</p><p dir="auto"> ฉันรู้ว่า Twitter ในยุคแรกๆ หน้าตาเป็นอย่างไร มันสนุกดี</p><p dir="auto"> ย้อนกลับไปตอนนั้น ฉันสร้างโคลน Twitter ชื่อ "Twig" ที่เขียนด้วย Python และ Google App Engine ฉันเกือบจะสร้างไคลเอนต์เดสก์ท็อป Twitter ของตัวเองที่เขียนด้วย Appcelerator Titanium ฉันได้พูดคุยที่ดีที่สุดเรื่องหนึ่งเกี่ยวกับไคลเอนต์ Twitter ในการประชุมขนาดเล็ก ฉันสร้างสิ่งนี้ที่เรียกว่า "คอลัมน์ Twitter" ซึ่งเป็นเว็บแอปที่แสดงรายการผู้ติดตาม ผู้ติดตามของคุณ ผู้ติดตาม ผู้ติดตามของคุณ และอื่นๆ ในปี 2009 ฉันเขียนบล็อกโพสต์ชื่อ "ฉันเริ่มต้นใช้งาน Twitter ได้อย่างไร" ฉันสร้างธีมสองธีมสำหรับ DestroyTwitter (ไคลเอ็นต์เดสก์ท็อปที่สร้างด้วย Adobe Air โดย Jonnie Hallman) และหนึ่งในนั้นเรียกว่า "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> ส้อม Phanpy ↓<ul dir="auto"><li> อกอร่า</li></ul></li><li> ผ้าอ้อม (เลิกใช้แล้ว) - ส้อม ↓<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="/th/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="/th/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="Bidi Film and Television bdys เวอร์ชัน Android"></a>
<div class="content">
<h3><a href="/th/app/44151.html">Bidi Film and Television bdys เวอร์ชัน Android</a></h3>
<div class="cate">
<a href="/th/category/list_297_1.html">การเล่นวิดีโอ</a>
</div>
<div class="other">
<span>V2.1.7</span>
</div>
</div>
</li>
<li>
<a class="img_item" href="/th/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="ดาวน์โหลดเกม Assault Lily"></a>
<div class="content">
<h3><a href="/th/app/39387.html">ดาวน์โหลดเกม Assault Lily</a></h3>
<div class="cate">
<a href="/th/category/list_301_1.html">บทบาทสมมติ</a>
</div>
<div class="other">
<span>v1.0.5</span>
</div>
</div>
</li>
<li>
<a class="img_item" href="/th/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="/th/download/28990.html">ซอร์สโค้ดระบบการชำระเงินความรู้丨เนื้อหาการศึกษาออนไลน์การตระหนักรู้ที่จ่าย丨วิดีโอคำถามและคำตอบกราฟิกหลักสูตรมินิแบบชำระเงินการปรับแต่งโปรแกรม H5</a></h3>
<div class="cate">
<a href="/th/category/list_55_1.html">หมวดหมู่อื่นๆ</a>
</div>
<div class="other">
<span></span>
</div>
</div>
</li>
<li>
<a class="img_item" href="/th/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="Plants vs. Zombies ฉบับการเดินทางไปทางทิศตะวันตก"></a>
<div class="content">
<h3><a href="/th/app/45483.html">Plants vs. Zombies ฉบับการเดินทางไปทางทิศตะวันตก</a></h3>
<div class="cate">
<a href="/th/category/list_299_1.html">ปริศนาสบาย ๆ</a>
</div>
<div class="other">
<span></span>
</div>
</div>
</li>
<li>
<a class="img_item" href="/th/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 hybrid เวอร์ชัน 2.3.5 เวอร์ชันเมนูในตัว"></a>
<div class="content">
<h3><a href="/th/app/179136.html">PVZ hybrid เวอร์ชัน 2.3.5 เวอร์ชันเมนูในตัว</a></h3>
<div class="cate">
<a href="/th/category/list_299_1.html">ปริศนาสบาย ๆ</a>
</div>
<div class="other">
<span>2.3</span>
</div>
</div>
</li>
<li>
<a class="img_item" href="/th/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 Mod"></a>
<div class="content">
<h3><a href="/th/app/176855.html">พิซซ่าทาวเวอร์เสียง DLC Mod</a></h3>
<div class="cate">
<a href="/th/category/list_299_1.html">ปริศนาสบาย ๆ</a>
</div>
<div class="other">
<span>1.0</span>
</div>
</div>
</li>
<li>
<a class="img_item" href="/th/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="Happy Block House Family Simulator มือถือ"></a>
<div class="content">
<h3><a href="/th/app/176584.html">Happy Block House Family Simulator มือถือ</a></h3>
<div class="cate">
<a href="/th/category/list_307_1.html">ธุรกิจจำลอง</a>
</div>
<div class="other">
<span>1.0.41</span>
</div>
</div>
</li>
<li>
<a class="img_item" href="/th/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="/th/app/176463.html">ซ่อมติดตั้งตะขอหนีรถไฟใต้ดิน</a></h3>
<div class="cate">
<a href="/th/category/list_309_1.html">การยิงเครื่องบิน</a>
</div>
<div class="other">
<span>1.25.20</span>
</div>
</div>
</li>
<li>
<a class="img_item" href="/th/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="/th/app/178338.html">เกมมือถือ BodyCam</a></h3>
<div class="cate">
<a href="/th/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="/th/wz/212997.html">
<div class="text">ที่อยู่เว็บไซต์อย่างเป็นทางการของ Bidi Film and Television</div>
<span class="time">2024-11-24</span>
</a>
</li>
<li>
<a href="/th/wz/212996.html">
<div class="text">วิธีเติมเงิน Assault Lily International Server</div>
<span class="time">2024-11-24</span>
</a>
</li>
<li>
<a href="/th/wz/212995.html">
<div class="text">วิธีแก้ไขอาการพูดติดอ่างใน Stalker 2: Heart of Chornobyl</div>
<span class="time">2024-11-23</span>
</a>
</li>
<li>
<a href="/th/wz/212994.html">
<div class="text">Juice WRLD ใน Fortnite อยู่ที่ไหน?</div>
<span class="time">2024-11-23</span>
</a>
</li>
<li>
<a href="/th/wz/212993.html">
<div class="text">วิธีเริ่มการขยาย Wild Card ใน Star Wars Outlaws</div>
<span class="time">2024-11-23</span>
</a>
</li>
<li>
<a href="/th/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 = 'th';
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 = 'th';
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>