infoq的博客發佈界面也是非常簡潔的。首頁就只有基本的標題,內容和封面圖片,所以infoq的實現也相對比較簡單。
一起來看看吧。
前提條件
前提條件當然是先下載 blog-auto-publishing-tools這個博客自動發佈工具,地址如下:https://github.com/ddean2009/blog-auto-publishing-tools
infoq的實現
接下來我會帶領大家一步步實現infoq的博客自動發佈。
上傳封面
infoq的上傳封面底層是一個input標籤:
這個是可以通過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是遠程地址的話,需要先把遠程圖片現在到本地,然後再用本地圖片來上傳。
下載圖片到本地的代碼這裏就不寫了。
感興趣的朋友可以直接去看我的代碼。
文章標題
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的界面看起來比較簡單,但是實現過程中還是有一些要注意的事項。
大家在實現的過程中需要留意。