寫給初學(xué)者的HTML和CSS編碼規(guī)范

TML配置

文件應(yīng)以“”首行頂格開始，推薦使用“”。
必須申明文檔的編碼charset，并且使用UTF-8編碼。
移動端必須使用 viewport 適配
頁面title是極為重要的不可缺少的一項。

以下是一個標(biāo)準(zhǔn)的html結(jié)構(gòu)

html復(fù)制代碼<!DOCTYPE html>
<html>
  <head>
    <!-- 必須聲明 utf-8 編碼格式 -->
    <meta charset="utf-8">
    <!-- 頁面標(biāo)題不能為空 -->
    <title>京東商城:商家后臺</title>
    <!-- 移動端必須使用 viewport 適配需要, PC 看場景需要使用 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
     
    <!-- 樣式文件 以外鏈形式在此處引入 -->
    <link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
  </head>
  <body>
    <!-- 頁面主體 -->
    <div class="warp">
      <header>頂部內(nèi)容區(qū)域，比如：菜單頭</header>
      <div class="content">主內(nèi)容區(qū)域</div>
      <footer>頂部頁尾區(qū)域，比如：備案號</footer>
    </div>
     
    <!-- js文件 在此處引入 -->
    <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
  </body>
</html>

主框架(jQuery,vue,react,angular等) 避免混合使用

避免多個框架混合使用，在同一個工程里面要保持主框架的一致性，多框架同時使用會造成代碼混亂，后期會變得越來越難維護。

Css開發(fā)規(guī)范

1、全局樣式禁止使用!important

2、避免使用導(dǎo)入式引入css樣式文件；

css復(fù)制代碼<style type="text/css">
  @import url(./demo.css);
</style>

未使用的js/css禁止引用

歷史頁面會有一些功能下線，在去除頁面初始化的js語句的同時，也要將依賴的js文件刪除，避免資源加載浪費

文件必須使用gzip壓縮

開啟Gzip壓縮功能，可以使網(wǎng)站的css、js 、xml、html 文件在傳輸時進(jìn)行壓縮，提高訪問速度

api接口中，無用字段占傳輸比例30%以上時，刪除無用字段

在開發(fā)過程中，發(fā)現(xiàn)無用字段占傳輸比例30%以上時，請進(jìn)行返回數(shù)據(jù)的刪減，加快數(shù)據(jù)請求速度

關(guān)于圖片壓縮

上傳圖片之前一定要做圖片的無損壓縮，節(jié)省網(wǎng)絡(luò)流量,推薦網(wǎng)站tinypng

HTML的標(biāo)準(zhǔn)結(jié)構(gòu)

html復(fù)制代碼<!DOCTYPE html>
<html>
  <head>
    <!-- 必須聲明 utf-8 編碼格式 -->
    <meta charset="utf-8">
    <!-- keywords 關(guān)鍵詞 和 Description 頁面描述 便于搜索引擎檢索，不強制使用 -->
    <meta name="Keywords" Content=”關(guān)鍵詞1,關(guān)鍵詞2,關(guān)鍵詞3,關(guān)鍵詞4″>
    <meta name="Description" Content=”頁面描述″>
    <!-- 移動端必須使用 viewport 適配需要, PC 看場景需要使用 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <!-- 推薦手動引入指定路徑 favicon  -->
    <link rel="shortcut icon" href="path/to/favicon.ico">
    <!-- 樣式文件必須以外鏈形式在此處引入 -->
    <link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
    <!-- 內(nèi)聯(lián)樣式 -->
    <style type="text/css">
      .warp {
        margin: 0;
        padding: 0;
      }
    </style> -->
    <!-- 頁面標(biāo)題不能為空 -->
    <title>頁面標(biāo)題</title>
  </head>
  <body>
  <!-- 頁面主體 -->
    <div class="warp">
    <header>頂部內(nèi)容區(qū)域，比如：菜單頭</header>
    <div class="content">主內(nèi)容區(qū)域</div>
    <footer>頂部頁尾區(qū)域，比如：備案號</footer>
    </div>
 
    <!-- JavaScript 文件在此處引入 -->
    <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
  </body>
