【本地代碼編輯器上開發(fā)Shopify網(wǎng)站】3個(gè)步驟，輕松實(shí)現(xiàn)

時(shí)間：2023-05-26 10:09:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-05-26 10:09:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

【本地代碼編輯器上開發(fā)Shopify網(wǎng)站】3個(gè)步驟，輕松實(shí)現(xiàn)： 許多Shopify網(wǎng)站開發(fā)人員并不太習(xí)慣使用在線Shopify主題代碼編輯器，因?yàn)楣俜降拇a編輯器并不夠智能。目前常用的代碼編輯器有Sublime，Visual Studio Code，Atom等等，如果想長(zhǎng)期的開發(fā)一個(gè)Shopify項(xiàng)目，開發(fā)人員最好可以在本地環(huán)境上開發(fā)。實(shí)際上Shopify主題是可以在本地開發(fā)，但需要搭配一個(gè)工具-ThemeKit，然后再按照以下步驟設(shè)置本地開發(fā)環(huán)境就可以實(shí)現(xiàn)：

1. 安裝Theme Kit
2. 獲取API訪問權(quán)限
3. 使用Theme Kit配置主題

---

【安裝Theme Kit】

1.Mac或Linux安裝

自動(dòng)安裝方式：

curl -s

https://raw.githubusercontent.com/Shopify/themekit/master/scripts/install | sudo pythonHomebrew方式：

brew tap shopify/shopifybrew install themekit


2.Windows安裝：

自動(dòng)Powershell安裝：

(New-Object System.Net.WebClient).DownloadString("https://raw.githubusercontent.com/Shopify/themekit/master/scripts/install.ps1") | powershell -command -手動(dòng)安裝步驟：

1.在C：/ Program Files /中創(chuàng)建一個(gè)名為Theme Kit的文件夾，下載ThemeKit安裝包（步驟下方），然后將下載文件里面的程序復(fù)制到C：/ Program Files / Theme Kit中。

2.右鍵單擊【我的電腦】，然后【系統(tǒng)保護(hù)】->【高級(jí)】，點(diǎn)開【環(huán)境變量】的按鈕，在第二個(gè)面板中查找名為Path的變量，雙擊后，把變量值添加以下內(nèi)容：; C：/ Program Files / Theme Kit /，最后點(diǎn)擊確定。

3.最后驗(yàn)證是否已安裝Theme Kit工具包，請(qǐng)先打開cmd.exe并輸入Theme。如果跟下圖所示一致，恭喜你已經(jīng)安裝成功Theme Kit！

選擇合適你電腦系統(tǒng)環(huán)境的安裝包進(jìn)行下載安裝

• MacOS，64-bit，Download
• Windows，64-bit，Download
• Windows，32-bit，Download
• Linux：64-bit，Download
• Linux：32-bit，Download

---

【獲取API訪問權(quán)限】

由于需要把API密鑰添加到Theme Kit的配置中，這樣才可以讓Shopify商店和themekit之間建立連接，連接成功后，開發(fā)就可以在本地環(huán)境修改代碼并自動(dòng)同步到Shopify網(wǎng)站主題代碼庫(kù)上。

必須要商店管理員賬號(hào)登錄你的Shopify商店，從【Apps】->【Manage private apps】進(jìn)去創(chuàng)建一個(gè)私人應(yīng)用程序。新建私人應(yīng)用程序后，填寫App Name和開發(fā)郵箱后，展開顯示API權(quán)限設(shè)置，找到關(guān)于Themes的權(quán)限并改為具有讀寫訪問權(quán)限，點(diǎn)擊保存后將生成這個(gè)APP的API參數(shù)。

請(qǐng)查看Admin API信息，把Password記錄下來(lái)，稍后的步驟將會(huì)用到這個(gè)API密碼。

---

【配置現(xiàn)有主題】

要連接現(xiàn)有主題之前你需要獲取將要下載主題的ID號(hào)是多少，而獲取主題ID號(hào)的最簡(jiǎn)單方法是轉(zhuǎn)到主題編輯器，單擊“Edit Code”，然后從URL復(fù)制主題ID號(hào)-這將是http://XXXXX.myshopify.com/admin/themes/后的最后幾串?dāng)?shù)字。

下載主題命令：

theme get --password=[your-password] --store=[you-store.myshopify.com] --themeid=[your-theme-id]配置主題命令：

theme configure --password=[your-password] --store=[you-store.myshopify.com] --themeid=[your-theme-id]下載主題命令：

theme download本地監(jiān)視主題命令：當(dāng)本地文件有修改后，theme watch命令可以實(shí)時(shí)檢測(cè)代碼變化，并同步到線上主題上。

theme watch


【測(cè)試實(shí)時(shí)監(jiān)視.liquid文件】

上面只是安裝配置的相關(guān)教程，接下來(lái)才是重頭戲了，我們要嘗試在這個(gè)Sandbox項(xiàng)目上監(jiān)視主題，首先根據(jù)上面的教程輸入配置命令以及監(jiān)視命令，cmd上會(huì)出現(xiàn)以下這個(gè)信息，這代表測(cè)試主題已經(jīng)正在監(jiān)視了。

下面這張圖是Sandbox項(xiàng)目某個(gè)測(cè)試主題上的首頁(yè)效果，我們現(xiàn)在在本地文件找搭配修改導(dǎo)航的背景色的地方，然后做代碼修改，修改之前導(dǎo)航是沒有底色的。

現(xiàn)在修改導(dǎo)航背景色代碼，把導(dǎo)航加上背景顏色#ccc，代碼如下：

當(dāng)我們對(duì)theme.scss.liquid文件進(jìn)行了一些更改后，終端上可以看到以下變化。

這時(shí)候我們?cè)倩仡^刷新一下測(cè)試主題，發(fā)現(xiàn)導(dǎo)航背景上已經(jīng)是灰色，這說(shuō)明我們本地環(huán)境是有效的，實(shí)時(shí)監(jiān)視成功！

以上就是使用Theme Kit在本地編輯Shopify主題并實(shí)時(shí)預(yù)覽的說(shuō)明，大家都學(xué)會(huì)了嗎？

---