一键自动化博客发布工具,用过的人都说好(infoq篇)

infoq · 浏览次数 : 3

小编点评

## infoq 博客自动发布的实现步骤: **1. 获取封面上传元素:** * 使用 `driver.find_element(By.XPATH, "//input[@type='file']")` 获取封面输入元素。 * 通过 `file_input.send_keys(download_image(front_matter['image']))` 下载并上传封面图片。 **2. 获取文章标题元素:** * 使用 `driver.find_element(By.XPATH, '//input[@placeholder=\"请输入标题\"]')` 获取文章标题元素。 * 通过 `title.clear()` 和 `title.send_keys(front_matter['title'])` 设置标题。 **3. 获取文章内容:** * 使用 `read_file_with_footer()` 获取 markdown 版本的内容。 * 使用 `pyperclip.copy()` 将内容粘贴到剪贴板。 * 使用 `action_chains.key_down(Keys.COMMAND).send_keys('v').key_up(Keys.TAB).perform()` 模拟粘贴操作。 **4. 点击发布文章按钮:** * 使用 `driver.find_element(By.XPATH, '//div[contains(@class, \"submit-btn\")]')` 获取发布文章按钮。 * 使用 `send_button.click()` 点击发布文章按钮。 **5. 设置摘要和标签:** * 使用 `driver.find_element(By.XPATH, '//div[@class=\"summary\"]/textarea')` 获取摘要元素。 * 使用 `driver.find_element(By.XPATH, '//div[@class=\"search-tag\"]//input')` 获取标签元素。 * 按回车设置每个标签。 **6. 提交文章:** * 使用 `driver.find_element(By.XPATH, '//div[@class=\"dialog-footer-buttons\"]/div[contains(text(),\"确定\")]')` 获取提交按钮。 * 使用 `publish_button.click()` 点击提交按钮。 **注意:** * 必须先安装并配置 `webdriver` 和 `pyperclip`库。 * 代码需要根据实际情况进行调整。

正文

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

与一键自动化博客发布工具,用过的人都说好(infoq篇)相似的内容:

一键自动化博客发布工具,用过的人都说好(公众号篇)

之前收到很多朋友的要求,说是需要一个公众号的自动发布工具。 现在,它来了。 前提条件 前提条件当然是先下载 blog-auto-publishing-tools这个博客自动发布工具,地址如下:https://github.com/ddean2009/blog-auto-publishing-tool

一键自动化博客发布工具,用过的人都说好(知乎篇)

我们已经学习了很多自动化的知识了,接下来让我们看看在blog-auto-publishing-tools中是如何实现自动发送博文到知乎的。 前提条件 前提条件当然是先下载 blog-auto-publishing-tools这个博客自动发布工具,地址如下:https://github.com/dde

一键自动化博客发布工具,用过的人都说好(腾讯云篇)

虽然头条现在非常强大,但是我还是不得不吐槽一下头条的博客发布,居然不支持markdown格式。 并且在某些浏览器上还会出现编辑页面打不开的情况,让我一度怀疑是我浏览器的问题。 不过,这都不重要,重要的是blog-auto-publishing-tools这个工具可以实现头条的自动化。 前提条件 前提

一键自动化博客发布工具,用过的人都说好(腾讯云篇)

之前说过blog-auto-publishing-tools的实现方式是连到现有的浏览器中,而不是使用内置的浏览器。 其中一个很大程度的原因是像腾讯云这种博客发布平台几乎每天都需要重新登录一次,登录还需要手机扫码。所以自动化实现起来非常复杂。 所以,我们需要一个已经登录好的浏览器,来实现自动化功能。

一键自动化博客发布工具,用过的人都说好(掘金篇)

终于要讲解我们亲爱的掘金了。掘金是一个非常不错的平台。所以很多朋友会把博客发布到掘金上。 发布到掘金要填写的内容也比较多。今天给大家介绍一下如何用blog-auto-publishing-tools这个工具自动把博客发布到掘金平台上去。 前提条件 前提条件当然是先下载 blog-auto-publi

一键自动化博客发布工具,用过的人都说好(51cto篇)

51cto是一个优秀的博客平台,今天给大家讲解一下blog-auto-publishing-tools如何自动发布博客到51cto上。 当然在实现过程中有可能会遇到各种困难,不过不用担心,我们一个个来解决。 前提条件 前提条件当然是先下载 blog-auto-publishing-tools这个博客

一键自动化博客发布工具,用过的人都说好(csdn篇)

CSDN应该是大家接触到最多的博客平台了,所以一款能够发布到CSDN的自动化工具还是非常有必要的。 今天给大家讲讲自动化CSDN博客发布的思路和一些问题的解决办法。 解决问题的思路一定是最重要的,知识是死的,问题是活的,如何在工作中解决遇到的问题是我们需要面临的大问题。 前提条件 前提条件当然是先下

一键自动化博客发布工具,用过的人都说好(infoq篇)

infoq的博客发布界面也是非常简洁的。首页就只有基本的标题,内容和封面图片,所以infoq的实现也相对比较简单。 一起来看看吧。 前提条件 前提条件当然是先下载 blog-auto-publishing-tools这个博客自动发布工具,地址如下:https://github.com/ddean20

一键自动化博客发布工具,用过的人都说好(cnblogs篇)

cnblogs和其他的博客平台相比会比较复杂,需要设置的项目也比较多一些,弄懂了cnblogs的实现方式,那么你应该对selenium的整个框架使用已经烂熟于心了。 除了正常的标题,内容,摘要之外,cnblogs还需要设置个人分类,合集,投稿选项,投稿至网站分类,tags标签等内容。 要填的东西比较

一键自动化博客发布工具,用过的人都说好(阿里云篇)

阿里云有个开发者社区,入驻过的朋友可能想要把自己的博客发布到阿里云社区上。 今天我来介绍一下blog-auto-publishing-tools自动发布博客到阿里云的实现原理。 阿里云的博客发布界面比较简单,只有标题,正文,摘要,关联试用产品,发布子社区,文章图片这几个选项。 一起来看看如何实现吧。