1. 程式人生 > >hexo next主題為部落格新增分享功能

hexo next主題為部落格新增分享功能

今天心血來潮,決定給部落格新增分享功能,百度上首先是找到了使用shareSDK的分享功能,最後在實踐的過程中發現它新增時步驟比較多,新增完成後效果比較醜(就是一個長條的淺藍色按鈕),而且點選後想要退出分享比較麻煩(它的取消按鈕實在太難找了,它在頁面最下方的位置,呈現淺灰色,這個設計太反人類了,決定放棄它了)。在next主題的官方的文件中發現它自身集成了百度分享的功能,所以決定採用百度了。

解決思路

根據官方文件的說法,只需要新增/修改欄位 baidushare,值為 true。即可
官方文件
但是我自己改了之後發現並沒有出現分享功能,下面是我的主體配置檔案的部分程式碼

# Baidu Share
# Available value: # button | slide # Warning: Baidu Share does not support https. #baidushare: #type: button baidushare: true

網上也沒找到什麼靠譜的資料,沒辦法,自己來分析原始碼,找找問題在哪吧
由於hexo本身是使用node.js將Markdown渲染成靜態頁面,所以百度分享的相關程式碼必然會出現在HTML頁面中,我們通過檢視生成的HTML發現並沒有對應的分享的程式碼,也就是說配置並沒有啟用。現在初步估計問題應該是出現在Markdown轉化為HTML的過程中。
hexo中文章使用的模板是主題目錄中的layout/post.swig檔案,檔案中關於分享功能的程式碼大致出現在第16行

<div class="post-spread">
      {% if theme.jiathis %}
        {% include '_partials/share/jiathis.swig' %}
      {% elseif theme.baidushare %}
        {% include '_partials/share/baidushare.swig' %}
      {% elseif theme.add_this_id %}
        {% include '_partials/share/add-this.swig' %}
      {% elseif theme.duoshuo_shortname and theme.duoshuo_share %}
        {% include '_partials/share/duoshuo_share.swig' %}
        <!--後面的兩句是我為了使用sharesdk的分享功能而新增的,原版沒有-->
{% elseif theme.sharesdk %} {% include '_partials/share/sharesdk.swig' %} {% endif %} </div>

從程式碼上看,next主題支援許多中分享方式。它會先判斷配置檔案中對應的配置開啟與否執行相應的程式碼,其中theme代表的是主題的配置檔案。
* ps:當時我在配置sharesdk的時候發現只有註釋掉其他的分享功能才能正常啟用sharesdk,從程式碼上來看如果其他的打開了,根本就不會載入sharesdk的配置檔案,要正常使用sharesdk的分享功能,要麼修改判斷的順序,要麼在配置檔案中註釋掉其他的分享功能 *
百度分享功能載入的是檔案配置檔案目錄下的_partials/share/baidushare.swig,開啟該檔案:

{% if theme.baidushare.type === "button" %}
  <div class="bdsharebuttonbox">
    <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
    <a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣網"></a>
    <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
    <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空間"></a>
    <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
    <a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度貼吧"></a>
    <a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a>
    <a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
    <a href="#" class="bds_more" data-cmd="more"></a>
    <a class="bds_count" data-cmd="count"></a>
  </div>
....
{% endif %}

程式碼中先判斷了theme.baidushare.type的值,如果為button則執行後面的程式碼,原始程式碼中判斷了兩種情況一種是theme.baidushare.type為button,另一種是為slide,只有為這兩種值才會執行程式碼,再次檢查配置檔案看看它的型別值是否正確。最後發現baidushare以及它下面的type被註釋掉了,由於它沒有讀取到這個值,所以這兩中情況都不滿足,也就不會生成對應的分享程式碼,所以開啟這兩行的程式碼,最終這塊的配置如下:

baidushare:
  type: button
  baidushare: true

重新生成一下,發現百度分享的按鈕出現了。
至此問題解決了。

總結

百度了很久沒有解決,還是還是帶著絕望的心情看原始碼看出了點頭緒。最後我想說:RTFSC大法好(Linus大神說的:Read The Fucking Source Code….)
實際效果請移步到此

最後的最後