</html>

不同模塊區(qū)域可使用簡要備注標(biāo)識模塊內(nèi)容
HTML 標(biāo)簽語義化使結(jié)構(gòu)清晰，比如：
CSS 外鏈引入必須放在中
JS 外鏈引入必須放在中
省略圖像、媒體文件、樣式表和腳本等嵌入式資源 URL 協(xié)議頭部聲明 ( http:// , https:// )，用//代替。
favicon 在未指定 favicon 時，大多數(shù)瀏覽器會請求 Web Server 根目錄下的 favicon.ico 。為了保證 favicon 可訪問，避免404，必須遵循以下兩種方法之一：1。在 Web Server 根目錄放置 favicon.ico 文件，2。使用 link 指定 favicon

HTML標(biāo)簽使用守則

標(biāo)簽小寫

原生 HTML 標(biāo)簽元素小寫使用，自定義組件使用小駝峰命名（自定義標(biāo)簽避免和原生標(biāo)簽同名）

html復(fù)制代碼<!-- 錯誤 ? -->
<DIV></DIV>
<SPAN></SPAN>  
 
<!-- 正確 ? -->
<div></div>  
<p></p> 
 
<!-- 自定義組件 -->
<shareDialog><shareDialog/>

套用規(guī)則

禁止在行內(nèi)元素中嵌套塊級元素??

html復(fù)制代碼<!-- 錯誤的嵌套 ? -->
<span><div></div></span>  
<i><p></p></i>     
 
<!-- 正確的嵌套 ? -->
<div><span></span></div>  
<p><i></i></p>

更多標(biāo)簽使用規(guī)則介紹請查看尾部附錄

屬性定義

定義屬性賦值時，使用雙引號，禁止單雙引號混用

html復(fù)制代碼<!-- 錯誤的定義 ? -->
<input id="formTitle" type='text' placeholder="請輸入標(biāo)題">   
 
<!-- 正確的定義 ? -->
<input id="formTitle" type="text" placeholder="請輸入標(biāo)題" data="formTitle">

正確閉合

除自閉合標(biāo)簽外，所有標(biāo)簽都需正確的編寫閉合標(biāo)簽

常用自閉合標(biāo)簽： <br />、<col />、<img />、<input />、<link />、<meta />、<keygen />

ID、Class 命名使用規(guī)范

ID 和 Class 取通用且有意義的名字；

使用連字符 - 作為 ID、Class 名稱界定符，不要駝峰命名法和下劃線；

避免選擇器嵌套層級過多，盡量少于 3 級；

使用命名空間防止命名沖突，利于維護；

css復(fù)制代碼/* 不推薦: 無意義 不易理解 */
#yee-1901 {}
#meunBtn {}
.login_input {}
 
/* 推薦: 明確詳細(xì) */
#gallery {}
#login {}
.login-input {}
.meun-btn {}

避免選擇器和 Class、ID 疊加使用
聲明順序，相關(guān)屬性應(yīng)為一組，建議遵循：定位布局屬性 -> 盒模型屬性 -> 文本屬性 -> 視覺屬性 -> 其他屬性
對于 JS 操作相關(guān)選擇器前面需加上特殊應(yīng)用標(biāo)識前綴

css復(fù)制代碼/* 標(biāo)準(zhǔn)的聲明順序 */
.declaration-order {
  /* 布局屬性 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
 
  /* 盒模型屬性 */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;
 
  /* 文本屬性 */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  text-align: center;
 
  /* 視覺屬性 */
  background-color: #f5f5f5;
  color: #fff;
  opacity: .8;
 
  /* 其他屬性 */
  cursor: pointer;
}

圖片相關(guān)使用規(guī)范

<img/>標(biāo)簽守則

src 屬性不能為空，需添加默認(rèn)值（托底圖片路徑）
為重要圖片添加 alt 屬性，當(dāng)無法顯示圖像時，瀏覽器將顯示替代文本，便于 SEO 及用戶閱讀
為圖片標(biāo)簽增加 width 和 height 屬性，避免圖片加載從無到有，導(dǎo)致頁面抖動
大量圖片流資源，使用懶加載技術(shù)按需加載

html復(fù)制代碼<!-- 禁止 src 取值為空 -->
<img src="" />
 
<!-- 推薦 -->
<img src="xxxx" alt="xxx" style="width:100px;height:100px;" />

圖片資源守則

大小

尺寸小于 50 ×?50 的請使用字體圖標(biāo)（iconfont）或者將多個圖標(biāo)合成一張大圖使用（雪碧圖）尺寸大于 50 ×?50 的圖片，引入前先使用在線壓縮對其進(jìn)行壓縮，圖片大小盡量控制在 300kb 以內(nèi)

倍率

PC端、移動端推薦使用 2倍圖 (@2x），避免設(shè)備分辨率過高，圖片顯示失真模糊如有兼容 iPad 場景等特殊場景，可使用 3倍圖（@3x）

html復(fù)制代碼<img src="//logo@200x200.jpg" alt="xx" style="width:100px;height:100px;"/>

2倍圖：圖片展示區(qū)域大小 : 圖片實際尺寸 = 1 ：2

無論使用幾倍圖，圖片大小都需遵守上條限制

如遇圖片倍圖問題，可咨詢 @UI童鞋

性能守則

避免不必要的 DOM 操作瀏覽器遍歷 DOM 元素的代價是昂貴的。最簡單優(yōu)化 DOM 樹查詢的方案是，當(dāng)一個元素出現(xiàn)多次時，將它保存在一個變量中，來避免多次查詢 DOM 樹。

js復(fù)制代碼/* 推薦用變量保存頻繁使用的 DOM 元素*/
var ul = document.getElementsByTagName('ul')[0],
  lis = document.getElementsByTagName('ul')[0].getElementsByTagName('p')
   
/* 推薦用變量保存頻繁使用的 DOM 元素*/
var ul = document.getElementsByTagName('ul')[0],
  lis = ul.getElementsByTagName('li')

異步加載第三方內(nèi)容當(dāng)你無法保證嵌入第三方內(nèi)容比如埋點、調(diào)研等資源正常工作的時候，你需要考慮用異步加載這些代碼，避免阻塞整個頁面加載。
減少標(biāo)簽的數(shù)量編寫 HTML 代碼時，盡量避免多余的標(biāo)簽嵌套，避免 DOM樹的冗余
控制靜態(tài)資源數(shù)量

1個頁面中建議CSS文件不要超過3個（1個組件庫樣式文件、1個項目公共樣式、1個頁面樣式）； JS文件不要超過5個（1個框架文件、1個組件庫文件、1個項目公共庫文件、1個頁面腳本文件、1個埋點文件）。

編碼建議

縮進(jìn)使用 2個空格樣式建議引入 CSS reset 重置各瀏覽器自帶樣式差異 github.com/necolas/nor… JS 中字符串定義使用 '' 單引號

其他建議

保持一定的代碼潔癖，尤其在大型項目中

代碼邏輯應(yīng)當(dāng)直截了當(dāng)，清晰易讀，保持與業(yè)務(wù)邏輯與代碼一一對應(yīng)關(guān)系，減少邏輯錯誤的可能性，降低二次開發(fā)成本；
刪除過期無用代碼，減少代碼過大，造成不必要的維護成本
代碼盡量復(fù)用，擁有組件化思想
代碼命名合理化，即使不寫注釋情況下，也可以讓其他開發(fā)人員一眼明白意思
性能調(diào)至最優(yōu)，降低耦合度，避免別人做不合理的優(yōu)化時而造成的混亂
整潔的模塊邊界，明確的劃分模塊之間的邏輯邊界，盡量保證職責(zé)單一，避免功能交叉混雜
讓代碼沒有改進(jìn)的余地，在開發(fā)時把各種情況都想到了，如果有人企圖改進(jìn)它，總是會回到原點

性能檢測工具 - Lighthouse簡介 Lighthouse是一個Google開源的自動化工具，主要用于改進(jìn)網(wǎng)絡(luò)應(yīng)用的質(zhì)量。Lighthouse會對各個測試項的結(jié)果打分，并給出優(yōu)化建議，這些打分標(biāo)準(zhǔn)和優(yōu)化建議可以視為Google的網(wǎng)頁最佳實踐。

Chrome拓展程序谷歌商店安裝lighthouse后，在右上角或者菜單里點擊圖中圖標(biāo)，Options可以配置測試項目，點擊Generate report即可測試。

命令行

js復(fù)制代碼<!-- 安裝 lighthouse 組件（Node.js V5.0 或以上版本） -->
npm install -g lighthouse
<!-- 啟動測試 （測試過程中會自動打開 Chrome 完成后會在當(dāng)前目錄生成一個靜態(tài)HTML文件） -->
lighthouse https://www.baidu.com/ --view
<!-- 幫助-->
lighthouse --help

檢測結(jié)果

【附錄】常用的標(biāo)簽規(guī)范

標(biāo)簽	語義	嵌套常見錯誤	常用屬性
<a></a>	超鏈接/錨	a不可嵌套a	href,name,title,rel,target
<div></div>	塊級容器
<p></p>	段落	不能嵌套塊級元素
<span></span>	內(nèi)聯(lián)容器（行內(nèi)元素）	不可嵌套塊級容器
<form></form>	表單		action,target,method,name
<input />	輸入框	不可嵌套元素	type,name,value,checked,disabled,maxlength,readonly,accesskey
<textarea></textarea>	多行文本輸入控件		name,accesskey,disabled,readonly,rows,cols
<img />	圖像	不可嵌套元素	alt,src,width,height
<label></label>	標(biāo)簽（常用input元素定義標(biāo)注）	不可嵌套塊級容器	for
<table></table>	表格	只可嵌套表格子元素	width,align,background,cellpadding,cellspacing,summary,border
<tbody></tbody>	表格主體	只能嵌套在table內(nèi)
<thead></thead>	表頭	只能嵌套在table內(nèi)
<tr></tr>	表格行	嵌套于table或thead、tbody、tfoot
<td></td>	表格中的單元格	只用于tr	colspan,rowspan
<th></th>	表格中的標(biāo)題單元格	只用于tr	colspan,rowspan
<tfoot></tfoot>	表格表尾	只用于table
<button></button>	按鈕	不可嵌套表單、表格等塊級元素	type,disabled
<select></select>	列表框或下拉框	只能嵌套option或optgroup	name,disabled,multiple
<option></option>	select中的一個選項	只能嵌套在select內(nèi)	value,selected,disabled
<ol></ol>	有序列表	只能嵌套li
<ul></ul>	無序列表	只能嵌套li
<li></li>	無序列表項	只能嵌套在 ul 或 ol 內(nèi)
<iframe></iframe>	內(nèi)嵌一個網(wǎng)頁		frameborder,width,height,src,scrolling,name
<br />	換行
<link />	引用樣式或icon	不可嵌套任何元素	type,rel,href
<meta />	文檔信息	只用于head內(nèi)	content,http-equiv,name
<script></script>	引用腳本	不可嵌套任何元素	type,src
<style></style>	引用樣式	不可嵌套任何元素	type,media
<title></title>	文檔標(biāo)題	只用于head內(nèi)

點贊收藏支持、手留余香、與有榮焉，動動你發(fā)財?shù)男∈謫眩兄x各位大佬能留下您的足跡。

作者：StriveToY
鏈接：https://juejin.cn/post/7262378982255394873

么是小程序在線制作工具？

小程序已經(jīng)成為企業(yè)、商家乃至個人展示自身、提供服務(wù)的重要平臺。然而，對于許多人來說，從零開始開發(fā)一個小程序可能是一項既復(fù)雜又耗時的任務(wù)。這時，小程序在線制作工具就派上了用場。簡而言之，小程序在線制作工具是一種在線平臺，它為用戶提供了豐富的模板和簡易的編輯界面，讓用戶無需編寫復(fù)雜的代碼，即可快速創(chuàng)建并發(fā)布小程序。無論是想要搭建一個在線商城，還是推出一個互動游戲，甚至是制作一個展示型的小程序，這些工具都能提供一站式的解決方案。

小程序在線制作工具的最大亮點之一，就是其提供的海量模板。這些模板涵蓋了各行各業(yè)，無論是電商、餐飲、教育還是娛樂，都能找到適合的模板。用戶只需挑選心儀的模板，然后根據(jù)自身需求進(jìn)行簡單的編輯和設(shè)置，即可快速生成一個功能完善、界面精美的小程序。此外，這些工具還支持實時預(yù)覽和一鍵發(fā)布，極大地提高了制作效率。使用小程序在線制作工具，能讓你輕松擁有屬于自己的小程序，實現(xiàn)更廣泛的商業(yè)價值和影響力。

小程序在線制作工具有哪些？

易極贊提供了豐富的行業(yè)小程序模板的設(shè)計，支持可視化編輯頁面，免安裝一鍵生成。開箱即用

使用小程序模板制作數(shù)碼商城的優(yōu)勢？

使用小程序模板制作數(shù)碼商城具有諸多好處，包括節(jié)省開發(fā)時間和成本、提升用戶體驗和競爭力。

擁有一個專業(yè)的數(shù)碼商城小程序是拓展業(yè)務(wù)、提升品牌形象的關(guān)鍵。使用小程序模板來制作數(shù)碼商城，不僅省去了從零開始開發(fā)的繁瑣過程，更帶來了諸多好處。首先，模板化的設(shè)計讓商城搭建變得簡單快捷，無需專業(yè)的編程技能，即可通過簡單的操作完成商城的搭建。這大大節(jié)省了開發(fā)時間和成本，讓您能夠更快速地投入運營。

小程序模板提供了豐富的功能和樣式選擇，滿足了數(shù)碼商城的各種需求。您可以根據(jù)自己的喜好和商城特點，選擇合適的模板樣式，并輕松添加商品展示、購物車、訂單管理等功能。這些功能能夠提升用戶體驗，增強用戶粘性，幫助您的商城在眾多競爭對手中脫穎而出。此外，小程序模板還支持自定義設(shè)置，您可以根據(jù)實際需求調(diào)整商城的布局、顏色、字體等細(xì)節(jié)，使商城更具個性化和專業(yè)化。

數(shù)碼小程序案例展示

下面的小程序模板，你可以在易極贊的小程序模板庫中找到，支持一鍵發(fā)布，在線編輯，小程序數(shù)碼商城方案所見即所得。

易極贊提供近80套小程序模板案例，開箱即用，在線編輯

越來越多的平臺提供在線制作小程序的工具，通過預(yù)制的模板來創(chuàng)建微信小程序。平臺提供用戶友好的界面和預(yù)先設(shè)計好的模塊，允許你使用拖放功能來定制和建立一個小程序。比如你可以在易極贊上，選擇一個你喜歡的數(shù)碼模板，一鍵即可生成發(fā)布自己的小程序。小程序上線后將擁有如下業(yè)務(wù)功能。

微信支付：支持微信支付，方便快捷安全地完成購買。客戶可以使用微信支付輕松購買商品，無需繁瑣的注冊和支付流程。實時到賬，安全可靠，讓客戶更放心。
產(chǎn)品上架：輕松上傳和發(fā)布您的產(chǎn)品，讓更多客戶了解并購買。簡單易用的產(chǎn)品上傳功能，讓您輕松添加和管理產(chǎn)品。支持多種產(chǎn)品展示方式，如圖文詳情、視頻展示等，讓客戶更直觀地了解產(chǎn)品。
分銷功能：實現(xiàn)客戶邀請客戶，讓更多人參與您的銷售網(wǎng)絡(luò)。客戶可以通過分享商城小程序給朋友或朋友圈，邀請更多人購買。被邀請客戶可以成為您的下級分銷商，享受更多優(yōu)惠和返利。
會員管理：提供會員卡服務(wù)，吸引更多客戶并提高忠誠度,客戶可以成為會員并享受專屬優(yōu)惠和特權(quán)。會員卡可以設(shè)置不同的等級和福利，滿足不同客戶需求。
小票機打印：收到新的訂單后，小票機自動打印，
優(yōu)惠促銷功能：支持限時秒殺，團購，滿減優(yōu)惠券等常用電商功能。

數(shù)碼小程序開通制作流程

接下來，根據(jù)業(yè)務(wù)需求，自定義修改模板內(nèi)的內(nèi)容，包括文字、圖片、按鈕等，確保小程序內(nèi)容符合品牌形象和用戶需求。隨后，進(jìn)行功能模塊的調(diào)試與優(yōu)化，確保小程序運行流暢、功能完善。最后，進(jìn)行嚴(yán)格的測試，確保小程序在不同設(shè)備和網(wǎng)絡(luò)環(huán)境下均能正常運行。整個流程無需從零開始編寫代碼，大大節(jié)省了開發(fā)時間，讓您快速擁有專業(yè)級的數(shù)碼小程序。

第一步，選擇一個小程序模板，然后點擊創(chuàng)建小程序。

第二步，在線編輯小程序，修改文本和圖片，上傳產(chǎn)品等

第三步，提交到微信公眾號官網(wǎng)，提交申請小程序，并將我們創(chuàng)建的站點綁定到小程序上，這樣我們的一個數(shù)碼商城小程序就創(chuàng)建好了

數(shù)碼小程序：打造沉浸式品牌體驗新紀(jì)元

數(shù)碼小程序，不僅是您品牌與潛在客戶之間溝通的橋梁，更是展現(xiàn)品牌魅力與實力的窗口。以下，我們?yōu)槟沂緮?shù)碼小程序背后的魅力：

