51cto是一個優秀的博客平臺，今天給大家講解一下blog-auto-publishing-tools如何自動發佈博客到51cto上。
當然在實現過程中有可能會遇到各種困難，不過不用擔心，我們一個個來解決。
前提條件
前提條件當然是先下載 blog-auto-publishing-tools這個博客自動發佈工具,地址如下：https://github.com/ddean2009/blog-auto-publishing-tools
51cto的實現
51cto的實現相對而言比較複雜一點，因爲他的選項比較多，實現方式跟其他平臺也不太一樣。
標題輸入
首先來看下它的標題。
51cto的標題還是比較標準的，他帶有一個id，所以我們可以直接通過ID來定位到標題元素，從而輸入內容：
具體的代碼實現如下：
# 文章標題
title = driver.find_element(By.ID, 'title')
title.clear()
if 'title' in front_matter['title'] and front_matter['title']:
title.send_keys(front_matter['title'])
else:
title.send_keys(common_config['title'])
time.sleep(2) # 等待3秒
文章內容
接下來就是文章內容了.51cto用的是一個textArea,並沒有用到codeMirror之類的動態編輯工具。
所以我們可以簡單的調用textArea的send_keys方法，來填充內容：
# 文章內容 markdown版本
file_content = read_file_with_footer(common_config['content'])
# 找到初始的內容描述文字
content = driver.find_element(By.XPATH, '//textarea[@placeholder="請輸入正文"]')
content.send_keys(file_content)
time.sleep(15) # 等待15秒 需要進行圖片解析
這裏的textarea通過xpath來定位。
注意，一旦你輸入文章內容之後，51cto會做一個保存草稿的操作，如果你的內容裏面有圖的話，會耗時比較長的時間。
所以這裏我選擇的是sleep15秒鐘。
發佈文章
接下來我們就可以點擊發布文章按鈕了。
我們通過xpath找到發佈文章按鈕。然後點擊他。
這裏要注意的是，如果你直接通過send_button.click來點擊這個按鈕實際上是不行的。
所以，我們使用了一個小技巧。這裏我們使用ActionChains來模擬鼠標的點擊，來實現：
# 發佈文章
send_button = driver.find_element(By.XPATH, '//button[contains(@class, "edit-submit")]')
ActionChains(driver).click(send_button).perform()
time.sleep(5)
點擊這個按鈕之後，會彈出一個比較複雜的框：
這裏我們需要填寫分類，標籤等數據。
設置分類
文章分類沒什麼好說的，就是通過xpath來定位到要選擇的type元素。
然後觸發click操作。
# 文章分類
type = cto51_config['type']
type_button = driver.find_element(By.XPATH, f'//div[@class="types-select-box"]//span[contains(text(),"{type}")]')
type_button.click()
time.sleep(2)
這裏的type是在config/51cto.yaml文件中定義的。
設置個人分類
個人分類是一個下拉框，這裏我們需要分兩步實現。
第一步點擊個人分類下拉框。
第二步從下拉框中選擇出你要設置的個人分類。
這裏的個人分類下拉框還是有些難度的，選擇起來比較複雜，大家可以看看我的實現代碼：
# 個人分類
personal_type = cto51_config['personal_type']
personal_type_input = driver.find_element(By.ID, 'selfType')
personal_type_input.click()
time.sleep(1)
personal_type_element = driver.find_element(By.XPATH,f'//div[@class="el-select classification person-type"]//li[@class="el-select-dropdown__item"]/span[text()="{personal_type}"]')
personal_type_element.click()
time.sleep(1)
設置個人標籤
個人標籤可以先找到標籤輸入框，然後輸入對應的標籤，回車就可以輸入標籤了。
具體的代碼如下：
# 標籤
if 'tags' in front_matter and front_matter['tags']:
tags = front_matter['tags']
else:
tags = cto51_config['tags']
if tags:
tag_input = driver.find_element(By.ID, 'tag-input')
tag_input.clear()
for tag in tags:
tag_input.send_keys(tag)
time.sleep(1)
tag_input.send_keys(Keys.ENTER)
實際運行過程中，你會發現51cto會自動幫你設置一些標籤，如下所示：
所以，我們需要先把自動設置的標籤清理掉，然後再添加上我們自己的標籤。
上面代碼中的tag_input.clear() 是沒有效果的。
我們需要這樣做：
tag_list_div = tag_input.find_element(By.XPATH, 'preceding-sibling::div')
# 使用 JavaScript 刪除子元素
driver.execute_script("arguments[0].innerHTML = '';", tag_list_div)
通過定位到tag_input上面的tag_list_div元素，然後借用JS方法來清除裏面的子元素。
設置摘要
51cto的文章摘要是一個textarea，帶ID的那種。
所以設置摘要還是很簡單的：
# 摘要
if 'description' in front_matter['description'] and front_matter['description']:
summary = front_matter['description']
else:
summary = common_config['summary']
if summary:
summary_input = driver.find_element(By.ID, 'abstractData')
summary_input.clear()
summary_input.send_keys(summary)
設置話題
最後就是設置話題了。
同樣的，需要先點擊設置話題下拉框，然後再從下拉選項中選中要設置的話題，點擊即可。
# 話題
topic = cto51_config['topic']
if topic:
topic_input = driver.find_element(By.ID, 'subjuct')
topic_input.click()
time.sleep(1)
list_item_list = driver.find_element(By.ID, 'listItemList')
list_item_list.find_element(By.XPATH, f'//li[contains(text(),"{topic}")]').click()
最後發佈按鈕
如果一切都設置完畢之後，就可以點擊發布按鈕了。
# 發佈
if auto_publish:
publish_button = driver.find_element(By.ID, 'submitForm')
publish_button.click()
總結
51cto需要填寫的選項還是比較多的，大家在實現的過程中需要注意。