最後說點題外話,關於求助這件事,其實很多時候看原始碼或者幫助文件能解決我們差不多很多問題,如果實在沒有,一般你遇到的問題別人可能也遇到過,善用搜索引擎能解決所有問題,之前看到一個說法:普通程式設計師 + google = 超級程式設計師。所以在平時要養成一些習慣,仔細閱讀幫助文件,閱讀原始碼,善用搜索引擎,再實在沒轍了再上論壇提問。
下面是經常見到的在一些問答網站回答的一些縮寫,我覺得很有趣也很有用,在此將其列舉出來:
- RTFSC(Read the fucking source code)
- RTFM(Read the fucking manual)
- UTFH (“Use The Fucking Help”)
- STFW (“Search The Fucking Web”)
- STFG (“Search The Fucking Google” or “Search The Fantastic Google”)
- GIYF (“Google Is Your Friend”)
- JFGI (“Just Fucking Google It”)
- UTSL (“Use The Source Luke”—alternately, RTFS)
- RTFA (“Read The Fucking Article”—common on news forums such as Fark.com[3] and Slashdot)
- RTFE (“Read The Fucking Email”)
- RTFC (“Read The Fucking Code,” or “Reboot The Fucking Computer”)
- RTFQ (“Read The Fucking Question”)
- LMGTFY (“Let Me Google That For You”)
- WIDGI (“When In Doubt Google It” - Also occasionally ‘WIDGIT’)
- FIOTI (“Find It On The Internet”)

通常,給出這些答案的人已經通過這些辦法找到了解決問題的關鍵,正在一邊看一邊敲鍵盤。這些回覆意味著他認為:第一,你要的資訊很容易找到。第二,自已找 要比別人喂到嘴裡能學得更多。你不應該覺得這樣就被冒犯了,按黑客的標準,他沒有不理你就是在向你表示某種尊敬,你反而應該感謝他熱切地想幫助你。

相關推薦

hexo next主題部落新增分享功能