1，視覺盛宴：審美與設(shè)計并重
數(shù)碼小程序，首先以獨特的美學(xué)設(shè)計吸引用戶的目光。它如同一張精美的名片，讓用戶在第一時間感受到品牌的精致與獨特，進(jìn)而激發(fā)點擊與探索的欲望。

2，線上線下無縫銜接：實體店與小程序互動
對于擁有實體店的數(shù)碼品牌，小程序提供了線上線下的無縫銜接。用戶可以在小程序中輕松找到您的實體店位置，一鍵導(dǎo)航，實現(xiàn)線上線下的無縫轉(zhuǎn)換。

3，客戶至上：小程序構(gòu)建個性化服務(wù)體系
數(shù)碼小程序更是一個強大的客戶管理系統(tǒng)。通過收集用戶信息，提供個性化服務(wù)，建立長期穩(wěn)定的客戶關(guān)系，讓每一位用戶都感受到品牌的關(guān)懷與溫暖。

4，社交互動：微信生態(tài)中的活躍分子
作為微信生態(tài)的一部分，數(shù)碼小程序充分利用了社交屬性。用戶可以在小程序中分享內(nèi)容、參與活動，與好友互動，將品牌信息傳播得更遠(yuǎn)、更廣。

5，創(chuàng)新體驗：娛樂與智能的完美結(jié)合
數(shù)碼小程序不僅僅是一個購物平臺，更是一個創(chuàng)新的體驗中心。它結(jié)合了娛樂性與智能性，如推出獨特的品牌小游戲，讓用戶在互動中深入了解品牌歷史與文化，體驗與眾不同的數(shù)字化之旅。

