[{"data":1,"prerenderedAt":747},["ShallowReactive",2],{"page-\u002Farticles\u002Flog-lottery-tw":3,"related-\u002Farticles\u002Flog-lottery-tw":424,"content-query-xQEWQgMKqR":449},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"category":11,"image":12,"tags":13,"series":16,"readingTime":17,"difficulty":18,"local":19,"platforms":20,"gpu":22,"body":23,"_type":418,"_id":419,"_source":420,"_file":421,"_stem":422,"_extension":423},"\u002Farticles\u002Flog-lottery-tw","articles",false,"","log-lottery 開源網頁抽獎系統自定義配置與尾牙活動實用部署","支援自訂名單、獎項、圖片、背景與音樂的開源抽獎工具。我也整理了繁體中文版本，部署後打開瀏覽器就能直接使用。","2026-05-14","Open Source","\u002Fimages\u002Fcode.png",[11,14,15],"Web Development","Frontend","github-tech","5 min read","Easy",true,[21],"Web","None",{"type":24,"children":25,"toc":401},"root",[26,34,48,53,65,69,74,79,96,107,110,116,152,155,160,165,198,203,206,211,216,223,233,239,249,255,265,271,281,287,297,300,305,310,339,344,347,352,357,362,367,370,378],{"type":27,"tag":28,"props":29,"children":31},"element","h2",{"id":30},"簡介",[32],{"type":33,"value":30},"text",{"type":27,"tag":35,"props":36,"children":37},"p",{},[38,40,46],{"type":33,"value":39},"如果你最近剛好在準備抽獎活動、社團活動、公司年會，或任何需要現場抽獎的場合，那 ",{"type":27,"tag":41,"props":42,"children":43},"strong",{},[44],{"type":33,"value":45},"log-lottery",{"type":33,"value":47}," 這個專案其實非常實用。",{"type":27,"tag":35,"props":49,"children":50},{},[51],{"type":33,"value":52},"它本身是一個開源的網頁抽獎工具，整體操作都在瀏覽器內完成，不需要另外安裝一堆複雜系統。你可以自己匯入抽獎名單、設定獎項內容、上傳獎品圖片、替換背景圖片，甚至連抽獎時要播放的音樂都能一起調整。",{"type":27,"tag":35,"props":54,"children":55},{},[56,58,63],{"type":33,"value":57},"另外我自己也 fork 了一個 ",{"type":27,"tag":41,"props":59,"children":60},{},[61],{"type":33,"value":62},"繁體中文化版本",{"type":33,"value":64},"，並且已經部署好，對中文使用者來說會比較順手。官方原版主要是簡體中文介面，如果你只是想直接打開就用，繁中版會省事很多。",{"type":27,"tag":66,"props":67,"children":68},"hr",{},[],{"type":27,"tag":28,"props":70,"children":72},{"id":71},"直接使用版本",[73],{"type":33,"value":71},{"type":27,"tag":35,"props":75,"children":76},{},[77],{"type":33,"value":78},"如果你不想自己部署，也可以直接用我整理好的繁體中文版本：",{"type":27,"tag":80,"props":81,"children":82},"ul",{},[83],{"type":27,"tag":84,"props":85,"children":86},"li",{},[87],{"type":27,"tag":88,"props":89,"children":93},"a",{"href":90,"rel":91},"https:\u002F\u002Flottery.shuochen.me\u002Flog-lottery\u002Fhome",[92],"nofollow",[94],{"type":33,"value":95},"log-lottery 繁體中文線上版（點這裡進入）",{"type":27,"tag":35,"props":97,"children":98},{},[99,101,105],{"type":33,"value":100},"這個版本比較適合想快速開用的人，打開瀏覽器就能直接操作。",{"type":27,"tag":102,"props":103,"children":104},"br",{},[],{"type":33,"value":106},"\n至於官方原版則還是以簡體中文為主，如果你是要自己研究原始專案或後續二次修改，再去看官方 repo 會比較合適。",{"type":27,"tag":66,"props":108,"children":109},{},[],{"type":27,"tag":28,"props":111,"children":113},{"id":112},"介面展示-ui-demo",[114],{"type":33,"value":115},"介面展示 (UI Demo)",{"type":27,"tag":117,"props":118,"children":127},"div",{"className":119},[120,121,122,123,124,125,126],"my-8","rounded-xl","overflow-hidden","shadow-2xl","border","border-slate-200","dark:border-slate-800",[128,130,139,140],{"type":33,"value":129},"\n  ",{"type":27,"tag":131,"props":132,"children":137},"video",{"src":133,"autoPlay":19,"loop":19,"muted":19,"playsInline":19,"className":134},"\u002Fvideos\u002Flog-lottery-tw-demo.mp4",[135,136],"w-full","h-auto",[138],{"type":33,"value":129},{"type":33,"value":129},{"type":27,"tag":35,"props":141,"children":149},{"className":142},[143,144,145,146,147,148],"text-center","text-sm","text-slate-500","py-2","bg-slate-50","dark:bg-slate-900\u002F50",[150],{"type":33,"value":151},"log-lottery 繁體中文版操作展示",{"type":27,"tag":66,"props":153,"children":154},{},[],{"type":27,"tag":28,"props":156,"children":158},{"id":157},"可以做什麼",[159],{"type":33,"value":157},{"type":27,"tag":35,"props":161,"children":162},{},[163],{"type":33,"value":164},"這個工具可以處理的東西其實比我原本想像中完整，常見的抽獎需求幾乎都有：",{"type":27,"tag":80,"props":166,"children":167},{},[168,173,178,183,188,193],{"type":27,"tag":84,"props":169,"children":170},{},[171],{"type":33,"value":172},"匯入抽獎名單",{"type":27,"tag":84,"props":174,"children":175},{},[176],{"type":33,"value":177},"自訂獎項與中獎人數",{"type":27,"tag":84,"props":179,"children":180},{},[181],{"type":33,"value":182},"設定一等獎、二等獎、特別獎等圖片",{"type":27,"tag":84,"props":184,"children":185},{},[186],{"type":33,"value":187},"更換背景與音樂",{"type":27,"tag":84,"props":189,"children":190},{},[191],{"type":33,"value":192},"匯出中獎結果",{"type":27,"tag":84,"props":194,"children":195},{},[196],{"type":33,"value":197},"支援繁體中文介面",{"type":27,"tag":35,"props":199,"children":200},{},[201],{"type":33,"value":202},"如果你只是想快速準備一個活動抽獎頁面，不想自己從零開發，這種可直接調整設定的專案真的方便很多。",{"type":27,"tag":66,"props":204,"children":205},{},[],{"type":27,"tag":28,"props":207,"children":209},{"id":208},"設定方式",[210],{"type":33,"value":208},{"type":27,"tag":35,"props":212,"children":213},{},[214],{"type":33,"value":215},"第一次開啟後，建議先到設定頁面把幾個基本項目整理好，後面抽獎流程會順很多。",{"type":27,"tag":217,"props":218,"children":220},"h3",{"id":219},"_1-人員設定",[221],{"type":33,"value":222},"1. 人員設定",{"type":27,"tag":35,"props":224,"children":225},{},[226,228,231],{"type":33,"value":227},"先匯入抽獎名單。",{"type":27,"tag":102,"props":229,"children":230},{},[],{"type":33,"value":232},"\n如果參加者比較多，可以先用 Excel 模板整理資料，再一次匯入，這樣會比手動輸入省事很多。",{"type":27,"tag":217,"props":234,"children":236},{"id":235},"_2-獎項設定",[237],{"type":33,"value":238},"2. 獎項設定",{"type":27,"tag":35,"props":240,"children":241},{},[242,244,247],{"type":33,"value":243},"這裡可以新增或修改獎項名稱、名額、是否允許重複中獎，以及獎項對應圖片。",{"type":27,"tag":102,"props":245,"children":246},{},[],{"type":33,"value":248},"\n例如你可以設定三等獎、二等獎、一等獎、特別獎、超級大獎這類常見層級。",{"type":27,"tag":217,"props":250,"children":252},{"id":251},"_3-圖片設定",[253],{"type":33,"value":254},"3. 圖片設定",{"type":27,"tag":35,"props":256,"children":257},{},[258,260,263],{"type":33,"value":259},"如果內建圖片不符合活動風格，可以自己上傳獎項圖片，之後再回到獎項設定裡面選用。",{"type":27,"tag":102,"props":261,"children":262},{},[],{"type":33,"value":264},"\n這樣整個抽獎畫面看起來會更像是你自己的活動頁，而不是公版工具。",{"type":27,"tag":217,"props":266,"children":268},{"id":267},"_4-介面設定",[269],{"type":33,"value":270},"4. 介面設定",{"type":27,"tag":35,"props":272,"children":273},{},[274,276,279],{"type":33,"value":275},"可以調整標題、版面、背景圖與整體顯示效果。",{"type":27,"tag":102,"props":277,"children":278},{},[],{"type":33,"value":280},"\n如果你活動本身有主視覺，這一區其實很好用，稍微換一下圖跟文字，整體感覺就會差很多。",{"type":27,"tag":217,"props":282,"children":284},{"id":283},"_5-音樂設定",[285],{"type":33,"value":286},"5. 音樂設定",{"type":27,"tag":35,"props":288,"children":289},{},[290,292,295],{"type":33,"value":291},"可以上傳或選擇背景音樂，讓抽獎過程更有氣氛。",{"type":27,"tag":102,"props":293,"children":294},{},[],{"type":33,"value":296},"\n這種現場型工具，有沒有音樂差滿多的，尤其抽大獎時效果會很明顯。",{"type":27,"tag":66,"props":298,"children":299},{},[],{"type":27,"tag":28,"props":301,"children":303},{"id":302},"簡單使用方式",[304],{"type":33,"value":302},{"type":27,"tag":35,"props":306,"children":307},{},[308],{"type":33,"value":309},"實際操作不複雜，大致流程就是下面這樣：",{"type":27,"tag":311,"props":312,"children":313},"ol",{},[314,319,324,329,334],{"type":27,"tag":84,"props":315,"children":316},{},[317],{"type":33,"value":318},"先匯入參加者名單",{"type":27,"tag":84,"props":320,"children":321},{},[322],{"type":33,"value":323},"設定好獎項與每個獎項名額",{"type":27,"tag":84,"props":325,"children":326},{},[327],{"type":33,"value":328},"視需要調整圖片、背景與音樂",{"type":27,"tag":84,"props":330,"children":331},{},[332],{"type":33,"value":333},"回到首頁開始抽獎",{"type":27,"tag":84,"props":335,"children":336},{},[337],{"type":33,"value":338},"抽完後可查看或匯出中獎結果",{"type":27,"tag":35,"props":340,"children":341},{},[342],{"type":33,"value":343},"如果只是一般公司尾牙或小型活動，基本上照這個流程走一次就能用了。",{"type":27,"tag":66,"props":345,"children":346},{},[],{"type":27,"tag":28,"props":348,"children":350},{"id":349},"使用心得",[351],{"type":33,"value":349},{"type":27,"tag":35,"props":353,"children":354},{},[355],{"type":33,"value":356},"我自己覺得這個專案最大的優點，就是操作直覺、畫面效果不錯，而且可自訂程度高。",{"type":27,"tag":35,"props":358,"children":359},{},[360],{"type":33,"value":361},"它不是那種只做最基本抽名字的陽春工具，而是真的有把活動現場會用到的元素一起考慮進去，像是獎項圖片、背景、音樂、名額控制、結果匯出這些都先幫你準備好了。",{"type":27,"tag":35,"props":363,"children":364},{},[365],{"type":33,"value":366},"如果你的需求只是快速準備一個活動抽獎頁面，那直接修改設定就能上手，省下自己從零做一套的時間。",{"type":27,"tag":66,"props":368,"children":369},{},[],{"type":27,"tag":35,"props":371,"children":372},{},[373],{"type":27,"tag":41,"props":374,"children":375},{},[376],{"type":33,"value":377},"相關連結：",{"type":27,"tag":80,"props":379,"children":380},{},[381,391],{"type":27,"tag":84,"props":382,"children":383},{},[384],{"type":27,"tag":88,"props":385,"children":388},{"href":386,"rel":387},"https:\u002F\u002Fgithub.com\u002FYanShuo0116\u002Flog-lottery-tw",[92],[389],{"type":33,"value":390},"繁體中文 fork 倉庫",{"type":27,"tag":84,"props":392,"children":393},{},[394],{"type":27,"tag":88,"props":395,"children":398},{"href":396,"rel":397},"https:\u002F\u002Fgithub.com\u002FLOG1997\u002Flog-lottery",[92],[399],{"type":33,"value":400},"官方 GitHub 倉庫",{"title":7,"searchDepth":402,"depth":402,"links":403},2,[404,405,406,407,408,416,417],{"id":30,"depth":402,"text":30},{"id":71,"depth":402,"text":71},{"id":112,"depth":402,"text":115},{"id":157,"depth":402,"text":157},{"id":208,"depth":402,"text":208,"children":409},[410,412,413,414,415],{"id":219,"depth":411,"text":222},3,{"id":235,"depth":411,"text":238},{"id":251,"depth":411,"text":254},{"id":267,"depth":411,"text":270},{"id":283,"depth":411,"text":286},{"id":302,"depth":402,"text":302},{"id":349,"depth":402,"text":349},"markdown","content:articles:log-lottery-tw.md","content","articles\u002Flog-lottery-tw.md","articles\u002Flog-lottery-tw","md",[425,435,443],{"_path":426,"title":427,"description":428,"date":429,"category":430,"image":431,"tags":432,"score":402},"\u002Farticles\u002Fopenvid","OpenVid 瀏覽器免安裝產品 Demo 錄影與 3D 鏡頭後製工具教學","想要為你的產品錄製精美的演示影片？OpenVid 讓你直接在瀏覽器中套用 3D 鏡頭、縮放與精美背景，一鍵導出高質感的 Demo 影片。","2026-05-24","Web Dev","\u002Fimages\u002Fopenvid_ui.jpg",[11,14,433,434],"Video Editor","FFmpeg.wasm",{"_path":436,"title":437,"description":438,"date":439,"category":430,"image":12,"tags":440,"score":402},"\u002Farticles\u002Frough.js","Rough.js 手繪草稿風 Canvas 繪圖庫配置與網頁整合開發教學","如果你想在網站裡做出像白板草圖、設計稿、塗鴉感插圖，Rough.js 是一個簡單又很有辨識度的選擇。","2026-05-22",[14,441,442,15],"JavaScript","Data Visualization",{"_path":444,"title":445,"description":446,"date":447,"category":430,"image":12,"tags":448,"score":402},"\u002Farticles\u002Fpretext","Pretext 高效多行文字 Canvas 排版庫優化與防 DOM 重繪技術","想精準計算段落高度、做出更自由的文字排版，卻不想一直碰 getBoundingClientRect？Pretext 提供了一條很聰明的路。","2026-05-20",[14,15,441],{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"category":11,"image":12,"tags":450,"series":16,"readingTime":17,"difficulty":18,"local":19,"platforms":451,"gpu":22,"body":452,"_type":418,"_id":419,"_source":420,"_file":421,"_stem":422,"_extension":423},[11,14,15],[21],{"type":24,"children":453,"toc":732},[454,458,467,471,480,483,487,491,502,510,513,517,533,536,540,544,571,575,578,582,586,590,598,602,610,614,622,626,634,638,646,649,653,657,680,684,687,691,695,699,703,706,713],{"type":27,"tag":28,"props":455,"children":456},{"id":30},[457],{"type":33,"value":30},{"type":27,"tag":35,"props":459,"children":460},{},[461,462,466],{"type":33,"value":39},{"type":27,"tag":41,"props":463,"children":464},{},[465],{"type":33,"value":45},{"type":33,"value":47},{"type":27,"tag":35,"props":468,"children":469},{},[470],{"type":33,"value":52},{"type":27,"tag":35,"props":472,"children":473},{},[474,475,479],{"type":33,"value":57},{"type":27,"tag":41,"props":476,"children":477},{},[478],{"type":33,"value":62},{"type":33,"value":64},{"type":27,"tag":66,"props":481,"children":482},{},[],{"type":27,"tag":28,"props":484,"children":485},{"id":71},[486],{"type":33,"value":71},{"type":27,"tag":35,"props":488,"children":489},{},[490],{"type":33,"value":78},{"type":27,"tag":80,"props":492,"children":493},{},[494],{"type":27,"tag":84,"props":495,"children":496},{},[497],{"type":27,"tag":88,"props":498,"children":500},{"href":90,"rel":499},[92],[501],{"type":33,"value":95},{"type":27,"tag":35,"props":503,"children":504},{},[505,506,509],{"type":33,"value":100},{"type":27,"tag":102,"props":507,"children":508},{},[],{"type":33,"value":106},{"type":27,"tag":66,"props":511,"children":512},{},[],{"type":27,"tag":28,"props":514,"children":515},{"id":112},[516],{"type":33,"value":115},{"type":27,"tag":117,"props":518,"children":520},{"className":519},[120,121,122,123,124,125,126],[521,522,527,528],{"type":33,"value":129},{"type":27,"tag":131,"props":523,"children":525},{"src":133,"autoPlay":19,"loop":19,"muted":19,"playsInline":19,"className":524},[135,136],[526],{"type":33,"value":129},{"type":33,"value":129},{"type":27,"tag":35,"props":529,"children":531},{"className":530},[143,144,145,146,147,148],[532],{"type":33,"value":151},{"type":27,"tag":66,"props":534,"children":535},{},[],{"type":27,"tag":28,"props":537,"children":538},{"id":157},[539],{"type":33,"value":157},{"type":27,"tag":35,"props":541,"children":542},{},[543],{"type":33,"value":164},{"type":27,"tag":80,"props":545,"children":546},{},[547,551,555,559,563,567],{"type":27,"tag":84,"props":548,"children":549},{},[550],{"type":33,"value":172},{"type":27,"tag":84,"props":552,"children":553},{},[554],{"type":33,"value":177},{"type":27,"tag":84,"props":556,"children":557},{},[558],{"type":33,"value":182},{"type":27,"tag":84,"props":560,"children":561},{},[562],{"type":33,"value":187},{"type":27,"tag":84,"props":564,"children":565},{},[566],{"type":33,"value":192},{"type":27,"tag":84,"props":568,"children":569},{},[570],{"type":33,"value":197},{"type":27,"tag":35,"props":572,"children":573},{},[574],{"type":33,"value":202},{"type":27,"tag":66,"props":576,"children":577},{},[],{"type":27,"tag":28,"props":579,"children":580},{"id":208},[581],{"type":33,"value":208},{"type":27,"tag":35,"props":583,"children":584},{},[585],{"type":33,"value":215},{"type":27,"tag":217,"props":587,"children":588},{"id":219},[589],{"type":33,"value":222},{"type":27,"tag":35,"props":591,"children":592},{},[593,594,597],{"type":33,"value":227},{"type":27,"tag":102,"props":595,"children":596},{},[],{"type":33,"value":232},{"type":27,"tag":217,"props":599,"children":600},{"id":235},[601],{"type":33,"value":238},{"type":27,"tag":35,"props":603,"children":604},{},[605,606,609],{"type":33,"value":243},{"type":27,"tag":102,"props":607,"children":608},{},[],{"type":33,"value":248},{"type":27,"tag":217,"props":611,"children":612},{"id":251},[613],{"type":33,"value":254},{"type":27,"tag":35,"props":615,"children":616},{},[617,618,621],{"type":33,"value":259},{"type":27,"tag":102,"props":619,"children":620},{},[],{"type":33,"value":264},{"type":27,"tag":217,"props":623,"children":624},{"id":267},[625],{"type":33,"value":270},{"type":27,"tag":35,"props":627,"children":628},{},[629,630,633],{"type":33,"value":275},{"type":27,"tag":102,"props":631,"children":632},{},[],{"type":33,"value":280},{"type":27,"tag":217,"props":635,"children":636},{"id":283},[637],{"type":33,"value":286},{"type":27,"tag":35,"props":639,"children":640},{},[641,642,645],{"type":33,"value":291},{"type":27,"tag":102,"props":643,"children":644},{},[],{"type":33,"value":296},{"type":27,"tag":66,"props":647,"children":648},{},[],{"type":27,"tag":28,"props":650,"children":651},{"id":302},[652],{"type":33,"value":302},{"type":27,"tag":35,"props":654,"children":655},{},[656],{"type":33,"value":309},{"type":27,"tag":311,"props":658,"children":659},{},[660,664,668,672,676],{"type":27,"tag":84,"props":661,"children":662},{},[663],{"type":33,"value":318},{"type":27,"tag":84,"props":665,"children":666},{},[667],{"type":33,"value":323},{"type":27,"tag":84,"props":669,"children":670},{},[671],{"type":33,"value":328},{"type":27,"tag":84,"props":673,"children":674},{},[675],{"type":33,"value":333},{"type":27,"tag":84,"props":677,"children":678},{},[679],{"type":33,"value":338},{"type":27,"tag":35,"props":681,"children":682},{},[683],{"type":33,"value":343},{"type":27,"tag":66,"props":685,"children":686},{},[],{"type":27,"tag":28,"props":688,"children":689},{"id":349},[690],{"type":33,"value":349},{"type":27,"tag":35,"props":692,"children":693},{},[694],{"type":33,"value":356},{"type":27,"tag":35,"props":696,"children":697},{},[698],{"type":33,"value":361},{"type":27,"tag":35,"props":700,"children":701},{},[702],{"type":33,"value":366},{"type":27,"tag":66,"props":704,"children":705},{},[],{"type":27,"tag":35,"props":707,"children":708},{},[709],{"type":27,"tag":41,"props":710,"children":711},{},[712],{"type":33,"value":377},{"type":27,"tag":80,"props":714,"children":715},{},[716,724],{"type":27,"tag":84,"props":717,"children":718},{},[719],{"type":27,"tag":88,"props":720,"children":722},{"href":386,"rel":721},[92],[723],{"type":33,"value":390},{"type":27,"tag":84,"props":725,"children":726},{},[727],{"type":27,"tag":88,"props":728,"children":730},{"href":396,"rel":729},[92],[731],{"type":33,"value":400},{"title":7,"searchDepth":402,"depth":402,"links":733},[734,735,736,737,738,745,746],{"id":30,"depth":402,"text":30},{"id":71,"depth":402,"text":71},{"id":112,"depth":402,"text":115},{"id":157,"depth":402,"text":157},{"id":208,"depth":402,"text":208,"children":739},[740,741,742,743,744],{"id":219,"depth":411,"text":222},{"id":235,"depth":411,"text":238},{"id":251,"depth":411,"text":254},{"id":267,"depth":411,"text":270},{"id":283,"depth":411,"text":286},{"id":302,"depth":402,"text":302},{"id":349,"depth":402,"text":349},1779779149618]