今天心血來潮,決定給部落格新增分享功能,百度上首先是找到了使用shareSDK的分享功能,最後在實踐的過程中發現它新增時步驟比較多,新增完成後效果比較醜(就是一個長條的淺藍色按鈕),而且點選後想要退出分享比較麻煩(它的取消按鈕實在太難找了,它在頁面最下方的位置,

分享部落美化(4)部落新增一個智慧的文章推薦外掛

  在上一篇部落格“部落格美化(3)為部落格新增一個漂亮的分享按鈕 "中詳細介紹目前各種社會化網站的推薦按鈕,可以讓自己或者網友快速的將你的文章分享到其他網站,增加文章的曝光度。部落格園提供了一個公共通用的平臺,非常好,為了讓自己的部落格更加智慧,更加漂亮,今天繼續像大家推薦幾款部落格外掛,用來給你的部落

分享部落美化(3)部落新增一個漂亮的分享按鈕

  在前2篇部落格“部落格美化(1)基本後臺設定與樣式設定”與"部落格美化(2)自定義部落格樣式細節"中詳細介紹了部落格樣式設定的相關問題,當然可能是自己角度的問題,不是所有人都能完全搞明白,我個人的建議是,自己一邊改,一邊測試,只要花時間,肯定沒問題,想我這種js,css小白都可以慢慢修改一點,大家也都

Django搭建部落(九):部落新增程式碼高亮顯示和 md文件支援

一、用到的模組 Markdown pygments re 安裝直接使用 pip 安裝最新版本即可 二、支援的 markdown格式 目前只支援 Typora編輯器所支援的 markdown格式。 特別需要注意的是:程式碼塊必須使

搭建自己的部落(十四):簡單的部落新增閱讀量

1、變化的部分 2、上程式碼 ul.blog-types,ul.blog-dates { list-style-type: none; } div.blog:not(:last-child) { margin-bottom: 2em; pad

hexo 給自己的部落新增萌寵或萌妹子

1. 獲取 npm install --save hexo-helper-live2d 2.選擇自己喜歡的萌妹子 可以到github中檢視,選擇喜歡的妹子造型 live2d-wi

hexo next主題深度優化之加入pjax,實現區域性重新整理,讓我們的部落上高速公路吧~~~~

特別宣告: 看不懂沒關係,往下讀,因為我寫的邏輯可能不是很清晰~ 本人原始碼在github上實在不懂的 git clone自己扣一扣,github在部落格中有連線 本人部落格mmmmmm.me 背景: 我有強迫症,遇到好的東西就想給自己整上去,在這裡想忠誠的奉勸大家一句,不要再搭

HexoHexo+Github構建個人部落 (三):新增面板主題

一、選擇主題 選擇你自己喜歡的主題 參考: 二、配置主題 1.我選擇了hexo-theme-yilia這個主題,簡潔大方,功能齊全; 2.具體新增方法: 安裝 git clone https://github.com/litten/hexo-theme-yilia.

Hexo+GitHub搭建靜態部落平臺(三)-Next主題基本使用

部落格網站搭建好後就是為自己的網站設定一個美觀的主題了, hexo 官方提供了許多官方主題,還有許多別人編寫的主題,例如:hexo-theme-jekyll 和 hexo-theme-yilia。還有很多就不一一列舉了,我將介紹也是我在使用的 Next主題 。

部落園markdown程式碼塊新增摺疊與複製按鈕

selection 和 range 先放上MDN上的解釋:selection, range 摺疊功能好寫,但是複製功能有些麻煩,最後查MDN解決了,相容性還沒有測試,簡而言之,就是獲取selection,建立一個range,把要複製的元素放到range裡,由此獲取要複製的文字,生成一個textarea並把

Hexo部落新增SEO-評論系統-閱讀統計-站長統計

原文地址:→傳送門 寫在前面 在五月出搗騰了一把個人部落格,但是剛開始只做了一些基礎設定,套路也沒摸清,基礎安裝篇請看hexo從零開始到搭建完整,裡面講到了基礎工具的安裝及blog專案的資料夾含義,以及RSS新增、域名的繫結等操作,後來想著加點功能,

hexo部落新增域名實現雙線部署(github和coding)

域名申請 首先申請一個域名 建立檔案 在hexo目錄下的source目錄下新建一個檔案CNAME,不要帶字尾,也就是沒有檔案型別,可以使用命令來建立 cd source touc

wordpress部落新增微博、微信分享等等

參考: 在使用WordPress過程中,有時為了方便閱讀著分享到主流的社交網站或微薄,需要在文章旁邊新增一些分享按鈕。 修改步驟如下: PS: 把下載好的images下面的圖示檔案上傳到你的空間中。 一 :把寫好的 share.php 上傳到你的主題目錄,然後把

Ghost 部落新增 HTTPS

購買並下載證書 我用的阿里雲的DV證書。 驗證完後可下載ZIP壓縮包。 把壓縮包內的兩個檔案.pem和.key放到伺服器裡。 一般放在/etc/ssl/private/你的域名/ 配置 N

Hexo-NexT主題新增評論功能(來必力、Hypercomments、暢言、友言)

前言 最近搗鼓著部落格的評論功能,看到很多形形色色的評論外掛,比如來必力,暢言等等之類的。功能是各不一樣,網上教程是關於某一類的評論外掛的介紹,不是很全面,所以本文主要是弄一個全面的評論外掛整合,然後分別說一下各自的優點以及不足,千挑萬選之後總有

多圖預警 | 我部落新增了十幾個功能

## 前置 最近寫了幾篇隨筆,大家都不看內容,看部落格面板

hexo next主題中遇到的問題以及各種錯誤彙總,記錄下來。

釋出文章遇到: Unhandled rejection Template render error: (unknown path) [Line 265, Column 814]   unexpected token: .     at Object._p

使用Hexo+Github搭建個人部落

個人部落格:             技術部落格:http://messi1002.top/             閱讀部落格:http://www.read1002.t

hexo next主題 站內搜尋出現異常,無法正常跳轉,跳轉時出現異常

主要看看跳轉後的url是什麼,如果url異常,就需要在站點配置檔案(注意不是主題配置檔案)下面看看你的url和永久連結設定的是否正確。如下所示: # URL ## If your site is put in a subdirectory, set url as 'http://yo

CSDN部落新增微信公眾號圖片

開啟你的部落格主頁,然後依次選擇“管理部落格”--->" 欄目管理"--->"新增自定義欄目",   只能新增一個自定義欄目,如果你已經有一個,則只能刪除或在原有的基礎上進行修改。 在編輯框裡面複製如下內容並且自定義修改。   關注微信公眾號「