制作一個數(shù)碼商城小程序需要多少錢

許多企業(yè)主在籌備數(shù)碼商城小程序時常常猶豫不決，擔(dān)心技術(shù)難度高、成本高昂。

如今，隨著小程序制作平臺的興起，這些擔(dān)憂已不復(fù)存在。無需專業(yè)的技術(shù)或設(shè)計背景，只需選擇一個與你業(yè)務(wù)相匹配的數(shù)碼商城小程序模板，借助小程序在線制作平臺，你可以輕松制作出一個功能齊全、設(shè)計精美的商城小程序。通過簡單的操作，替換圖片、調(diào)整文案，即可讓你的商城小程序煥然一新，快速上線。

與傳統(tǒng)的商城建設(shè)方式相比，使用數(shù)碼商城小程序制作平臺具有諸多優(yōu)勢。首先，技術(shù)門檻低，無需雇傭?qū)I(yè)技術(shù)人員，即可輕松完成商城的搭建。其次，成本投入少，平臺提供一站式服務(wù)，包括服務(wù)器托管、帶寬支持等，無需額外支付高額費用。此外，這些平臺還提供網(wǎng)站安全、備份和性能優(yōu)化等服務(wù)，讓你能夠?qū)Ｗ⒂跇I(yè)務(wù)的發(fā)展，而無需為商城的運營而煩惱。

