[{"data":1,"prerenderedAt":869},["ShallowReactive",2],{"page-\u002Farticles\u002Fbarkod":3,"related-\u002Farticles\u002Fbarkod":495,"content-query-HScBJKPKfr":518},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"category":11,"image":12,"tags":13,"series":17,"readingTime":18,"difficulty":19,"local":20,"platforms":21,"gpu":24,"body":25,"_type":489,"_id":490,"_source":491,"_file":492,"_stem":493,"_extension":494},"\u002Farticles\u002Fbarkod","articles",false,"","Barkod Studio 個性化條碼與發票載具圖樣生成器安裝與設計指南","全網頁版免安裝，高質感自訂樣式。結帳時拿出鯊魚或大便造型載具，絕對是全場焦點。","2026-05-07","Tools","\u002Fimages\u002Fcode.png",[14,15,16],"Web Development","Frontend","JavaScript","github-tech","4 min read","Easy",true,[22,23],"macOS","Windows","None",{"type":26,"children":27,"toc":476},"root",[28,37,51,56,91,95,101,106,185,188,193,231,276,281,284,290,295,302,332,338,343,364,369,387,393,405,408,413,423,428,441,444,452,464,467],{"type":29,"tag":30,"props":31,"children":33},"element","h2",{"id":32},"為什麼選擇-barkod-studio",[34],{"type":35,"value":36},"text","為什麼選擇 Barkod Studio？",{"type":29,"tag":38,"props":39,"children":40},"p",{},[41,43,49],{"type":35,"value":42},"每次想產生條碼時，總是被各種充滿廣告、介面醜陋的網站煩死嗎？這款極簡風格的 ",{"type":29,"tag":44,"props":45,"children":46},"strong",{},[47],{"type":35,"value":48},"Barkod Studio",{"type":35,"value":50}," 不只顏值極高，還內建了許多「不講武德」的惡搞造型。",{"type":29,"tag":38,"props":52,"children":53},{},[54],{"type":35,"value":55},"它是一個全網頁版的工具，完全不需要註冊或下載 App，就能製作出高畫質、具備設計感的條碼。我們甚至可以用它來客製化專屬的發票載具，讓結帳變得更有趣。",{"type":29,"tag":57,"props":58,"children":67},"div",{"className":59},[60,61,62,63,64,65,66],"my-8","rounded-xl","overflow-hidden","shadow-2xl","border","border-slate-200","dark:border-slate-800",[68,70,78,79],{"type":35,"value":69},"\n  ",{"type":29,"tag":71,"props":72,"children":77},"img",{"src":12,"alt":73,"className":74},"Barkod Studio UI",[75,76],"w-full","h-auto",[],{"type":35,"value":69},{"type":29,"tag":38,"props":80,"children":88},{"className":81},[82,83,84,85,86,87],"text-center","text-sm","text-slate-500","py-2","bg-slate-50","dark:bg-slate-900\u002F50",[89],{"type":35,"value":90},"Barkod Studio 極簡且富有設計感的介面",{"type":29,"tag":92,"props":93,"children":94},"hr",{},[],{"type":29,"tag":30,"props":96,"children":98},{"id":97},"條碼類型怎麼選",[99],{"type":35,"value":100},"條碼類型怎麼選？",{"type":29,"tag":38,"props":102,"children":103},{},[104],{"type":35,"value":105},"Barkod Studio 支援多種標準，如果你不知道該選哪一個，參考這份表格：",{"type":29,"tag":107,"props":108,"children":109},"table",{},[110,135],{"type":29,"tag":111,"props":112,"children":113},"thead",{},[114],{"type":29,"tag":115,"props":116,"children":117},"tr",{},[118,125,130],{"type":29,"tag":119,"props":120,"children":122},"th",{"align":121},"left",[123],{"type":35,"value":124},"類型",{"type":29,"tag":119,"props":126,"children":127},{"align":121},[128],{"type":35,"value":129},"用途",{"type":29,"tag":119,"props":131,"children":132},{"align":121},[133],{"type":35,"value":134},"說明",{"type":29,"tag":136,"props":137,"children":138},"tbody",{},[139,164],{"type":29,"tag":115,"props":140,"children":141},{},[142,151,159],{"type":29,"tag":143,"props":144,"children":145},"td",{"align":121},[146],{"type":29,"tag":44,"props":147,"children":148},{},[149],{"type":35,"value":150},"Code 128",{"type":29,"tag":143,"props":152,"children":153},{"align":121},[154],{"type":29,"tag":44,"props":155,"children":156},{},[157],{"type":35,"value":158},"發票載具 (首選)",{"type":29,"tag":143,"props":160,"children":161},{"align":121},[162],{"type":35,"value":163},"最萬用的格式，支援字母與數字。想做專屬載具選這個。",{"type":29,"tag":115,"props":165,"children":166},{},[167,175,180],{"type":29,"tag":143,"props":168,"children":169},{"align":121},[170],{"type":29,"tag":44,"props":171,"children":172},{},[173],{"type":35,"value":174},"EAN-13",{"type":29,"tag":143,"props":176,"children":177},{"align":121},[178],{"type":35,"value":179},"商品條碼",{"type":29,"tag":143,"props":181,"children":182},{"align":121},[183],{"type":35,"value":184},"平常飲料、零食包裝上最常見的格式，僅限數字。",{"type":29,"tag":92,"props":186,"children":187},{},[],{"type":29,"tag":30,"props":189,"children":191},{"id":190},"如何生成個性化載具條碼",[192],{"type":35,"value":190},{"type":29,"tag":38,"props":194,"children":195},{},[196,198,206,208,214,216,222,224,229],{"type":35,"value":197},"前往 ",{"type":29,"tag":199,"props":200,"children":204},"a",{"href":201,"rel":202},"https:\u002F\u002Fbarkod.studio\u002F",[203],"nofollow",[205],{"type":35,"value":48},{"type":35,"value":207}," 網站\n選好 ",{"type":29,"tag":209,"props":210,"children":212},"code",{"className":211},[],[213],{"type":35,"value":150},{"type":35,"value":215}," 並輸入你的載具號碼（記得包含 ",{"type":29,"tag":209,"props":217,"children":219},{"className":218},[],[220],{"type":35,"value":221},"\u002F",{"type":35,"value":223}," 符號）後，重頭戲來了。在 ",{"type":29,"tag":44,"props":225,"children":226},{},[227],{"type":35,"value":228},"Barcode Style",{"type":35,"value":230}," 選項中，你可以選擇各種超ㄎㄧㄤ的形狀：",{"type":29,"tag":232,"props":233,"children":234},"ul",{},[235,246,256,266],{"type":29,"tag":236,"props":237,"children":238},"li",{},[239,244],{"type":29,"tag":44,"props":240,"children":241},{},[242],{"type":35,"value":243},"POOP",{"type":35,"value":245}," (便便造型)：強烈建議嘗試，下次結帳直接給店員刷大便。",{"type":29,"tag":236,"props":247,"children":248},{},[249,254],{"type":29,"tag":44,"props":250,"children":251},{},[252],{"type":35,"value":253},"ANGRY SHARK",{"type":35,"value":255}," (生氣鯊魚)：帥氣又帶點俏皮。",{"type":29,"tag":236,"props":257,"children":258},{},[259,264],{"type":29,"tag":44,"props":260,"children":261},{},[262],{"type":35,"value":263},"GHOST",{"type":35,"value":265}," (幽靈)：極簡風的好選擇。",{"type":29,"tag":236,"props":267,"children":268},{},[269,274],{"type":29,"tag":44,"props":270,"children":271},{},[272],{"type":35,"value":273},"HAPPY PINEAPPLE",{"type":35,"value":275}," (快樂鳳梨)：充滿熱帶風情。",{"type":29,"tag":38,"props":277,"children":278},{},[279],{"type":35,"value":280},"你可以自由調整條碼的顏色與形狀，直到滿意為止。",{"type":29,"tag":92,"props":282,"children":283},{},[],{"type":29,"tag":30,"props":285,"children":287},{"id":286},"實作教學將載具放進-iphone-捷徑",[288],{"type":35,"value":289},"實作教學：將載具放進 iPhone 捷徑",{"type":29,"tag":38,"props":291,"children":292},{},[293],{"type":35,"value":294},"Barkod Studio 下載的是高畫質的 SVG 格式，要在 iPhone 上快速開啟稍微有點技巧。這裡分享一個快速設定捷徑的方法：",{"type":29,"tag":296,"props":297,"children":299},"h3",{"id":298},"_1-處理圖檔",[300],{"type":35,"value":301},"1. 處理圖檔",{"type":29,"tag":232,"props":303,"children":304},{},[305,310,320],{"type":29,"tag":236,"props":306,"children":307},{},[308],{"type":35,"value":309},"將下載好的 SVG 檔案打開預覽。",{"type":29,"tag":236,"props":311,"children":312},{},[313,318],{"type":29,"tag":44,"props":314,"children":315},{},[316],{"type":35,"value":317},"直接截圖",{"type":35,"value":319},"並裁切至適當的大小。",{"type":29,"tag":236,"props":321,"children":322},{},[323,325,330],{"type":35,"value":324},"點擊左下角的「分享」按鈕，下滑找到「",{"type":29,"tag":44,"props":326,"children":327},{},[328],{"type":35,"value":329},"儲存到檔案",{"type":35,"value":331},"」，並記住儲存的位置。",{"type":29,"tag":296,"props":333,"children":335},{"id":334},"_2-設定捷徑",[336],{"type":35,"value":337},"2. 設定捷徑",{"type":29,"tag":38,"props":339,"children":340},{},[341],{"type":35,"value":342},"如果你不想從頭開始設定，我也準備了一個懶人模版供你直接套用：",{"type":29,"tag":344,"props":345,"children":346},"blockquote",{},[347],{"type":29,"tag":38,"props":348,"children":349},{},[350,355,357],{"type":29,"tag":44,"props":351,"children":352},{},[353],{"type":35,"value":354},"懶人捷徑模版",{"type":35,"value":356},"：",{"type":29,"tag":199,"props":358,"children":361},{"href":359,"rel":360},"https:\u002F\u002Fwww.icloud.com\u002Fshortcuts\u002F6dcbe2b6a6f843dd98d60dd8b2a9b576",[203],[362],{"type":35,"value":363},"點此下載 iCloud 捷徑",{"type":29,"tag":38,"props":365,"children":366},{},[367],{"type":35,"value":368},"手動設定方式如下，請依照下圖方式排列：第一個「檔案」動作，選擇剛剛那張截圖，接著可以設定你喜歡的觸發方式。",{"type":29,"tag":57,"props":370,"children":372},{"className":371},[60,61,62,63,64,65,66],[373,374,380,381],{"type":35,"value":69},{"type":29,"tag":71,"props":375,"children":379},{"src":376,"alt":377,"className":378},"\u002Fimages\u002F捷徑.PNG","iOS Shortcut Setup",[75,76],[],{"type":35,"value":69},{"type":29,"tag":38,"props":382,"children":384},{"className":383},[82,83,84,85,86,87],[385],{"type":35,"value":386},"iOS 捷徑設定範例：將截圖檔案作為第一個動作",{"type":29,"tag":296,"props":388,"children":390},{"id":389},"_3-捷徑開啟",[391],{"type":35,"value":392},"3. 捷徑開啟",{"type":29,"tag":38,"props":394,"children":395},{},[396,398,403],{"type":35,"value":397},"我個人的做法是將 ",{"type":29,"tag":44,"props":399,"children":400},{},[401],{"type":35,"value":402},"iOS 鎖定畫面的手電筒按鈕",{"type":35,"value":404}," 改成啟動這個「載具捷徑」。現在結帳時，我只需要點一下手機螢幕，就能帥氣地出示我的大便載具。",{"type":29,"tag":92,"props":406,"children":407},{},[],{"type":29,"tag":30,"props":409,"children":411},{"id":410},"個人心得",[412],{"type":35,"value":410},{"type":29,"tag":38,"props":414,"children":415},{},[416,418],{"type":35,"value":417},"我非常喜歡 Barkod Studio 的設計理念：",{"type":29,"tag":44,"props":419,"children":420},{},[421],{"type":35,"value":422},"讓工具不只是工具，還能帶點ㄎㄧㄤ感。",{"type":29,"tag":38,"props":424,"children":425},{},[426],{"type":35,"value":427},"如果你也厭倦了醜陋的條碼產生器，Barkod Studio 絕對值得一試。它不僅提供了實用的功能，更透過豐富的樣式讓我們能展現個人風格。",{"type":29,"tag":344,"props":429,"children":430},{},[431],{"type":29,"tag":38,"props":432,"children":433},{},[434,439],{"type":29,"tag":44,"props":435,"children":436},{},[437],{"type":35,"value":438},"小撇步",{"type":35,"value":440},"：如果你擔心店員刷不到，建議顏色不要選得太淺，深色的條碼掃描成功率最高喔！",{"type":29,"tag":92,"props":442,"children":443},{},[],{"type":29,"tag":38,"props":445,"children":446},{},[447],{"type":29,"tag":44,"props":448,"children":449},{},[450],{"type":35,"value":451},"相關連結：",{"type":29,"tag":232,"props":453,"children":454},{},[455],{"type":29,"tag":236,"props":456,"children":457},{},[458],{"type":29,"tag":199,"props":459,"children":461},{"href":201,"rel":460},[203],[462],{"type":35,"value":463},"Barkod Studio 官方網站",{"type":29,"tag":92,"props":465,"children":466},{},[],{"type":29,"tag":38,"props":468,"children":469},{},[470],{"type":29,"tag":471,"props":472,"children":473},"em",{},[474],{"type":35,"value":475},"本文條碼工具實作參考自 Barkod Studio 官方網站。",{"title":7,"searchDepth":477,"depth":477,"links":478},2,[479,480,481,482,488],{"id":32,"depth":477,"text":36},{"id":97,"depth":477,"text":100},{"id":190,"depth":477,"text":190},{"id":286,"depth":477,"text":289,"children":483},[484,486,487],{"id":298,"depth":485,"text":301},3,{"id":334,"depth":485,"text":337},{"id":389,"depth":485,"text":392},{"id":410,"depth":477,"text":410},"markdown","content:articles:barkod.md","content","articles\u002Fbarkod.md","articles\u002Fbarkod","md",[496,504,510],{"_path":497,"title":498,"description":499,"date":500,"category":501,"image":12,"tags":502,"score":485},"\u002Farticles\u002Frough.js","Rough.js 手繪草稿風 Canvas 繪圖庫配置與網頁整合開發教學","如果你想在網站裡做出像白板草圖、設計稿、塗鴉感插圖，Rough.js 是一個簡單又很有辨識度的選擇。","2026-05-22","Web Dev",[14,16,503,15],"Data Visualization",{"_path":505,"title":506,"description":507,"date":508,"category":501,"image":12,"tags":509,"score":485},"\u002Farticles\u002Fpretext","Pretext 高效多行文字 Canvas 排版庫優化與防 DOM 重繪技術","想精準計算段落高度、做出更自由的文字排版，卻不想一直碰 getBoundingClientRect？Pretext 提供了一條很聰明的路。","2026-05-20",[14,15,16],{"_path":511,"title":512,"description":513,"date":514,"category":501,"image":515,"tags":516,"score":485},"\u002Farticles\u002Fcobe","Cobe 輕量 WebGL 地球儀配置教學與 Vue 專案整合指南","想要在網頁上放一個酷炫的 3D 地球，但又不想載入沉重的 Three.js？COBE 是你的最佳選擇。","2026-05-04","\u002Fimages\u002Fcobe-hero.png",[517,14,15,16],"WebGL",{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"category":11,"image":12,"tags":519,"series":17,"readingTime":18,"difficulty":19,"local":20,"platforms":520,"gpu":24,"body":521,"_type":489,"_id":490,"_source":491,"_file":492,"_stem":493,"_extension":494},[14,15,16],[22,23],{"type":26,"children":522,"toc":858},[523,527,536,540,555,558,562,566,629,632,636,663,698,702,705,709,713,717,741,745,749,765,769,784,788,797,800,804,812,816,827,830,837,848,851],{"type":29,"tag":30,"props":524,"children":525},{"id":32},[526],{"type":35,"value":36},{"type":29,"tag":38,"props":528,"children":529},{},[530,531,535],{"type":35,"value":42},{"type":29,"tag":44,"props":532,"children":533},{},[534],{"type":35,"value":48},{"type":35,"value":50},{"type":29,"tag":38,"props":537,"children":538},{},[539],{"type":35,"value":55},{"type":29,"tag":57,"props":541,"children":543},{"className":542},[60,61,62,63,64,65,66],[544,545,549,550],{"type":35,"value":69},{"type":29,"tag":71,"props":546,"children":548},{"src":12,"alt":73,"className":547},[75,76],[],{"type":35,"value":69},{"type":29,"tag":38,"props":551,"children":553},{"className":552},[82,83,84,85,86,87],[554],{"type":35,"value":90},{"type":29,"tag":92,"props":556,"children":557},{},[],{"type":29,"tag":30,"props":559,"children":560},{"id":97},[561],{"type":35,"value":100},{"type":29,"tag":38,"props":563,"children":564},{},[565],{"type":35,"value":105},{"type":29,"tag":107,"props":567,"children":568},{},[569,587],{"type":29,"tag":111,"props":570,"children":571},{},[572],{"type":29,"tag":115,"props":573,"children":574},{},[575,579,583],{"type":29,"tag":119,"props":576,"children":577},{"align":121},[578],{"type":35,"value":124},{"type":29,"tag":119,"props":580,"children":581},{"align":121},[582],{"type":35,"value":129},{"type":29,"tag":119,"props":584,"children":585},{"align":121},[586],{"type":35,"value":134},{"type":29,"tag":136,"props":588,"children":589},{},[590,611],{"type":29,"tag":115,"props":591,"children":592},{},[593,600,607],{"type":29,"tag":143,"props":594,"children":595},{"align":121},[596],{"type":29,"tag":44,"props":597,"children":598},{},[599],{"type":35,"value":150},{"type":29,"tag":143,"props":601,"children":602},{"align":121},[603],{"type":29,"tag":44,"props":604,"children":605},{},[606],{"type":35,"value":158},{"type":29,"tag":143,"props":608,"children":609},{"align":121},[610],{"type":35,"value":163},{"type":29,"tag":115,"props":612,"children":613},{},[614,621,625],{"type":29,"tag":143,"props":615,"children":616},{"align":121},[617],{"type":29,"tag":44,"props":618,"children":619},{},[620],{"type":35,"value":174},{"type":29,"tag":143,"props":622,"children":623},{"align":121},[624],{"type":35,"value":179},{"type":29,"tag":143,"props":626,"children":627},{"align":121},[628],{"type":35,"value":184},{"type":29,"tag":92,"props":630,"children":631},{},[],{"type":29,"tag":30,"props":633,"children":634},{"id":190},[635],{"type":35,"value":190},{"type":29,"tag":38,"props":637,"children":638},{},[639,640,645,646,651,652,657,658,662],{"type":35,"value":197},{"type":29,"tag":199,"props":641,"children":643},{"href":201,"rel":642},[203],[644],{"type":35,"value":48},{"type":35,"value":207},{"type":29,"tag":209,"props":647,"children":649},{"className":648},[],[650],{"type":35,"value":150},{"type":35,"value":215},{"type":29,"tag":209,"props":653,"children":655},{"className":654},[],[656],{"type":35,"value":221},{"type":35,"value":223},{"type":29,"tag":44,"props":659,"children":660},{},[661],{"type":35,"value":228},{"type":35,"value":230},{"type":29,"tag":232,"props":664,"children":665},{},[666,674,682,690],{"type":29,"tag":236,"props":667,"children":668},{},[669,673],{"type":29,"tag":44,"props":670,"children":671},{},[672],{"type":35,"value":243},{"type":35,"value":245},{"type":29,"tag":236,"props":675,"children":676},{},[677,681],{"type":29,"tag":44,"props":678,"children":679},{},[680],{"type":35,"value":253},{"type":35,"value":255},{"type":29,"tag":236,"props":683,"children":684},{},[685,689],{"type":29,"tag":44,"props":686,"children":687},{},[688],{"type":35,"value":263},{"type":35,"value":265},{"type":29,"tag":236,"props":691,"children":692},{},[693,697],{"type":29,"tag":44,"props":694,"children":695},{},[696],{"type":35,"value":273},{"type":35,"value":275},{"type":29,"tag":38,"props":699,"children":700},{},[701],{"type":35,"value":280},{"type":29,"tag":92,"props":703,"children":704},{},[],{"type":29,"tag":30,"props":706,"children":707},{"id":286},[708],{"type":35,"value":289},{"type":29,"tag":38,"props":710,"children":711},{},[712],{"type":35,"value":294},{"type":29,"tag":296,"props":714,"children":715},{"id":298},[716],{"type":35,"value":301},{"type":29,"tag":232,"props":718,"children":719},{},[720,724,732],{"type":29,"tag":236,"props":721,"children":722},{},[723],{"type":35,"value":309},{"type":29,"tag":236,"props":725,"children":726},{},[727,731],{"type":29,"tag":44,"props":728,"children":729},{},[730],{"type":35,"value":317},{"type":35,"value":319},{"type":29,"tag":236,"props":733,"children":734},{},[735,736,740],{"type":35,"value":324},{"type":29,"tag":44,"props":737,"children":738},{},[739],{"type":35,"value":329},{"type":35,"value":331},{"type":29,"tag":296,"props":742,"children":743},{"id":334},[744],{"type":35,"value":337},{"type":29,"tag":38,"props":746,"children":747},{},[748],{"type":35,"value":342},{"type":29,"tag":344,"props":750,"children":751},{},[752],{"type":29,"tag":38,"props":753,"children":754},{},[755,759,760],{"type":29,"tag":44,"props":756,"children":757},{},[758],{"type":35,"value":354},{"type":35,"value":356},{"type":29,"tag":199,"props":761,"children":763},{"href":359,"rel":762},[203],[764],{"type":35,"value":363},{"type":29,"tag":38,"props":766,"children":767},{},[768],{"type":35,"value":368},{"type":29,"tag":57,"props":770,"children":772},{"className":771},[60,61,62,63,64,65,66],[773,774,778,779],{"type":35,"value":69},{"type":29,"tag":71,"props":775,"children":777},{"src":376,"alt":377,"className":776},[75,76],[],{"type":35,"value":69},{"type":29,"tag":38,"props":780,"children":782},{"className":781},[82,83,84,85,86,87],[783],{"type":35,"value":386},{"type":29,"tag":296,"props":785,"children":786},{"id":389},[787],{"type":35,"value":392},{"type":29,"tag":38,"props":789,"children":790},{},[791,792,796],{"type":35,"value":397},{"type":29,"tag":44,"props":793,"children":794},{},[795],{"type":35,"value":402},{"type":35,"value":404},{"type":29,"tag":92,"props":798,"children":799},{},[],{"type":29,"tag":30,"props":801,"children":802},{"id":410},[803],{"type":35,"value":410},{"type":29,"tag":38,"props":805,"children":806},{},[807,808],{"type":35,"value":417},{"type":29,"tag":44,"props":809,"children":810},{},[811],{"type":35,"value":422},{"type":29,"tag":38,"props":813,"children":814},{},[815],{"type":35,"value":427},{"type":29,"tag":344,"props":817,"children":818},{},[819],{"type":29,"tag":38,"props":820,"children":821},{},[822,826],{"type":29,"tag":44,"props":823,"children":824},{},[825],{"type":35,"value":438},{"type":35,"value":440},{"type":29,"tag":92,"props":828,"children":829},{},[],{"type":29,"tag":38,"props":831,"children":832},{},[833],{"type":29,"tag":44,"props":834,"children":835},{},[836],{"type":35,"value":451},{"type":29,"tag":232,"props":838,"children":839},{},[840],{"type":29,"tag":236,"props":841,"children":842},{},[843],{"type":29,"tag":199,"props":844,"children":846},{"href":201,"rel":845},[203],[847],{"type":35,"value":463},{"type":29,"tag":92,"props":849,"children":850},{},[],{"type":29,"tag":38,"props":852,"children":853},{},[854],{"type":29,"tag":471,"props":855,"children":856},{},[857],{"type":35,"value":475},{"title":7,"searchDepth":477,"depth":477,"links":859},[860,861,862,863,868],{"id":32,"depth":477,"text":36},{"id":97,"depth":477,"text":100},{"id":190,"depth":477,"text":190},{"id":286,"depth":477,"text":289,"children":864},[865,866,867],{"id":298,"depth":485,"text":301},{"id":334,"depth":485,"text":337},{"id":389,"depth":485,"text":392},{"id":410,"depth":477,"text":410},1779779149618]