一鍵自動化部落格釋出工具,用過的人都說好(51cto篇)

flydean發表於2024-05-15

51cto是一個優秀的部落格平臺，今天給大家講解一下blog-auto-publishing-tools如何自動釋出部落格到51cto上。

當然在實現過程中有可能會遇到各種困難，不過不用擔心，我們一個個來解決。

前提條件

前提條件當然是先下載 blog-auto-publishing-tools這個部落格自動釋出工具,地址如下：https://github.com/ddean2009/blog-auto-publishing-tools

51cto的實現

51cto的實現相對而言比較複雜一點，因為他的選項比較多，實現方式跟其他平臺也不太一樣。

標題輸入

首先來看下它的標題。

51cto的標題還是比較標準的，他帶有一個id，所以我們可以直接透過ID來定位到標題元素，從而輸入內容：

image-20240508231222877

具體的程式碼實現如下：

    # 文章標題
    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)

點選這個按鈕之後，會彈出一個比較複雜的框：

image-20240508234358681

這裡我們需要填寫分類，標籤等資料。

設定分類

文章分類沒什麼好說的，就是透過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檔案中定義的。

設定個人分類

個人分類是一個下拉框，這裡我們需要分兩步實現。

第一步點選個人分類下拉框。

第二步從下拉框中選擇出你要設定的個人分類。

image-20240509102330107

這裡的個人分類下拉框還是有些難度的，選擇起來比較複雜，大家可以看看我的實現程式碼：

    # 個人分類
    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會自動幫你設定一些標籤，如下所示：

image-20240509121303976

所以，我們需要先把自動設定的標籤清理掉，然後再新增上我們自己的標籤。

上面程式碼中的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需要填寫的選項還是比較多的，大家在實現的過程中需要注意。

點我檢視更多精彩內容:www.flydean.com

相關文章