原文出自易極贊

https://www.yjzan.com/yjznews/c02fb991.html

Shopify后臺創(chuàng)建 Buy Button 后，就可以將其添加到自己的網(wǎng)站或博客。

將嵌入代碼添加到您網(wǎng)站的源 HTML 的過程略有不同，具體取決于您希望 Buy Button 和購物車顯示的方式和位置、您的發(fā)布平臺，有時還取決于您在該平臺上使用的模版。

備注:如果您需要將嵌入代碼添加到 Shopify 以外的發(fā)布平臺（例如 Squarespace 或 WordPress.org 博客）方面的幫助，請直接聯(lián)系您的網(wǎng)站提供商或發(fā)布平臺獲取支持。

將嵌入代碼添加到 WordPress.org 博客

您可以將嵌入代碼添加到 WordPress.org 博客的各篇文章以及主頁上的菜單中。

備注:嵌入式 Buy Button 與 WordPress.org 平臺兼容，但與 WordPress.com 不兼容。本文檔介紹的是 WordPress 4.2.2。您的版本可能有所不同。您可以在 WordPress 支持網(wǎng)站上了解有關(guān) WordPress 版本的詳細(xì)信息。

將嵌入代碼添加到 WordPress 文章

步驟：

在 Shopify 中，創(chuàng)建 Buy Button，并從嵌入代碼對話框中復(fù)制其嵌入代碼（或單擊 Copy embed code to clipboard（將嵌入代碼復(fù)制到剪貼板））。

