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

flydean發表於2024-05-10

infoq的部落格釋出介面也是非常簡潔的。首頁就只有基本的標題，內容和封面圖片，所以infoq的實現也相對比較簡單。

一起來看看吧。

前提條件

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

infoq的實現

接下來我會帶領大家一步步實現infoq的部落格自動釋出。

上傳封面

infoq的上傳封面底層是一個input標籤：

image-20240507210315786

這個是可以透過selenium來實現的。

我們先找到這個input標籤，然後呼叫send_keys即可實現圖片的上傳：

    # 上傳封面
    if 'image' in front_matter and front_matter['image']:
        file_input = driver.find_element(By.XPATH, "//input[@type='file']")
        # 檔案上傳不支援遠端檔案上傳，所以需要把圖片下載到本地
        file_input.send_keys(download_image(front_matter['image']))
        time.sleep(2)

這裡要注意的是，要上傳的封面是放在markdown的最上面yaml front matter裡面的。

如圖所示：

image-20240507154807745

另外要注意的是，因為部落格的上傳功能只支援本地上傳，所以如果你的image是遠端地址的話，需要先把遠端圖片現在到本地，然後再用本地圖片來上傳。

下載圖片到本地的程式碼這裡就不寫了。

感興趣的朋友可以直接去看我的程式碼。

文章標題

infoq的文章標題沒有ID，這樣的話我們就需要透過xpath來定位文章標題。

一般來說標題的地方都有placeholder，所以我們可以透過xpath來定位到標題：

    # 文章標題
    title = driver.find_element(By.XPATH, '//input[@placeholder="請輸入標題"]')
    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秒

文章內容

之前有提到segmentfault和oschina用的是codemirror，而infoq用的是ProseMirror。

這種動態富文字編輯器會根據你的輸入動態修改html內容。所以沒辦法像textArea那樣直接獲取元素之後設定他的內容。

這裡我們只能採用複製貼上的方式來設定。

怎麼定位到文章內容框呢？

因為我們現在剛剛輸入完文章標題。所以只需要輸入兩次tab鍵就可以把滑鼠定位到文章內容輸入框了。

所以，我們的程式碼如下：

# 文章內容 markdown版本
    file_content = read_file_with_footer(common_config['content'])
    # 用的是CodeMirror,不能用元素賦值的方法，所以我們使用複製的方法
    cmd_ctrl = Keys.COMMAND if sys.platform == 'darwin' else Keys.CONTROL
    # 將要貼上的文字內容複製到剪貼簿
    pyperclip.copy(file_content)
    action_chains = webdriver.ActionChains(driver)
    # tab
    action_chains.key_down(Keys.TAB).key_up(Keys.TAB).perform()
    time.sleep(2)
    # 模擬實際的貼上操作
    action_chains.key_down(cmd_ctrl).send_keys('v').key_up(cmd_ctrl).perform()
    time.sleep(3)  # 等待3秒

點發布文章按鈕

點選發布文章按鈕，這個比較簡單，直接根據class的名字獲取到對應的元素即可：

    # 釋出文章
    send_button = driver.find_element(By.XPATH, '//div[contains(@class, "submit-btn")]')
    send_button.click()
    time.sleep(2)

設定摘要

點完釋出文章按鈕，會出現一個彈出框，在彈出框裡面可以設定摘要和標籤等資訊。

摘要部分是一個textarea，我們可以透過xpath的方式定位到它：

    if summary:
        summary_input = driver.find_element(By.XPATH, '//div[@class="summary"]/textarea')
        summary_input.clear()
        summary_input.send_keys(summary)
    time.sleep(2)

設定標籤

標籤是一個input，這裡我們也是透過xpath來定位：

    if tags:
        for tag in tags:
            tag_input = driver.find_element(By.XPATH, '//div[@class="search-tag"]//input')
            tag_input.send_keys(tag)
            time.sleep(1)
            tag_input.send_keys(Keys.ENTER)

在設定標籤的過程中，每設定完成一個，我們就按一下回車，接下來就可以設定下一個標籤了。

非常的方便。

最後的提交

最後的最後，我們就可以真正的點選提交按鈕了。

    if auto_publish:
        publish_button = driver.find_element(By.XPATH, '//div[@class="dialog-footer-buttons"]/div[contains(text(),"確定")]')
        publish_button.click()

這個提交按鈕不是很好定位，我們只能透過div的class和text來找到提交按鈕。

總結

infoq的介面看起來比較簡單，但是實現過程中還是有一些要注意的事項。

大家在實現的過程中需要留意。

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

相關文章