{
    "componentChunkName": "component---src-templates-article-detail-index-js",
    "path": "/article/善用richtext讓自己的名片出色-更有個性_649e26707c39404b85f79496",
    "result": {"pageContext":{"env":"stg","prebuiltSiteConfig":{"config":{"_id":{"$oid":"64561a040abe238c27145375"},"name":"config","created":1683364356767,"updated":1687935649120,"add_stock_timing":"on-checkout","checkout_threshold":152,"free_shipping_threshold":{"HOME":399,"CVS":350,"CUSTOM":399},"invoice_issue_type":"payment_success","logistics_allow_type":["CVS"],"logistics_auto_create":false,"logistics_fee_config":{"HOME":[],"CVS":[{"limit":5,"price":65}],"HK":[],"MO":[],"CN":[],"MY":[],"SG":[],"TH":[]},"logistics_sender_info":{"SenderZipCode":"300","SenderAddress":"新竹市光復路二段2巷49-4號5樓","SenderCellPhone":"0926001934","SenderPhone":"03-5750109","SenderName":"羅世融"},"logistics_temperature":"0001","upload_shipping_note":true,"id":"64561a040abe238c27145375"},"landing":{"_id":{"$oid":"64561a040abe238c27145376"},"name":"landing","created":1683364356987,"updated":1686471164758,"ui_type":"custom","custom_layout":{},"type3_layout":{"hero_banner_section":{"images":[{"image":"https://nfctogo-revtel2-com-prod.s3.ap-northeast-1.amazonaws.com/head_W_bg2-1686470954"}]},"product_category_section":{"categories":[{}]},"about_section":{},"article_category_section":{}},"id":"64561a040abe238c27145376"},"about":{"_id":{"$oid":"64561a050abe238c27145377"},"name":"about","created":1683364357226,"updated":1683364357226,"id":"64561a050abe238c27145377"},"navbar_config":{"_id":{"$oid":"64561a050abe238c27145378"},"name":"navbar_config","created":1683364357529,"updated":1703122122435,"entries":[{"name":"電子名片","path":"/電子名片"},{"name":"企業名片","path":"/企業名片"},{"name":"文章","name_en":"blog","path":"/articles"},{"name_en":"products","name":"產品","path":"/products"},{"name":"幫助中心","name_en":"help","path":"/support"}],"id":"64561a050abe238c27145378"},"footer_config":{"_id":{"$oid":"64561a050abe238c27145379"},"name":"footer_config","created":1683364357764,"updated":1691536721104,"contact_email":"nfctogo@gmail.com","social_fb":"https://www.facebook.com/nfctogo/","style":"horizontal","copyright":"NFCTOGO.com @2023","social_youtube":"https://www.youtube.com/channel/UC-fmtQuUK45uZtfVgeKafdg","social_ig":"https://www.instagram.com/nfctogo/","social_line":"https://lin.ee/Uh4T1Ip","entries":[{"name":"隱私權政策","path":"https://www.nfctogo.com/privacy-policy"},{"name":"服務條款","path":"https://www.nfctogo.com/service-policy"},{"name":"蝦皮賣場","path":"https://shopee.tw/-NFC-TO-GO-NFC-Badge-電子名片-名片卡-金鑰卡-錢包卡-隨踫即用-i.74233225.21480932007?xptdk=508e29a2-30ba-49bb-9ada-1e11401577eb"}],"company_name":"NFCTOGO.com","id":"64561a050abe238c27145379"},"product_category":{"_id":{"$oid":"64561a050abe238c2714537a"},"name":"product_category","categories":[{"items":[{"name":"名片COMBO卡","display":"名片COMBO卡"},{"name":"錢包名片卡","display":"錢包名片卡 CryptoBadge"}],"display":"BADGE 電子名片","name":"BADGE 電子名片"},{"name":"SEAL 憑證貼標","display":"SEAL 憑證貼標"},{"items":[{"name":"NFC Stickers","display":"NFC標籤貼紙"},{"name":"NFC Cards","display":"NFC感應卡片"}],"name":"NFC 通用商品","display":"NFC 通用商品"}],"meta_data":{"item_ui_type":"type1"},"created":1683364357972,"updated":1692429578752,"id":"64561a050abe238c2714537a"},"article_category":{"_id":{"$oid":"64561a060abe238c2714537b"},"name":"article_category","categories":[{"name":"blog","display":"部落格"},{"name":"badge","display":"Badge教學"},{"items":[{"name":"第一次大發現","display":"NFC 第一次大發現"},{"name":"技術探索","display":"技術探索"},{"name":"NFC小百科","display":"小百科"},{"name":"創客園地","display":"創客園地"}],"name":"NFC知識","display":"NFC 知識"}],"meta_data":{"item_ui_type":"type1"},"created":1683364358193,"updated":1703926624550,"id":"64561a060abe238c2714537b"},"sales_event_category":{"_id":{"$oid":"64561a060abe238c2714537c"},"name":"sales_event_category","categories":[],"meta_data":{},"created":1683364358333,"updated":1683364358333,"id":"64561a060abe238c2714537c"},"customer_support_config":{"_id":{"$oid":"64561a060abe238c2714537d"},"name":"customer_support_config","created":1683364358554,"updated":1691188761690,"options":[{},{}],"id":"64561a060abe238c2714537d"}},"prebuiltArticle":{"_id":{"$oid":"649e26707c39404b85f79496"},"labels":["badge"],"prebuilt_url":"/articles/edit_richtext.html","title":"善用RichText讓自己的名片出色、更有個性","author":"Roger Luo","outline":"NFC-TO-GO 貼心提供行內富文本編輯器，來讓你的名片更出眾。","searchText":"NFC Badge, RichText Editor, NFC card","cover":"https://nfctogo-revtel2-com-prod.s3.ap-northeast-1.amazonaws.com/Badge_BioType-1688083737","image":"https://nfctogo-revtel2-com-prod.s3.ap-northeast-1.amazonaws.com/Edit-Badge-RichText-1-1688085660","content":[{"type":"p","children":[{"text":"通常平台加值業者，會讓一般消費者以穿制服的方式，取得更實惠的使用分擔；","fontSize":16,"lineHeight":1.8},{"fontSize":16,"lineHeight":1.8,"text":"NFC-TO-GO","code":true},{"fontSize":16,"lineHeight":1.8,"text":" 的 NFC BADGE 產品就是以這樣的策略進入市場，期待客戶的資料放在安全可靠的 AWS 後台 (由Amazon維運)。"}]},{"type":"p","children":[{"fontSize":16,"lineHeight":1.8,"text":""}]},{"type":"p","children":[{"fontSize":18,"lineHeight":1.8,"text":"編輯自己的BADGE資訊","fontWeight":"bolder"}]},{"type":"p","children":[{"fontSize":16,"lineHeight":1.8,"text":"使用 NFC BADGE 時，首先要建立其基本資料；在掃描登錄新卡後，首要之事，就是設想如何打造一張自己美美的名片，即使是在『穿制服』的既定形式之下。在"},{"fontSize":16,"lineHeight":1.8,"text":" 主頁 ","code":true},{"fontSize":16,"lineHeight":1.8,"text":" ->選 "},{"fontSize":16,"lineHeight":1.8,"text":" 編輯資料 ","code":true},{"fontSize":16,"lineHeight":1.8,"text":" 後，就會被導入後台 "},{"fontSize":16,"lineHeight":1.8,"text":" 編輯Badge ","code":true},{"fontSize":16,"lineHeight":1.8,"text":" 的線上編輯器，讓你可以上傳大頭照與填寫各欄位的資料；"}]},{"type":"p","children":[{"fontSize":16,"lineHeight":1.8,"text":""}]},{"type":"p","children":[{"fontSize":16,"lineHeight":1.8,"text":"這個固定的版型就是所謂的『穿制服』。為了有限度地滿足百樣客戶不同的需求，開發者還是提供了可以差異化的選項，包括：內建RichText編輯器的 "},{"fontSize":16,"lineHeight":1.8,"text":" 詳細介紹 ","code":true},{"fontSize":16,"lineHeight":1.8,"text":" 區塊、可自行增減的 "},{"fontSize":16,"lineHeight":1.8,"text":" 其他連結 ","code":true},{"fontSize":16,"lineHeight":1.8,"text":" 區塊。後者區塊的建立比較直覺，在此不多作介紹；而前者區塊的妙用無窮，本文將舉例詳加說明。"}]},{"type":"p","children":[{"fontSize":16,"lineHeight":1.8,"text":""}]},{"type":"p","children":[{"fontSize":18,"lineHeight":1.8,"text":"帶有樣式設定的文字區塊 RichText","fontWeight":"bolder"}]},{"type":"p","children":[{"fontSize":16,"lineHeight":1.8,"text":"點進 "},{"fontSize":16,"lineHeight":1.8,"text":" 詳細介紹 ","code":true},{"fontSize":16,"lineHeight":1.8,"text":" 區塊，會跳出一個『 RichText 』 的編輯視窗：視窗的上半部是樣式功能選項的列表；下半部是要輸入的內容，包括：文字與圖像。"}]},{"type":"p","children":[{"fontSize":16,"lineHeight":1.8,"text":""}]},{"type":"img","src":"https://nfctogo-revtel2-com-prod.s3.ap-northeast-1.amazonaws.com/Edit-Badge-2-1688085685","children":[{"text":""}],"maxWidth":"100%"},{"type":"p","children":[{"text":""}]},{"type":"p","children":[{"fontSize":16,"lineHeight":1.8,"text":"在上面的圖例中，一開始利用文字帶超連結的功能，可以參考"},{"type":"a","href":"https://www.nfctogo.com/article/?id=6485778885fc8ee65a92a651","children":[{"fontSize":16,"lineHeight":1.8,"text":"這篇"}]},{"fontSize":16,"lineHeight":1.8,"text":"；基本上，就是先選取要關聯的文字，然後到上半部按下樣式功能選項，再依提示填入內容即可。樣式功能選項由左至右，由上而下依序是："}]},{"type":"ul","children":[{"type":"li","children":[{"fontSize":16,"lineHeight":1.8,"text":"第一行：粗體、斜體、加底線、加刪除線、螢光標示、文字靠左對齊、文字置中對齊"}]},{"type":"li","children":[{"fontSize":16,"lineHeight":1.8,"text":"第二行：文字靠右對齊、超連結、大標題、小標題、引言、區塊文字、編號清單"}]},{"type":"li","children":[{"fontSize":16,"lineHeight":1.8,"text":"第三行：項目符號清單、文字顏色、插入圖像、加入影片、插入HTML、設定字體大小、調整行距"}]}]},{"type":"p","children":[{"fontSize":16,"lineHeight":1.8,"text":"舉上圖例子裡，最後一行：使用了 "},{"fontSize":16,"lineHeight":1.8,"text":" 引言 ","code":true},{"fontSize":16,"lineHeight":1.8,"text":" 樣式：”無可救藥…牡羊星人”，而其最後的『牡羊星人』還以 "},{"fontSize":16,"lineHeight":1.8,"text":" 標註文字 ","code":true},{"fontSize":16,"lineHeight":1.8,"text":" 樣式來強調。其實，對顯示字型、樣式很注重的人，也可以把文字區塊先做成圖像，然後再將圖像插入相對的位置；為了便於了解實際呈現的效果，可以看這張"},{"type":"a","href":"https://badge.nfctogo.com/badge/?owner=0419E872AE4F81","children":[{"fontSize":16,"lineHeight":1.8,"text":"名片"}]},{"fontSize":16,"lineHeight":1.8,"text":"，是不是這樣就可以更自由、更傳神的來表達了。"}]},{"type":"p","children":[{"fontSize":16,"lineHeight":1.8,"text":""}]},{"type":"p","children":[{"fontSize":16,"lineHeight":1.8,"text":"善用RichText，可以跳脫『穿制服』時的綁手綁腳。正所謂『師父領進門，修行在個人！』，一張有個性的精彩名片，等你花點心思來創作！"}]},{"type":"ul","children":[{"text":""}]}],"html":"<p  style=\"margin: 0\"> <span style=\"font-size: 16px;\nline-height: 1.8\">通常平台加值業者，會讓一般消費者以穿制服的方式，取得更實惠的使用分擔；</span><span style=\"font-size: 14px;\nline-height: 1.8;\nbackground-color: lightgray;\npadding: 2px;\nborder-radius: 3px\">NFC-TO-GO</span><span style=\"font-size: 16px;\nline-height: 1.8\"> 的 NFC BADGE 產品就是以這樣的策略進入市場，期待客戶的資料放在安全可靠的 AWS 後台 (由Amazon維運)。</span> </p><p  style=\"margin: 0\"> <span style=\"font-size: 16px;\nline-height: 1.8\"></span> </p><p  style=\"margin: 0\"> <span style=\"font-weight: bolder;\nfont-size: 18px;\nline-height: 1.8\">編輯自己的BADGE資訊</span> </p><p  style=\"margin: 0\"> <span style=\"font-size: 16px;\nline-height: 1.8\">使用 NFC BADGE 時，首先要建立其基本資料；在掃描登錄新卡後，首要之事，就是設想如何打造一張自己美美的名片，即使是在『穿制服』的既定形式之下。在</span><span style=\"font-size: 14px;\nline-height: 1.8;\nbackground-color: lightgray;\npadding: 2px;\nborder-radius: 3px\"> 主頁 </span><span style=\"font-size: 16px;\nline-height: 1.8\"> -&gt;選 </span><span style=\"font-size: 14px;\nline-height: 1.8;\nbackground-color: lightgray;\npadding: 2px;\nborder-radius: 3px\"> 編輯資料 </span><span style=\"font-size: 16px;\nline-height: 1.8\"> 後，就會被導入後台 </span><span style=\"font-size: 14px;\nline-height: 1.8;\nbackground-color: lightgray;\npadding: 2px;\nborder-radius: 3px\"> 編輯Badge </span><span style=\"font-size: 16px;\nline-height: 1.8\"> 的線上編輯器，讓你可以上傳大頭照與填寫各欄位的資料；</span> </p><p  style=\"margin: 0\"> <span style=\"font-size: 16px;\nline-height: 1.8\"></span> </p><p  style=\"margin: 0\"> <span style=\"font-size: 16px;\nline-height: 1.8\">這個固定的版型就是所謂的『穿制服』。為了有限度地滿足百樣客戶不同的需求，開發者還是提供了可以差異化的選項，包括：內建RichText編輯器的 </span><span style=\"font-size: 14px;\nline-height: 1.8;\nbackground-color: lightgray;\npadding: 2px;\nborder-radius: 3px\"> 詳細介紹 </span><span style=\"font-size: 16px;\nline-height: 1.8\"> 區塊、可自行增減的 </span><span style=\"font-size: 14px;\nline-height: 1.8;\nbackground-color: lightgray;\npadding: 2px;\nborder-radius: 3px\"> 其他連結 </span><span style=\"font-size: 16px;\nline-height: 1.8\"> 區塊。後者區塊的建立比較直覺，在此不多作介紹；而前者區塊的妙用無窮，本文將舉例詳加說明。</span> </p><p  style=\"margin: 0\"> <span style=\"font-size: 16px;\nline-height: 1.8\"></span> </p><p  style=\"margin: 0\"> <span style=\"font-weight: bolder;\nfont-size: 18px;\nline-height: 1.8\">帶有樣式設定的文字區塊 RichText</span> </p><p  style=\"margin: 0\"> <span style=\"font-size: 16px;\nline-height: 1.8\">點進 </span><span style=\"font-size: 14px;\nline-height: 1.8;\nbackground-color: lightgray;\npadding: 2px;\nborder-radius: 3px\"> 詳細介紹 </span><span style=\"font-size: 16px;\nline-height: 1.8\"> 區塊，會跳出一個『 RichText 』 的編輯視窗：視窗的上半部是樣式功能選項的列表；下半部是要輸入的內容，包括：文字與圖像。</span> </p><p  style=\"margin: 0\"> <span style=\"font-size: 16px;\nline-height: 1.8\"></span> </p><div style=\"\"\"><img src=\"https://nfctogo-revtel2-com-prod.s3.ap-northeast-1.amazonaws.com/Edit-Badge-2-1688085685\" alt=\"article image\" style=\"\" /><div><span style=\"\"></span></div></div><p  style=\"margin: 0\"> <span style=\"\"></span> </p><p  style=\"margin: 0\"> <span style=\"font-size: 16px;\nline-height: 1.8\">在上面的圖例中，一開始利用文字帶超連結的功能，可以參考</span><a href=\"https://www.nfctogo.com/article/?id=6485778885fc8ee65a92a651\"><span style=\"font-size: 16px;\nline-height: 1.8\">這篇</span></a><span style=\"font-size: 16px;\nline-height: 1.8\">；基本上，就是先選取要關聯的文字，然後到上半部按下樣式功能選項，再依提示填入內容即可。樣式功能選項由左至右，由上而下依序是：</span> </p><ul style=\"\"><li style=\"\"><span style=\"font-size: 16px;\nline-height: 1.8\">第一行：粗體、斜體、加底線、加刪除線、螢光標示、文字靠左對齊、文字置中對齊</span></li><li style=\"\"><span style=\"font-size: 16px;\nline-height: 1.8\">第二行：文字靠右對齊、超連結、大標題、小標題、引言、區塊文字、編號清單</span></li><li style=\"\"><span style=\"font-size: 16px;\nline-height: 1.8\">第三行：項目符號清單、文字顏色、插入圖像、加入影片、插入HTML、設定字體大小、調整行距</span></li></ul><p  style=\"margin: 0\"> <span style=\"font-size: 16px;\nline-height: 1.8\">舉上圖例子裡，最後一行：使用了 </span><span style=\"font-size: 14px;\nline-height: 1.8;\nbackground-color: lightgray;\npadding: 2px;\nborder-radius: 3px\"> 引言 </span><span style=\"font-size: 16px;\nline-height: 1.8\"> 樣式：”無可救藥…牡羊星人”，而其最後的『牡羊星人』還以 </span><span style=\"font-size: 14px;\nline-height: 1.8;\nbackground-color: lightgray;\npadding: 2px;\nborder-radius: 3px\"> 標註文字 </span><span style=\"font-size: 16px;\nline-height: 1.8\"> 樣式來強調。其實，對顯示字型、樣式很注重的人，也可以把文字區塊先做成圖像，然後再將圖像插入相對的位置；為了便於了解實際呈現的效果，可以看這張</span><a href=\"https://badge.nfctogo.com/badge/?owner=0419E872AE4F81\"><span style=\"font-size: 16px;\nline-height: 1.8\">名片</span></a><span style=\"font-size: 16px;\nline-height: 1.8\">，是不是這樣就可以更自由、更傳神的來表達了。</span> </p><p  style=\"margin: 0\"> <span style=\"font-size: 16px;\nline-height: 1.8\"></span> </p><p  style=\"margin: 0\"> <span style=\"font-size: 16px;\nline-height: 1.8\">善用RichText，可以跳脫『穿制服』時的綁手綁腳。正所謂『師父領進門，修行在個人！』，一張有個性的精彩名片，等你花點心思來創作！</span> </p><ul style=\"\"><span style=\"\"></span></ul>","created":1688086128276,"updated":1691110664223,"id":"649e26707c39404b85f79496"}}},
    "staticQueryHashes": []}