在您的 WordPress 控制面板中，單擊 Posts（文章）。

單擊 Add New（新增）以新建文章，或單擊您想顯示 Buy Button 的現(xiàn)有文章的名稱。

在 Add New Post（添加新文章）或 Edit Post（編輯文章）頁面中，將文本編輯器從 Visual（視覺）更改為 Text（文本）模式。

在編輯器的主文本字段中，將嵌入代碼粘貼到您希望顯示 Buy Button 或產(chǎn)品系列的位置。

完成后，單擊 Save Draft（保存草稿）、預(yù)覽或發(fā)布。

將嵌入代碼添加到 Wordpress 菜單

步驟：

在 WordPress dashboard（WordPress 控制面板）中，單擊外觀。

單擊自定義以打開模版編輯器，然后單擊小組件。

單擊要添加 Buy Button 或自定義購物車代碼的區(qū)域的名稱。

打開現(xiàn)有文本小組件，或依次單擊添加小組件和文本。

將嵌入代碼粘貼到文本小組件內(nèi)的主要文本字段。

保存更改。

備注:如果要更改您網(wǎng)站購物車的行為或外觀，您可以將自定義購物車代碼添加到 WordPress.org 博客主頁上的菜單中。

將嵌入代碼添加到您的 Shopify 博客

