一鍵自動化博客發佈工具,用過的人都說好(infoq篇)

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章