一種網頁開發方法及設備與流程
2024-04-12 20:07:05 2
1.本技術涉及信息技術(informat ion techno logy，i t)技術領域，尤其涉及一種網頁開發方法及設備。
背景技術：
2.在網頁開發過程中，一般是網頁設計師先完成網頁的設計稿(比如：一張網頁的圖片等)，再將該設計稿移交給前端開發工程師。之後，前端開發工程師基於設計稿中的內容，開發與該設計稿相關的網頁的代碼。在對前端開發工程師開發的代碼測試通過後，可以將該代碼對外發布，至此即完成一個網頁的開發工作。
3.由目前網頁開發的過程可知，網頁設計師和前端開發工程師之間的工作存在嚴重的割裂現象，這導致網頁設計師已經在設計軟體中做了一遍，前端開發還需要跟著設計稿再做一遍，不僅存在重複勞動，還容易由於溝通問題，導致產品和設計不一致的現象。同時，網頁設計師了解產品的邏輯，但不直接實現產品；前端開發工程師實現產品，但不了解產品的邏輯，整體配合效率較低，存在巨大的鴻溝。因此，如何提升網頁開發的質量和效率是目前亟需解決的技術問題。
技術實現要素：
4.本技術提供了一種網頁開發方法及網頁開發設備，能夠提升網頁開發的質量和效率。
5.第一方面，本技術提供一種網頁開發方法，方法包括：獲取目標網頁的設計稿；對設計稿所包含的元素依次進行行切割和/或列切割；基於對設計稿所包含的元素的切割順序，生成用於表徵每次切割所得到的各個布局塊的嵌套關係的視圖樹，其中，每個布局塊中均包括至少一個元素，每個布局塊均由至少一個行切割線和/或一個列切割線組成，元素為一段文字或一張圖片；基於視圖樹，生成視圖樹文件；基於視圖樹文件得到目標網頁。由此，該方法可以由網頁設計師設計的設計稿直接生成最終的產品，徹底解決網頁設計與前端開發之間的割裂現象。由於通過本方法可以直接由設計稿生成最終的產品，因此，設計稿更新後可以在很短時間內得到更新後的產品，解決了當前設計稿更新無法實時更新產品的問題，大大增強了產品發布迭代效率。
6.在一種可能的實現方式中，該方法還包括：基於為設計稿中包含的每段文字所分配的標識，以及，各個標識關聯的文字，生成markdown文件，其中，markdown文件中包括各個標識、各個標識關聯的文字，以及，各個標識與設計稿中包含的文字間的關聯關係。基於視圖樹文件得到目標網頁包括：基於視圖樹文件生成hugo模板文件，hugo模板文件包括網頁的層級、樣式和腳本，基於hugo模板文件和markdown文件進行組合，得到目標網頁。這樣，由設計稿生成的網頁中的文字可以由markdown控制，文字之外的內容由設計稿控制，成功地將設計與文案分離，解決了設計稿中圖片無法修改文字的困境。
7.在一種可能的實現方式中，該方法還包括：獲取用戶在markdown文件對目標文字
的更新操作；基於更新後的markdown，對目標網頁中的目標文件進行更新。由此即可以通過markdown文件對網頁中的文字進行修改。
8.在一種可能的實現方式中，基於視圖樹文件生成hugo模板文件包括：基於視圖樹文件、設計稿中布局的結構屬性和元素的樣式屬性，生成hugo模板文件。
9.在一種可能的實現方式中，結構屬性包括：設計稿中元素的位置和文字的排布模式中的至少一項。樣式屬性包括：設計稿中文字的字體、字號、顏色，設計稿的背景顏色，設計稿中邊框的粗細、圓角、陰影等中的至少一項。
10.在一種可能的實現方式中，基於視圖樹文件得到目標網頁包括：基於視圖樹文件生成超文本標記語言html文件、層疊樣式表css文件和javascr ipt文件，其中，html文件包括網頁的層級及文字；基於html文件、css文件及javascr ipt文件進行組合得到目標網頁。
11.在一種可能的實現方式中，基於視圖樹文件，生成超文本標記語言html文件，具體包括：基於視圖樹文件所表徵的每次切割所得到的各個布局塊的嵌套關係，依次為各個布局塊均分配一個《d iv》標籤，並為各個《d iv》標籤均添加一個c l ass屬性，以及，為在完成最後一次切割後所得到的各個布局塊所包含的目標元素均均分配一個標籤，並為各個目標元素標籤均添加一個c l ass屬性，以得到html文件，其中，在完成最後一次切割後所得到的各個布局塊中均包括一個元素。其中，當目標元素為文字時，目標元素的標籤為《p》標籤，當目標元素為圖片時，目標元素的標籤為《img》標籤。
12.在一種可能的實現方式中，在對設計稿所包含的元素依次進行行切割和/或列切割之前，方法還包括：對設計稿所包含的圖層和/或元素進行檢測，以得到設計稿中存在的錯誤信息，其中，錯誤信息用於指示設計稿中是否存在重疊和/或冗餘的圖層，是否存在冗餘的元素，和，是否存在格式類錯誤中的至少一項；對設計稿進行可視化處理，並顯示可視化後所得到的界面，以及，顯示錯誤信息；基於用戶的修正操作，對設計稿所包含的圖層和/或元素進行修正。
13.第二方面，本技術提供一種網頁開發設備，包括輸入接口、處理器，輸入接口與處理器連接，處理器用於通過輸入接口接收目標網頁的設計稿，處理器還用於對設計稿進行處理生成視圖樹文件，並基於視圖樹文件得到目標網頁。
14.在一種可能的實現方式中，網頁開發設備還包括顯示器，顯示器與處理器連接，處理器還用於在對設計稿進行處理之前，對設計稿的圖層和/或元素進行檢測，以得到設計稿中存在的錯誤信息，並通過顯示器顯示設計稿可視化後的界面及錯誤信息，並基於用戶的修正操作，對設計稿所包含的圖層和/或元素進行修正。
15.第三方面，本技術提供一種網頁開發裝置，包括：通信模塊和處理模塊。其中，通信模塊，用於獲取目標網頁的設計稿。處理模塊，用於對設計稿所包含的元素依次進行行切割和/或列切割。處理模塊，還用於基於對設計稿所包含的元素的切割順序，生成用於表徵每次切割所得到的各個布局塊的嵌套關係的視圖樹，其中，每個布局塊中均包括至少一個元素，每個布局塊均由至少一個行切割線和/或一個列切割線組成，元素為一段文字或一張圖片。處理模塊，還用於基於視圖樹，生成視圖樹文件。處理模塊，還用於基於視圖樹文件得到目標網頁。
16.在一種可能的實現方式中，處理模塊，還用於：基於為設計稿中包含的每段文字所分配的標識，以及，各個標識關聯的文字，生成markdown文件，其中，markdown文件中包括各
個標識、各個標識關聯的文字，以及，各個標識與設計稿中包含的文字間的關聯關係；基於視圖樹文件得到目標網頁包括：基於視圖樹文件生成hugo模板文件，hugo模板文件包括網頁的層級、樣式和腳本，基於hugo模板文件和markdown文件進行組合，得到目標網頁。
17.在一種可能的實現方式中，處理模塊，還用於：獲取用戶在markdown文件對目標文字的更新操作；基於更新後的markdown，對目標網頁中的目標文件進行更新。
18.在一種可能的實現方式中，處理模塊在基於視圖樹文件生成hugo模板文件時，具體用於：基於視圖樹、設計稿中布局的結構屬性和元素的樣式屬性，生成hugo模板文件。
19.在一種可能的實現方式中，結構屬性包括：設計稿中元素的位置和文字的排布模式中的至少一項。樣式屬性包括：設計稿中文字的字體、字號、顏色，設計稿的背景顏色，設計稿中邊框的粗細、圓角、陰影等中的至少一項。
20.在一種可能的實現方式中，處理模塊在基於視圖樹文件得到目標網頁時，具體用於：基於視圖樹文件生成超文本標記語言html文件、層疊樣式表css文件和javascr ipt文件，其中，html文件包括網頁的層級及文字；基於html文件、css文件及javascr ipt文件進行組合得到目標網頁。
21.在一種可能的實現方式中，處理模塊在基於視圖樹文件，生成超文本標記語言html文件時，具體用於：基於視圖樹文件所表徵的每次切割所得到的各個布局塊的嵌套關係，依次為各個布局塊均分配一個《d iv》標籤，並為各個《d iv》標籤均添加一個c l ass屬性，以及，為在完成最後一次切割後所得到的各個布局塊所包含的目標元素均均分配一個標籤，並為各個目標元素標籤均添加一個c l ass屬性，以得到html文件，其中，在完成最後一次切割後所得到的各個布局塊中均包括一個元素；其中，當目標元素為文字時，目標元素的標籤為《p》標籤，當目標元素為圖片時，目標元素的標籤為《img》標籤。
22.在一種可能的實現方式中，處理模塊在對設計稿所包含的元素依次進行行切割和/或列切割之前，還用於：對設計稿所包含的圖層和/或元素進行檢測，以得到設計稿中存在的錯誤信息，其中，錯誤信息用於指示設計稿中是否存在重疊和/或冗餘的圖層，是否存在冗餘的元素，和，是否存在格式類錯誤中的至少一項；對設計稿進行可視化處理，並顯示可視化後所得到的界面，以及，顯示錯誤信息；基於用戶的修正操作，對設計稿所包含的圖層和/或元素進行修正。
23.第四方面，本技術提供一種計算機可讀存儲介質，計算機可讀存儲介質存儲有電腦程式，當電腦程式在處理器上運行時，使得處理器執行第一方面或第一方面的任一種可能的實現方式所描述的方法。
24.第五方面，本技術提供一種電腦程式產品，當電腦程式產品在處理器上運行時，使得處理器執行第一方面或第一方面的任一種可能的實現方式所描述的方法。
25.可以理解的是，上述第二方面至第五方面的有益效果可以參見上述第一方面中的相關描述，在此不再贅述。
附圖說明
26.圖1是本技術實施例提供的一種網頁開發方法的流程示意圖；
27.圖2是本技術實施例提供的另一種網頁開發方法的流程示意圖；
28.圖3是本技術實施例提供的一種對設計稿進行可視化後的界面進行行列切割後的
示意圖，以及視圖樹和視圖樹文件的示意圖；
29.圖4是本技術實施例提供的一種對設計稿中的內容進行修正的過程示意圖；
30.圖5是本技術實施例提供的一種對設計稿進行可視化後的界面示意圖；
31.圖6是本技術實施例提供的一種對可視化後的設計稿進行檢測後的界面示意圖；
32.圖7是本技術實施例提供的另一種對可視化後的設計稿進行檢測後的界面示意圖；
33.圖8是本技術實施例提供的一種對設計稿進行可視化後的界面示意圖；
34.圖9是本技術實施例提供的一種在對設計稿進行可視化後修改為文字分配的標識的過程示意圖；
35.圖10是本技術實施例提供的一種網頁開發裝置的結構示意圖；
36.圖11是本技術實施例提供的一種網頁開發設備的結構示意圖。
具體實施方式
37.本文中術語「和/或」，是一種描述關聯對象的關聯關係，表示可以存在三種關係，例如，a和/或b，可以表示：單獨存在a，同時存在a和b，單獨存在b這三種情況。本文中符號「/」表示關聯對象是或者的關係，例如a/b表示a或者b。
38.本文中的說明書和權利要求書中的術語「第一」和「第二」等是用於區別不同的對象，而不是用於描述對象的特定順序。例如，第一響應消息和第二響應消息等是用於區別不同的響應消息，而不是用於描述響應消息的特定順序。
39.在本技術實施例中，「示例性的」或者「例如」等詞用於表示作例子、例證或說明。本技術實施例中被描述為「示例性的」或者「例如」的任何實施例或設計方案不應被解釋為比其它實施例或設計方案更優選或更具優勢。確切而言，使用「示例性的」或者「例如」等詞旨在以具體方式呈現相關概念。
40.在本技術實施例的描述中，除非另有說明，「多個」的含義是指兩個或者兩個以上，例如，多個處理單元是指兩個或者兩個以上的處理單元等；多個元件是指兩個或者兩個以上的元件等。
41.為了便於理解本技術實施例，首先，對本技術涉及的部分術語進行解釋說明。
42.(1)靜態網站生成器
43.靜態網站生成器是指可以將用戶提供的數據文件、國際化語言包、配置、布局模板、靜態文件，以及用markdown編寫的內容，處理成一個完整的靜態網站的組件。
44.(2)網頁的設計稿
45.網頁的設計稿可以理解為是網頁設計師通過網頁設計軟體設計的網頁的圖片。
46.(3)設計稿生成代碼
47.設計稿生成代碼是低代碼的分支，簡單來說就是根據一張設計稿自動生成前端用戶界面(user interface，ui)代碼，專門解決/降低前端開發的重複勞動。
48.(4)hugo
49.hugo是用go程式語言編寫的開源靜態網站生成器，在很短時間就能生成一個網站(比如：每頁少於1毫秒等)，被稱為「世界上最快的網站構建框架」。
50.(5)markdown
51.markdown是一種輕量級標記語言，它允許人們使用易讀易寫的純文本格式編寫文檔，然後轉換成有效的超文本標記語言(hyper text markup l anguage，html)文檔或者擴展的超文本標記語言(extens ib le hyper text markup l anguage，xhtml)文檔。
52.(6)超文本標記語言(hyper text markup l anguage，html)
53.html一種用於創建網頁的標準標記語言。網頁瀏覽器可以讀取html文件，並將其渲染成可視化網頁。
54.(7)層疊樣式表(cascad ing sty le sheets，css)
55.css是一種用來為結構化文檔添加樣式(字體、間距和顏色等)的計算機語言，由全球資訊網聯盟(wor ld wide web consort ium，w3c)定義和維護。示例性的，結構化文檔可以為：html文檔，或者，可擴展標記語言(extens ib le markup l anguage，xml)應用。
56.(8)javascr ipt
57.javascr ipt是一門基於原型和頭等函數的多範式高級解釋型程式語言，它支持面向對象程序設計、指令式編程和函數式編程，提供方法來操控文本、數組、日期以及正則表達式等。
58.接下來，對本技術實施例提供的技術方案進行介紹。
59.示例性的，圖1示出了一種網頁開發方法的流程。如圖1所示，在s101，網頁設計師在通過網頁設計軟體完成網頁的設計稿後，可以將該設計稿上傳至能夠智能生成代碼的平臺，比如：imgcook、codefun等。在s102，平臺可以自動對設計稿進行分析處理，並生成一部分可以參考的css代碼和html代碼。這些代碼用於供前端工程師參考，這些代碼中會有較多冗餘信息。在s103，前端開發工程師可以在平臺上拷貝其所需的代碼，以輔助開發網頁代碼，並完成網頁代碼的開發。在s104，前端開發工程師在完成網頁代碼的開發後，可以進行自驗，在自驗通過後，可以進入到測試階段。在s105，在對前端開發工程師開發的網頁代碼測試通過後，可以將該網頁代碼發布至外部，至此即完成網頁開發工作。
60.在圖1所示的網頁開發流程中，基於設計稿生成的css代碼和html代碼需要前端開發工程師拷貝或者下載後進一步開發，一定程度上減輕了前端開發工程師的工作壓力，但是沒有從根本上解決設計與開發工作之間的割裂現象。另外，在設計稿反覆修改的場景裡，由修改前的設計稿生成的代碼與由修改後的設計稿生成的代碼間差異較大，導致前端開發工程師不能直接使用原有的代碼，反而會降低了前端開發工程師的開發效率。同時，往往在設計稿更新後，需要重新走一遍圖1所示的流程，存在不少重複勞動，容易出錯，網頁設計師和前端開發工程師之間的配合效率低，設計稿更新後無法實時更新產品。
61.有鑑於此，本技術實施例提供了另一種網頁開發方法，該方法可以由網頁設計師設計的設計稿直接生成最終的產品，徹底解決網頁設計與前端開發之間的割裂現象。由於通過本方法可以直接由設計稿生成最終的產品，因此，設計稿更新後可以在很短時間內得到更新後的產品，解決了當前設計稿更新無法實時更新產品的問題，大大增強了產品發布迭代效率。
62.示例性的，圖2示出了本技術實施例提供的另一種網頁開發方法的流程。可以理解，該方法可以通過任何具有計算、處理能力的裝置、設備、平臺、設備集群來執行。當然也可以通過某些應用程式(app l icat ion，app)等軟體執行，此時，這些軟體可以配置在計算設備(比如電腦、伺服器等)中。為便於敘述，下面以計算設備執行為例進行描述。如圖2所
示，該網頁開發方法可以包括以下步驟：
63.s201、獲取目標網頁的設計稿。
64.本實施中，網頁設計師可以利用網頁設計軟體對目標網頁進行設計，以得到目標網頁的設計稿。之後，網頁設計師可以將該設計稿上傳至計算設備中。這樣，計算設備即可以獲取到網頁的設計稿。
65.s202、對設計稿所包含的元素依次進行行切割和/或列切割。
66.本實施例中，可以基於行列切割布局算法，對設計稿的所包含的元素(比如：文字、圖片等)進行行切割和/或切割。具體地，可以先從設計稿的頂部，自上而下或者自下而上依次逐行對設計稿中包含的文字和圖片進行切割，以得到n行。其中，每行中均包括文字和/圖片。接著，對於每一行，均可以從左至右或者從右至左依次對每行中包含的文字和圖片進行切割，以得到m列。其中，每列中均包括文字或圖片。當然，也可以在切割出一行後，立馬就對該行進行列切割，或者，在切割出幾行後，再對分別對各行進行列切割，具體可根據實際情況而定，此處不做限定。
67.舉例來說，如圖3所示，在圖3的(a)中，數字為切割的順序，首先，其從上邊第一行切割一次，接著，切割線1上邊的行進行列切割，得到切割線2。當切割線1上邊的行還有其他內容時，還可以在列上再切割一次或幾次，具體可根據實際情況而定。在完成對切割線1上邊的行的列切割後，可以對切割線1下邊的行進行列切割，得到切割線3。接著，在對切割線1下邊的行和切割線3左側的內容進行行切割，可以得到切割線4和切割線5。由於切割線1下邊的行和切割線3左側的內容無法進行列切割，所以可以對切割線1下邊的行和切割線3右側的內容進行行切割，得到切割線6。至此即完成對該設計稿所所包含的文字和圖片的行切割和列切割。其中，在切割完成後，可以得到q個(q≥1)布局塊，每個布局塊中均包括一段文字或一張圖片，每個布局塊均由至少一個行切割線和/或一個列切割線組成。例如，繼續參閱圖3的(a)，切割線1下側和切割線3右側的區域可以理解為是一個布局塊。另外，在切割時，可以只有行切割，也可以只有列切割，亦可以既有行切割，也有列切割，具體可根據實際情況而定，此處不做限定。
68.s203、基於對設計稿所包含的元素的切割順序，生成用於表徵每次切割所得到的各個布局塊的嵌套關係的視圖樹，其中，每個布局塊中均包括至少一個元素，每個布局塊均由至少一個行切割線和/或一個列切割線組成，元素為一段文字或一張圖片。
69.本實施例中，在完成對設計稿所包含的原因的行切割和列切割後，可以基於對設計稿所包含的元素的切割順序，生成用於表徵每次切割所得到的各個布局塊的嵌套關係的視圖樹。其中，每個布局塊中均包括至少一個元素，每個布局塊均由至少一個行切割線和/或一個列切割線組成，元素為一段文字或一張圖片。
70.舉例來說，繼續參閱圖3，圖3的(b)是基於圖3的(a)中的切割順序生成的視圖樹。在圖3的(b)中，行布局表示一次行切割，列布局表示一次列切割。在圖3中，自上而下來看，在經過一次行切割後，可以得到兩個可以進行列切割的布局塊，即在圖3的(a)中，在切割線1上方和下方的兩個布局塊。接著，對於切割線1上方的布局塊，可以進行一次列切割，得到一個包含有圖片的布局塊，即切割線1的上方和切割線2的右側圍成的區域，以及，得到一個包含有一段文字的布局塊，即切割線1的上方和切割線2的左側圍成的區域。對於切割線1上方的布局塊，在完成一次列切割後，已無法在進行行切割或列切割，因此，可以結束。
71.對於切割線1下方的布局塊，同樣可以進行一次列切割，得到一個包含有三段文字的布局塊，即切割線1的下方和切割線3的左側圍成的區域，以及，得到一個包含有兩段文字的布局塊，即切割線1的下方和切割線3的右側圍成的區域。對於切割線1下方的布局塊，在完成一次列切割後，對於得到的兩個布局塊均可以在進行行切割，因此，可以繼續行切割。
72.對於切割線1的下方和切割線3的左側圍成的區域對應的布局塊，可以進行一次行切割，得到一個包含有一段文字的布局塊，即切割線1的下方、切割線3的左側和切割線4上方圍成的區域，以及，得到一個包含有兩段文字的布局塊，即切割線4的下方和切割線3的左側圍成的區域。對於切割線4的下方和切割線3的左側圍成的區域對應的布局塊，可以繼續進行行切割，切割後可以得到兩個包含有一段文字的布局塊，即切割線4的下方、切割線3的左側和切割線5的上方圍成的區域，與，切割線5的下方和切割線3的左側圍成的區域。
73.對於切割線1的下方和切割線3的右側圍成的區域對應的布局塊，可以進行一次行切割，得到一兩個包含有一段文字的布局塊，即切割線1的下方、切割線3的右側和切割線6上方圍成的區域，與，切割線6的下方和切割線3的右側圍成的區域。由上述描述即可以獲知到圖3的(b)所示的視圖樹所表徵的按照圖3的(a)中的切割順序切割時，每次切割所得到的各個布局塊間的嵌套關係。
74.s204、基於視圖樹，生成視圖樹文件。
75.本實施例中，在得到視圖樹後，可以基於該視圖樹生成視圖樹文件。其中，視圖樹文件指示了具體的每次切割所得到的布局塊的嵌套布局。舉例來說，繼續參閱圖3，圖3的(c)為生成的視圖樹文件。在圖3的(c)中，自上而下表示，在容器(container)31中嵌套有container32和33。在container32中嵌套有一段文字和一張圖片，在container33中嵌套有container34和35。在container34中嵌套有兩段文字。在container35中嵌套有container36和一段文字。在container36中嵌套有兩段文字。
76.s205、基於視圖樹文件，得到目標網頁。
77.本實施例中，在得到視圖樹文件後，可以通過該視圖樹文件，生成超文本標記語言html文件、層疊樣式表css文件和javascr ipt文件。其中，html文件包括網頁的層級及文字。接著，可以對html文件、css文件及javascr ipt文件進行組合，以得到目標網頁。
78.示例性的，在生成html文件時，可以基於視圖樹文件所表徵的每次切割所得到的各個布局塊的嵌套關係，依次為各個布局塊均分配一個《d iv》標籤，並為各個《d iv》標籤均添加一個c l ass屬性，以及，為在完成最後一次切割後所得到的各個布局塊所包含的目標元素均均分配一個標籤，並為各個目標元素標籤均添加一個c l ass屬性，以得到html文件。其中，在完成最後一次切割後所得到的各個布局塊中均包括一個元素。另外，當目標元素為文字時，目標元素的標籤為《p》標籤，當目標元素為圖片時，目標元素的標籤為《img》標籤。
79.在生成css文件時，可以對設計稿進行掃描，以得到設計稿所包含的元素的樣式屬性，比如：設計稿中文字的字體、字號、顏色，設計稿的背景顏色，設計稿中邊框的粗細、圓角、陰影等。本實施例中，對於樣式屬性所包含的內容可以根據實際需要進行選擇，比如可以僅包含設計稿中文字的字體，或者，僅包含設計稿中文字的字號，或者，僅包含設計稿中文字的顏色，或者，僅包含設計稿的背景顏色，或者，僅包含設計稿中邊框的粗細，或者，僅包含設計稿中邊框的圓角，或者，僅包含設計稿中邊框的陰影。當然，為了能夠提升最終得
到的網頁的質量和觀感，樣式屬性裡最好是包含多種內容，具體可根據實際情況而定，此處不做限定。
80.在一些實施例中，為了便於後續能夠對網頁中的文字進行修改，還可以先對設計稿中包含的文字進行識別，再為設計稿中包含的每段文字均分配一個標識。然後，在將為設計稿中包含的每段文字所分配的標識，以及，各個標識關聯的文字，添加至markdown目標中，以生成markdown文件。其中，markdown文件中包括各個標識、各個標識關聯的文字，以及，各個標識與設計稿中包含的文字間的關聯關係。示例性的，markdown文件中所包含的內容可以如下所示：
[0081][0082]
另外，還可以基於視圖樹文件生成hugo模板文件。示例性的，可以對設計稿進行掃描，以得到設計稿中布局的結構屬性和元素的樣式屬性。然後，在基於視圖樹文件所表徵的每次切割所得到的各個布局塊的嵌套關係、掃描到的結構屬性和樣式屬性添加至預設的模板文件中，從而得到hugo模板文件。其中，hugo模板文件包括網頁的層級、樣式和腳本。結構屬性可以包括：設計稿中元素(比如文字和/或圖片等)的位置、文字的排布模式，等等。
[0083]
然後，在通過hugo引擎將hugo模板文件和markdown文件進行組合，從而得到目標網頁。示例性的，可以將markdown文件中標識的值添加至hugo模板文件中相應標識的位置，以得到目標網頁。這樣，由設計稿生成的網頁中的文字可以由markdown控制，文字之外的內容由設計稿控制，成功地將設計與文案分離，解決了設計稿中圖片無法修改文字的困境。
[0084]
由此，該方法可以由網頁設計師設計的設計稿直接生成最終的產品，徹底解決網頁設計與前端開發之間的割裂現象。由於通過本方法可以直接由設計稿生成最終的產品，因此，設計稿更新後可以在很短時間內得到更新後的產品，解決了當前設計稿更新無法實時更新產品的問題，大大增強了產品發布迭代效率。
[0085]
在一些實施例中，當採用hugo模板文件和markdown文件生成目標網頁時，用戶可以通過markdown文件對目標網頁中的文字進行修改。具體地，用戶可以打開markdown文件，並選擇器所需更改的文字，並進行更改。之後，計算設備在獲取到用戶在markdown文件對目標文字的更新操作後，可以基於更新後的markdown文件，對目標網頁中的目標文件進行更新。示例性的，計算設備可以將更新後的markdown文件和原有的hugo模板文件進行組合，以生成新的網頁。
[0086]
在一些實施例中，在執行前述的s202時，計算設備識別出的設計稿中的內容，可能會與網頁設計師所設計的內容有存在一些偏差。如果不對這些偏差進行調整，後續在生成目標網頁時，可能會出現預期與實際不符的情況。為避免這種情況出現，計算設備可以先對設計稿進行預處理，並將處理的結果呈現給網頁設計師或其他工作人員，在這些人員修改和/或確認無誤後，計算設備在基於這些人員確認的內容，執行s202。具體地，如圖4所示，可以包括以下步驟：
[0087]
s401、對設計稿所包含的圖層和/或元素進行檢測，以得到設計稿中存在的錯誤信息，錯誤信息用於指示設計稿中是否存在重疊和/或冗餘的圖層，是否存在冗餘的元素，和，是否存在格式類錯誤中的至少一項。
[0088]
本實施例中，計算設備可以對設計稿中包含的圖層和/或元素進行檢測，以得到設計稿中存在的錯誤信息。示例性的，錯誤信息可以用於指示設計稿中是否存在重疊和/或冗餘的圖層，是否存在冗餘的元素，和，是否存在格式類錯誤中的任意一個。另外，錯誤信息也可以用於指示設計稿中是否存在重疊和/或冗餘的圖層，是否存在冗餘的元素，和，是否存在格式類錯誤中的任意兩個。此外，錯誤信息亦可以用於指示設計稿中是否存在重疊和/或冗餘的圖層，是否存在冗餘的元素，和，是否存在格式類錯誤。
[0089]
在一些實施例中，當錯誤信息中未指示設計稿中是否存在重疊和/或冗餘的圖層時，在後續生成的目標網頁中可能會存在圖層冗餘，導致呈現給用戶的頁面出現錯誤，影響網頁的質量和觀感，因此，錯誤信息最好可以指示設計稿中是否存在重疊和/或冗餘的圖層。當錯誤信息中未指示設計稿中是否存在冗餘的元素時，在後續生成的目標網頁中可能會存在冗餘的元素，比如某個文字距離網頁中所有的內容均較遠，其單獨出現在網頁中的某個位置，導致呈現給用戶的頁面出現錯誤，影響網頁的質量和觀感，因此，錯誤信息最好可以指示設計稿中是否存在冗餘的元素。當錯誤信息中未指示設計稿中是否存在格式類錯誤時，在後續生成的目標網頁中可能會存在格式錯誤，導致呈現給用戶的頁面出現錯誤，影響網頁的質量和觀感，因此，錯誤信息最好可以指示設計稿中是存在格式類錯誤。另外，當錯誤信息用於指示多種信息時，各種信息的檢測順序可以根據實際需要進行設定，此處不做限定。例如，多種信息可以同時檢測，亦可以分時檢測，等等。
[0090]
作為一種可能的實現方式，在確定設計稿中是否存在重疊的圖層時，計算設備可以通過對設計稿中各個圖層的位置信息進行識別，以確定出設計稿中是否存在重疊的圖層。其中，圖層的位置信息可以包括：圖層的繪製方式和坐標。例如，當圖層1的位置信息指示其位於區域1，圖層2的位置信息指示其位於區域2中時，若區域1和區域2之間存在重疊，則可以確定圖層1和圖層2之間存在重疊。另外，在確定出存在重疊的圖層後，還可以記錄下重疊的圖層間的重疊區域的位置信息。
[0091]
在確定設計稿中是否存在冗餘信息(比如：冗餘的圖層和/或元素等)時，計算設備可以基於預設的檢測規則對設計稿進行檢測，以確定設計稿中是否存在冗餘信息。
[0092]
示例性的，在檢測是否存在冗餘的圖層時，檢測規則可以但不限於為：在設計稿中孤立的圖層為冗餘的圖層，例如：位於設計稿所對應的畫布邊緣或外部的圖層為冗餘的圖層，和/或，面積小於預設值的圖層為冗餘的圖層等。舉例來說，如該圖5所示，在設計稿的畫布51中存在圖層52、圖層53、圖層54和圖層55；其中，圖層52、圖層53和圖層54間相距比較近，但圖層55距離其他的圖層均較遠，且其處於畫布的邊緣，因此可以認為圖層55是一個孤立的圖層，即圖層55是一個冗餘的圖層。另外，在確定出存在冗餘的圖層後，還可以記錄下該冗餘的圖層的位置信息(比如：圖層的繪製方式和坐標等)。
[0093]
示例性的，在檢測是否存在冗餘的元素時，檢測規則可以但不限於為：在一個圖層中與該圖層中主要的元素分離的元素為冗餘的元素。舉例來說，繼續參閱圖5,在圖層54中存在5個元素，分別為a、b、c、d和e；其中，元素a、b、c和d距離較近，而元素e與這些元素明顯較遠，因此，元素e與元素a、b、c和d間是分離的，所以元素e為冗餘的元素。另外，在確定出存
在冗餘的元素後，還可以記錄下該冗餘的元素的位置信息(比如坐標等)。
[0094]
在確定設計稿中是否存在格式類錯誤時，計算設備可以通過對設計稿中各個圖層的位置信息進行識別，以確定出設計稿中是否存在格式類錯誤。示例性的，格式類錯誤包括對齊類(比如上下對齊、左右對齊等)錯誤、居中類(比如：橫向居中、水平居中等)錯誤等。例如，當兩個圖層處於同一行，但兩者之間存在錯位時，可以認為兩者之間存在對齊類錯誤。另外，在確定出存在格式類錯誤後，還可以記錄下存在格式類錯誤的圖層的位置信息(比如圖層的繪製方式和坐標等)。
[0095]
s402、對設計稿進行可視化處理，並顯示可視化後所得到的界面，以及，顯示得到的錯誤信息。
[0096]
本實施例中，計算設備可以對設計稿進行可視化處理，並將得到的界面顯示在與計算設備連接的顯示設備上。比如，顯示集成在計算設備上的顯示屏上等。另外，計算設備還可以顯示其得到的設計稿中存在的錯誤信息，以對用戶進行提示，從而使得用戶對錯誤信息所指示的內容進行更改。例如，如圖6所示，區域61中的內容即為對設計稿可視化得到的結果，該設計稿中包括5個圖層；區域62中的內容即為顯示的錯誤信息。在圖6中，存在1處圖層重疊，即圖層63和64重疊，1個冗餘圖層，即圖層65，1處對齊問題，即圖層63或64可能會居中對齊等。
[0097]
s403、響應於用戶下發的修正指令，對設計稿所包含的圖層和/或元素進行修正，並將修正後的界面呈現給用戶。
[0098]
本實施例中，計算設備在向用戶呈現可視化後的設計稿的界面和錯誤信息後，用戶可以通過計算設備對設計稿中存在錯誤的圖層和/或元素等進行修正，並將修正後的界面呈現給用戶。在用戶下發修正指令後，計算設備可以獲取到用戶的修正操作，並依據用戶所期望的修正方式，對設計稿中的圖層和/或元素進行修正。示例性的，為了便於用戶操作，還可以在顯示界面上顯示一些功能。例如，參閱圖7，可以在區域71中顯示一些功能，以便於用戶操作。在圖7中，用戶可以選擇圖層72和圖層73，並選擇區域71處的「合併圖層」按鈕74，即可以將圖層72和圖層73合併為一個圖層。
[0099]
由此，即完成對設計稿中所包含的圖層和/或元素的修正，使得後續生成的目標網頁與預期相符。
[0100]
在一些實施例中，為了提升生成的目標網頁的質量和觀感，在前述s202之前還可以對設計稿中的文字和圖片進行識別，並將識別到的結果呈現給用戶。之後，用戶可以確認文字與圖片間的關係，比如，確認文字是單獨的，即獨立於圖片而單獨存在，還是屬於圖片的一部分。在用戶完成確認操作後，即可以執行s202。由此以避免因文字屬於圖片而導致的無法進行行切割或列切割的問題。例如，如圖8所示，在區域81中包含有一張圖片811，在圖片中存在文字「fusion」812，該文字812與圖片811是一體的。此時，若不確定文字812是否屬於圖片811，則會將文字812和圖片811作為兩個元素，由於本實施例中切割後得到的布局塊中均是包含一段文字或一張圖片，所以對於這部分內容還是需要進行切割的，但由於文字位於圖片中，無法將兩者分離，因此會導致無法對這部分內容進行行切割或列切割；而在確認文字屬於圖片後，則可以不再對這部分內容進行切割。其中，在圖8中，當用戶確認文字812和圖片811是一體時，用戶可以先選中文字812和圖片811，然後，在選擇「合併圖片」按鈕82，以將兩者合併為一體。
[0101]
另外，當採用markdown文件時，在對文字和圖片進行識別，以及為文字分配標識後，除了可以將文字和圖片呈現給用戶，還可以將為文字分配的標識一起呈現給用戶，且將分配的標識配置在相應的文字旁邊。以便用戶可以確認為文字分配的標識是否有誤，並在有誤時，進行修正。例如，如圖9的(a)所示，文字「he l lo，wor ld」的標識為「標識1」，文字「卡片1」的標識為「標識2」，文字「卡片2」的標識為「標識4」。此時，用戶認為文字「卡片2」的標識有誤，此時，用戶可以將「標識4」修改為「標識3」，即可以得到如圖9的(b)所示的界面。在用戶完成確認操作後，即可以基於用戶確認後的內容，生成markdown文件。生成markdown文件的過程，詳見上文描述，此處不再贅述。
[0102]
可以理解的是，上述實施例中各步驟的序號的大小並不意味著執行順序的先後，各過程的執行順序應以其功能和內在邏輯確定，而不應對本技術實施例的實施過程構成任何限定。此外，在一些可能的實現方式中，上述實施例中的各步驟可以根據實際情況選擇性執行，可以部分執行，也可以全部執行，此處不做限定。
[0103]
基於上述實施例中的方法，本技術實施例提供了一種網頁開發裝置。
[0104]
示例性的，圖10示出了一種網頁開發裝置的結構。如圖10所示，該網頁開發裝置1000可以包括：通信模塊1001和處理模塊1002。其中，通信模塊1001，用於獲取目標網頁的設計稿。處理模塊1002，用於對設計稿所包含的元素依次進行行切割和/或列切割。處理模塊1002，還用於基於對設計稿所包含的元素的切割順序，生成用於表徵每次切割所得到的各個布局塊的嵌套關係的視圖樹，其中，每個布局塊中均包括至少一個元素，每個布局塊均由至少一個行切割線和/或一個列切割線組成，元素為一段文字或一張圖片。處理模塊1002，還用於基於視圖樹，生成視圖樹文件。處理模塊1002，還用於基於視圖樹文件得到目標網頁。
[0105]
在一種可能的實現方式中，處理模塊1002，還用於：基於為設計稿中包含的每段文字所分配的標識，以及，各個標識關聯的文字，生成markdown文件，其中，markdown文件中包括各個標識、各個標識關聯的文字，以及，各個標識與設計稿中包含的文字間的關聯關係；基於視圖樹文件得到目標網頁包括：基於視圖樹文件生成hugo模板文件，hugo模板文件包括網頁的層級、樣式和腳本，基於hugo模板文件和markdown文件進行組合，得到目標網頁。
[0106]
在一種可能的實現方式中，處理模塊1002，還用於：獲取用戶在markdown文件對目標文字的更新操作；基於更新後的markdown，對目標網頁中的目標文件進行更新。
[0107]
在一種可能的實現方式中，處理模塊1002在基於視圖樹文件生成hugo模板文件時，具體用於：基於視圖樹、設計稿中布局的結構屬性和元素的樣式屬性，生成hugo模板文件。
[0108]
在一種可能的實現方式中，結構屬性包括：設計稿中元素的位置和文字的排布模式中的至少一項。樣式屬性包括：設計稿中文字的字體、字號、顏色，設計稿的背景顏色，設計稿中邊框的粗細、圓角、陰影等中的至少一項。
[0109]
在一種可能的實現方式中，處理模塊1002在基於視圖樹文件得到目標網頁時，具體用於：基於視圖樹文件生成超文本標記語言html文件、層疊樣式表css文件和javascr ipt文件，其中，html文件包括網頁的層級及文字；基於html文件、css文件及javascr ipt文件進行組合得到目標網頁。
[0110]
在一種可能的實現方式中，處理模塊1002在基於視圖樹文件，生成超文本標記語
言html文件時，具體用於：基於視圖樹文件所表徵的每次切割所得到的各個布局塊的嵌套關係，依次為各個布局塊均分配一個《d iv》標籤，並為各個《d iv》標籤均添加一個c l ass屬性，以及，為在完成最後一次切割後所得到的各個布局塊所包含的目標元素均均分配一個標籤，並為各個目標元素標籤均添加一個c l ass屬性，以得到html文件，其中，在完成最後一次切割後所得到的各個布局塊中均包括一個元素；其中，當目標元素為文字時，目標元素的標籤為《p》標籤，當目標元素為圖片時，目標元素的標籤為《img》標籤。
[0111]
在一種可能的實現方式中，處理模塊1002在對設計稿所包含的元素依次進行行切割和/或列切割之前，還用於：對設計稿所包含的圖層和/或元素進行檢測，以得到設計稿中存在的錯誤信息，其中，錯誤信息用於指示設計稿中是否存在重疊和/或冗餘的圖層，是否存在冗餘的元素，和，是否存在格式類錯誤中的至少一項；對設計稿進行可視化處理，並顯示可視化後所得到的界面，以及，顯示錯誤信息；基於用戶的修正操作，對設計稿所包含的圖層和/或元素進行修正。
[0112]
應當理解的是，上述裝置用於執行上述實施例中的方法，裝置中相應的程序模塊，其實現原理和技術效果與上述方法中的描述類似，該裝置的工作過程可參考上述方法中的對應過程，此處不再贅述。
[0113]
基於上述實施例中的方法，本技術實施例提供了一種網頁開發設備。
[0114]
示例性的，圖11示出了一種網頁開發設備的結構。如圖11所示，網頁開發設備1100可以包括輸入接口1101和處理器1102。其中，輸入接口1101與處理器1102連接，處理器1102用於通過輸入接口1101接收目標網頁的設計稿，處理器1102還用於對設計稿進行處理生成視圖樹文件，並基於視圖樹文件得到目標網頁。
[0115]
在一種可能的實現方式中，網頁開發設備1100還包括顯示器1103，顯示器1103與處理器1102連接，處理器1102還用於在對設計稿進行處理之前，對設計稿的圖層和/或元素進行檢測，以得到設計稿中存在的錯誤信息，並通過顯示器1103顯示設計稿可視化後的界面及錯誤信息，並基於用戶的修正操作，對設計稿所包含的圖層和/或元素進行修正。
[0116]
可以理解的是，本技術的實施例中的處理器可以是中央處理單元(centra l process ing un it，cpu)，還可以是其他通用處理器、數位訊號處理器(d igita l s igna l processor，dsp)、專用集成電路(app l icat ion specific integrated ci rcu it，asic)、現場可編程門陣列(fie ld programmab le gate array，fpga)或者其他可編程邏輯器件、電晶體邏輯器件，硬體部件或者其任意組合。通用處理器可以是微處理器，也可以是任何常規的處理器。
[0117]
本技術的實施例中的方法步驟可以通過硬體的方式來實現，也可以由處理器執行軟體指令的方式來實現。軟體指令可以由相應的軟體模塊組成，軟體模塊可以被存放於隨機存取存儲器(random access memory，ram)、快閃記憶體、只讀存儲器(read-on ly memory，rom)、可編程只讀存儲器(programmab le rom，prom)、可擦除可編程只讀存儲器(erasab le prom，eprom)、電可擦除可編程只讀存儲器(e lectr ica l ly eprom，eeprom)、寄存器、硬碟、移動硬碟、cd-rom或者本領域熟知的任何其它形式的存儲介質中。一種示例性的存儲介質耦合至處理器，從而使處理器能夠從該存儲介質讀取信息，且可向該存儲介質寫入信息。當然，存儲介質也可以是處理器的組成部分。處理器和存儲介質可以位於asic中。
[0118]
在上述實施例中，可以全部或部分地通過軟體、硬體、固件或者其任意組合來實
現。當使用軟體實現時，可以全部或部分地以電腦程式產品的形式實現。所述電腦程式產品包括一個或多個計算機指令。在計算機上加載和執行所述電腦程式指令時，全部或部分地產生按照本技術實施例所述的流程或功能。所述計算機可以是通用計算機、專用計算機、計算機網絡、或者其他可編程裝置。所述計算機指令可以存儲在計算機可讀存儲介質中，或者通過所述計算機可讀存儲介質進行傳輸。所述計算機指令可以從一個網站站點、計算機、伺服器或數據中心通過有線(例如同軸電纜、光纖、數字用戶線(dsl))或無線(例如紅外、無線、微波等)方式向另一個網站站點、計算機、伺服器或數據中心進行傳輸。所述計算機可讀存儲介質可以是計算機能夠存取的任何可用介質或者是包含一個或多個可用介質集成的伺服器、數據中心等數據存儲設備。所述可用介質可以是磁性介質，(例如，軟盤、硬碟、磁帶)、光介質(例如，dvd)、或者半導體介質(例如固態硬碟(so l id state d i sk，ssd))等。
[0119]
可以理解的是，在本技術的實施例中涉及的各種數字編號僅為描述方便進行的區分，並不用來限制本技術的實施例的範圍。