備注: Buy Button 會創(chuàng)建一個單獨的購物車。如果客戶移動至您在線商店中的不同頁面，產(chǎn)品則不會再顯示在購物車中。您可以編輯 Buy Button以直接指向結(jié)賬。

步驟：

在 Shopify 后臺中，轉(zhuǎn)到在線商店 > 博客文章。

在博客文章頁面中，單擊要編輯的博客文章的標(biāo)題，或單擊添加博客文章以創(chuàng)建新的博客文章。4. 在撰寫博客文章部分，單擊格式文本編輯器中的顯示 HTML。

5. 將您的嵌入代碼粘貼到主文本字段中。6. 單擊保存。

將嵌入代碼添加到 Squarespace

備注: Squarespace 上的部分高級自定義項是特定于模版的。Shopify 不支持這些自定義項。

您可以將嵌入代碼添加到 Squarespace 的各文章中以及主頁上的菜單中。在某些情況下，您可能希望同時添加到上述兩處位置。例如，您可以在主頁上嵌入購物車，以便接收來自嵌入各文章的 Buy Button 的購買。

步驟：

在 Squarespace 控制面板中，打開您要在其中添加嵌入代碼的網(wǎng)頁。

找到您希望顯示 Buy Button 或嵌入式購物車的頁面上的元素，將光標(biāo)移到頁面內(nèi)容區(qū)域上，然后單擊編輯。

