infoq的博客發(fā)布界面也是非常簡(jiǎn)潔的。首頁就只有基本的標(biāo)題,內(nèi)容和封面圖片,所以infoq的實(shí)現(xiàn)也相對(duì)比較簡(jiǎn)單。
一起來看看吧。
前提條件當(dāng)然是先下載 blog-auto-publishing-tools這個(gè)博客自動(dòng)發(fā)布工具,地址如下:https://github.com/ddean2009/blog-auto-publishing-tools
接下來我會(huì)帶領(lǐng)大家一步步實(shí)現(xiàn)infoq的博客自動(dòng)發(fā)布。
infoq的上傳封面底層是一個(gè)input標(biāo)簽:
image-20240507210315786
這個(gè)是可以通過selenium來實(shí)現(xiàn)的。
我們先找到這個(gè)input標(biāo)簽,然后調(diào)用send_keys即可實(shí)現(xiàn)圖片的上傳:
# 上傳封面
if 'image' in front_matter and front_matter['image']:
file_input=driver.find_element(By.XPATH, "//input[@type='file']")
# 文件上傳不支持遠(yuǎn)程文件上傳,所以需要把圖片下載到本地
file_input.send_keys(download_image(front_matter['image']))
time.sleep(2)
這里要注意的是,要上傳的封面是放在markdown的最上面yaml front matter里面的。
如圖所示:
image-20240507154807745
另外要注意的是,因?yàn)椴┛偷纳蟼鞴δ苤恢С直镜厣蟼鳎匀绻愕膇mage是遠(yuǎn)程地址的話,需要先把遠(yuǎn)程圖片現(xiàn)在到本地,然后再用本地圖片來上傳。
下載圖片到本地的代碼這里就不寫了。
感興趣的朋友可以直接去看我的代碼。
infoq的文章標(biāo)題沒有ID,這樣的話我們就需要通過xpath來定位文章標(biāo)題。
一般來說標(biāo)題的地方都有placeholder,所以我們可以通過xpath來定位到標(biāo)題:
# 文章標(biāo)題
title=driver.find_element(By.XPATH, '//input[@placeholder="請(qǐng)輸入標(biāo)題"]')
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。
這種動(dòng)態(tài)富文本編輯器會(huì)根據(jù)你的輸入動(dòng)態(tài)修改html內(nèi)容。所以沒辦法像textArea那樣直接獲取元素之后設(shè)置他的內(nèi)容。
這里我們只能采用拷貝粘貼的方式來設(shè)置。
怎么定位到文章內(nèi)容框呢?
因?yàn)槲覀儸F(xiàn)在剛剛輸入完文章標(biāo)題。所以只需要輸入兩次tab鍵就可以把鼠標(biāo)定位到文章內(nèi)容輸入框了。
所以,我們的代碼如下:
# 文章內(nèi)容 markdown版本
file_content=read_file_with_footer(common_config['content'])
# 用的是CodeMirror,不能用元素賦值的方法,所以我們使用拷貝的方法
cmd_ctrl=Keys.COMMAND if sys.platform=='darwin' else Keys.CONTROL
# 將要粘貼的文本內(nèi)容復(fù)制到剪貼板
pyperclip.copy(file_content)
action_chains=webdriver.ActionChains(driver)
# tab
action_chains.key_down(Keys.TAB).key_up(Keys.TAB).perform()
time.sleep(2)
# 模擬實(shí)際的粘貼操作
action_chains.key_down(cmd_ctrl).send_keys('v').key_up(cmd_ctrl).perform()
time.sleep(3) # 等待3秒
點(diǎn)擊發(fā)布文章按鈕,這個(gè)比較簡(jiǎn)單,直接根據(jù)class的名字獲取到對(duì)應(yīng)的元素即可:
# 發(fā)布文章
send_button=driver.find_element(By.XPATH, '//div[contains(@class, "submit-btn")]')
send_button.click()
time.sleep(2)
點(diǎn)完發(fā)布文章按鈕,會(huì)出現(xiàn)一個(gè)彈出框,在彈出框里面可以設(shè)置摘要和標(biāo)簽等信息。
摘要部分是一個(gè)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)
標(biāo)簽是一個(gè)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)
在設(shè)置標(biāo)簽的過程中,每設(shè)置完成一個(gè),我們就按一下回車,接下來就可以設(shè)置下一個(gè)標(biāo)簽了。
非常的方便。
最后的最后,我們就可以真正的點(diǎn)擊提交按鈕了。
if auto_publish:
publish_button=driver.find_element(By.XPATH, '//div[@class="dialog-footer-buttons"]/div[contains(text(),"確定")]')
publish_button.click()
這個(gè)提交按鈕不是很好定位,我們只能通過div的class和text來找到提交按鈕。
infoq的界面看起來比較簡(jiǎn)單,但是實(shí)現(xiàn)過程中還是有一些要注意的事項(xiàng)。
大家在實(shí)現(xiàn)的過程中需要留意。
點(diǎn)我查看更多精彩內(nèi)容:www.flydean.com
家好鴨,又是一年開學(xué)季。今天為大家?guī)硪黄坛獭度绾未罱▊€(gè)人博客網(wǎng)站》,喜歡的同學(xué)可以研究一下。
前期準(zhǔn)備:
1、一臺(tái)云服務(wù)器
2、一個(gè)域名
3、一個(gè)博客網(wǎng)站模板
主要涉及知識(shí)點(diǎn):linux基礎(chǔ)命令,mysql基礎(chǔ)操作
步驟
1、 服務(wù)器搭建
購買一臺(tái)網(wǎng)絡(luò)云服務(wù)器,可以考慮阿里云、騰訊云、百度云等,這里以阿里云服務(wù)器舉例。
共享型價(jià)格在半年170元左右。不定期會(huì)有活動(dòng),首臺(tái)半價(jià)等。
系統(tǒng)配置CentOs6.8系統(tǒng)
可在管理控制臺(tái)查看配置購買的服務(wù)器
PS:騰訊云學(xué)生活動(dòng)10元/月(服務(wù)器加存儲(chǔ)加域名)
2、網(wǎng)絡(luò)環(huán)境部署
購買完成后,在管理端后臺(tái)更多設(shè)置里修改遠(yuǎn)程登錄密碼
重置密碼是重置遠(yuǎn)程登錄之后服務(wù)器的密碼(用戶名root)
兩個(gè)都修改完成后就可以遠(yuǎn)程連接服務(wù)器啦
在安全組里添加訪問規(guī)則,允許80,22端口訪問
1)安裝apache服務(wù)器
首先執(zhí)行yum install httpd httpd-devel
需要確認(rèn)的,填yes,以下同樣
啟動(dòng)apache執(zhí)行: /etc/init.d/httpd start
2)安裝mysql服務(wù)
執(zhí)行:yum install mysql mysql-server
啟動(dòng)mysql:/etc/init.d/mysql start
3)安裝php
yum -y install php
4)安裝php拓展
執(zhí)行:yum -y install php-mysql php-gd php-imap php-ldap php-odbc php-mbstring php-devel php-soap php-cli php-pdo
yum -y install php-mcrypt php-tidy php-xml php-xmlrpc php-pear
yum -y install php-pecl-memcache php-eaccelerator
然后重啟httpd服務(wù) service httpd restart
然后進(jìn)入默認(rèn)網(wǎng)站目錄cd /var/www/html/
然后touch index.php
然后編輯一下添加如下php代碼:
<?php
phpinfo();
?>
然后在瀏覽器輸入你的服務(wù)器公網(wǎng)ip地址就可以看到如下頁面喲,首先確認(rèn)你的防火墻已經(jīng)全部關(guān)閉了哦.
防火墻關(guān)閉命令
service iptables stop
然后關(guān)閉防火墻的開機(jī)啟動(dòng)chkconfig iptables off
同時(shí)開啟httpd和mysql的開啟啟動(dòng)
Chkconfig httpd on
Chkconfig mysqld on
接下來就可以去wordpress下載源碼包了.
3、網(wǎng)站部署
1) 下載WordPress安裝包,上傳到服務(wù)器
這是我下載的wordpress安裝包,上傳工具使用的是FileZilla Client
運(yùn)行FileZilla Client,輸入地址,賬號(hào),遠(yuǎn)程登錄密碼,端口22,快速連接
也可以通過文件>站點(diǎn)管理器>新建站點(diǎn)添加
連接成功后,將下載的wordpress壓縮吧拖到右邊/var/www/html文件夾下
好的上傳完畢。
2) 解壓安裝包,配置wordpress
好的看到我們的源碼包了,現(xiàn)在來解壓他.
發(fā)現(xiàn)沒有解壓命令,我們來安裝一下.
執(zhí)行:yum install zip
執(zhí)行:yum install unzip
安裝完成后,我們來解壓縮wordpress
進(jìn)入/var/www/html目錄
執(zhí)行:cd /var/www/html
解壓縮安裝包:unzip –x 安裝包名稱
這就解壓完畢了
這樣咱們就只剩下安裝了.
3)安裝wordpress程序
進(jìn)入mysql為wordpress創(chuàng)建一個(gè)數(shù)據(jù)庫
執(zhí)行:mysql -u root –p
需要?jiǎng)?chuàng)建數(shù)據(jù)庫密碼
執(zhí)行:SET PASSWORD FOR 'root'@'localhost'=PASSWORD('新密碼')
創(chuàng)建數(shù)據(jù)庫執(zhí)行:create database wordpress;
在網(wǎng)頁上輸入公網(wǎng)地址,進(jìn)入wordpress配置頁面,填寫好如下表單
發(fā)現(xiàn)我們不能安裝,
因?yàn)闆]有寫權(quán)限,添加權(quán)限即可
在服務(wù)器上執(zhí)行:cd /var/www/
chmod –R 777 html
再回到網(wǎng)頁,刷新
這樣就安裝好了.
這樣你就可以進(jìn)入你的博客,寫你的文章了.
至此,安裝完成,WordPress里面有很多模板,可以直接更改你博客的主題風(fēng)格,十分方便。
如果你想把網(wǎng)站掛出來讓朋友來訪問,那么你就還需要最后一步,去云購買一個(gè)域名,進(jìn)行一下地址解析。
在國(guó)內(nèi)的版權(quán)意識(shí)越來越強(qiáng),特別是一些做原創(chuàng)博客的站長(zhǎng)們。自己辛辛苦苦寫出來的東西,被別人鼠標(biāo)點(diǎn)幾下,就復(fù)制走了。有些自覺的復(fù)制者們都會(huì)帶上文章的網(wǎng)站鏈接,但是大多數(shù)的復(fù)制者們,都把文章當(dāng)成自己的了,連個(gè)鏈接也不給。
今天教大家一個(gè),別人復(fù)制網(wǎng)站的內(nèi)容,并自動(dòng)追加來源地址的方法。
javascript 代碼
<script> document.addEventListener('copy', function (event) { if (typeof window.getSelection=="undefined") return; //IE8 or earlier... var body_element=document.getElementsByTagName('body')[0]; var selection=window.getSelection(); //判斷復(fù)制的內(nèi)容的長(zhǎng)度是否大于30 //如果不大于 30 ,則不追加內(nèi)容 if (("" + selection).length < 30) return; var newdiv=document.createElement('div'); newdiv.style.position='absolute'; newdiv.style.left='-99999px'; body_element.appendChild(newdiv); newdiv.appendChild(selection.getRangeAt(0).cloneContents()); if (selection.getRangeAt(0).commonAncestorContainer.nodeName=="PRE") { newdiv.innerHTML="<pre>" + newdiv.innerHTML + "</pre>"; } // 追加的HTML代碼 // newdiv.innerHTML +="<br />原文地址: <a href='"+ document.location.href + "'>"+ document.location.href + "</a> ? Feiniaomy.com"; // 追加的TXT文字 newdiv.innerHTML +="\r\n原文地址:"+ document.location.href + "\r\n ? Feiniaomy.com"; selection.selectAllChildren(newdiv); window.setTimeout(function () { body_element.removeChild(newdiv); }, 200); }); </script>
測(cè)試,復(fù)制網(wǎng)站內(nèi)容后,會(huì)追加以下內(nèi)容
原文地址:https://www.feiniaomy.com/post/1.html ? Feiniaomy.com
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。