單擊要添加嵌入代碼的插入點。

在內(nèi)容塊對話框中的更多部分中，單擊代碼。

在 Shopify 后臺，復(fù)制嵌入代碼對話框中的嵌入代碼。

在您的 Squarespace 控制面板中，將嵌入代碼粘貼到代碼對話框中。請務(wù)必將文本字段設(shè)置為接收 HTML。

在 EDIT CODE（編輯代碼）對話框中單擊 APPLY（應(yīng)用）。

再次單擊頁面編輯器上的保存。由于 Squarespace 在其控制面板中禁用了 JavaScript，因此您需要單獨預(yù)覽頁面才能查看您添加的 Buy Button 或嵌入式購物車。

如果您完成了步驟，但 Buy Button 并未加載，則您可能需要禁用 Ajax 加載。要查看更多詳細(xì)信息，請轉(zhuǎn)到啟用或禁用 Ajax。

備注:如果您將嵌入式購物車添加到 Squarespace 主頁上的菜單中，它將接收來自您嵌入各文章的 Buy Button 的訂單。

將嵌入代碼添加到 Wix

在 Shopify 后臺內(nèi)創(chuàng)建 Buy Button 或產(chǎn)品系列后，您可以使用 Wix 網(wǎng)站編輯器將其添加到您的 Wix 網(wǎng)站。

備注: 如果您想為多個產(chǎn)品或產(chǎn)品系列嵌入 Buy Button，則需要先編輯嵌入代碼，然后再將其添加到 Wix HTML 代碼小組件。如果您在沒有編輯嵌入代碼的情況下將多個 Buy Button 嵌入到您的 Wix 網(wǎng)站中，那么當(dāng)客戶嘗試購買多個產(chǎn)品時，將會看到每件產(chǎn)品對應(yīng)一個單獨的購物車。

如果您想在不編輯嵌入代碼的情況下在您的 Wix 網(wǎng)站上顯示多種產(chǎn)品，則可以嵌入產(chǎn)品系列。您可以在 Shopify 后臺內(nèi)為您想顯示在 Wix 上的產(chǎn)品創(chuàng)建新的產(chǎn)品系列。

步驟：

在 Shopify 后臺中，為產(chǎn)品或產(chǎn)品系列創(chuàng)建 Buy Button，然后復(fù)制其嵌入代碼。

從您的 Wix 帳戶中，在 My Sites（我的網(wǎng)站）部分中找到您想編輯的網(wǎng)站，然后單擊 Edit Site（編輯網(wǎng)站）。

在 Wix 網(wǎng)站編輯器中，單擊 + 按鈕，然后單擊更多。

單擊 HTML 代碼以將 HTML 代碼小組件添加到頁面中。

單擊 Enter Code（輸入代碼）。

在 HTML Settings（HTML 設(shè)置）對話框中，將 Buy Button 或產(chǎn)品系列的嵌入代碼粘貼到 Add your code here（在此處添加您的代碼）字段中，然后單擊 Update（更新）。

調(diào)整 HTML 代碼小部件的大小以適應(yīng)其內(nèi)容。如果要創(chuàng)建購物車嵌入代碼，請確保購物車標(biāo)簽顯示在正確的位置。

完成后，單擊保存。

嵌入多個產(chǎn)品或產(chǎn)品系列

步驟：