自定義頁(yè)面樣式(一)

前言

本篇文章繼續(xù)講解一些hexo下next主題博客樣式的修改。主要內(nèi)容為修改首頁(yè)文章摘要樣式，文章詳情樣式，以及文章閱讀次數(shù)的統(tǒng)計(jì)深入講解，酷炫的博客背景，在首頁(yè)菜單里添加的獨(dú)立的標(biāo)簽頁(yè)，文章結(jié)尾的模版樣式修改。暫時(shí)想到了這么多，歡迎大家提出新的東西，等后面有空了再講新東西。

首頁(yè)文章摘要樣式修改

準(zhǔn)備

假設(shè)看這篇文章的人是沒(méi)有前端樣式調(diào)試基礎(chǔ)的，建議去看我上一篇文章——，看完后再繼續(xù)看這篇。

傳送門：2017年最新基于hexo搭建個(gè)人免費(fèi)博客——自定義頁(yè)面樣式一 http://www.cduyzh.com/hexo-settings-3/

查看對(duì)應(yīng)樣式

通過(guò)瀏覽器的開發(fā)者工具可以查看到首頁(yè)文章摘要對(duì)應(yīng)的CSS 可以看到header標(biāo)簽內(nèi)為文章的頭部的樣式，大家可以進(jìn)行一些修改，但是基本沒(méi)什么需要改動(dòng)的，大家可以自己DIY，

給文章首頁(yè)摘要添加陰影效果

大家看下箭頭，修改對(duì)應(yīng)的CSS樣式，進(jìn)行重寫覆蓋，修改的文件路徑如下（以我自己的為例）：

D:\hexo\blog\themes\next\source\css\_custom\custom.styl

修改代碼如下

// Custom styles.
//首頁(yè)文章陰影樣式
.post {
    margin-top: 60px;
    margin-bottom: 60px;
    padding: 25px;
    -webkit-box-shadow: 0 0 14px rgba(202, 203, 203, .5);
    -moz-box-shadow: 0 0 14px rgba(202, 203, 204, .5);
}

閱讀文章按鈕樣式修改

主要為三個(gè)CSS樣式的修改

.post-button .btn
.post-button .btn a
.btn:hover, .post-button .btn:hover

最后一個(gè)為偽類，有時(shí)候查找元素的時(shí)候不能第一時(shí)間看到，多抓取幾次。

也可以自己在本地編輯器測(cè)試修改.btn:hover, .post-button .btn:hover樣式下的屬性，測(cè)試顯示效果就行。 默認(rèn)主題下把鼠標(biāo)移入按鈕時(shí)的樣式中，按鈕下方有個(gè)陰影，是主題自帶的，如果不想要可以添加對(duì)應(yīng)的CSS樣式 border:none來(lái)取消這效果，然后調(diào)整一下圓角值，居中設(shè)置，還有顏色的變化，大家自己參考下我之前發(fā)的樣式表，或自己測(cè)試。

文章詳情樣式修改

文章詳情頭部樣式

這個(gè)樣式的修改和前面首頁(yè)那個(gè)的樣式基本一致，所以此處跳過(guò)，但是說(shuō)一點(diǎn) 圖中框內(nèi)的圖標(biāo)元素更改CSS樣式是無(wú)法更改的，我更改了字?jǐn)?shù)統(tǒng)計(jì)和閱讀市場(chǎng)的ICON，具體做法大家可以看我以前寫過(guò)的一篇文章，要在源碼中更改CSS的值。

2017年最新基于hexo搭建個(gè)人免費(fèi)博客——基本設(shè)置和了解http://www.cduyzh.com/hexo-settings-2/

文章相應(yīng)底部樣式修改

最大的紅框部分的內(nèi)容都不是我編輯的文章里的，都是我更改了源代碼加入的DIV樣式標(biāo)簽形成的效果，當(dāng)然還可以在每一篇文章最后加入對(duì)應(yīng)的代碼也可以，但是為了麻煩每次來(lái)粘貼所以我就沒(méi)去這樣做

思路

修改文章模板文件 哪個(gè)是文章主要內(nèi)容的模板文件，對(duì)應(yīng)的路徑themes\next\layout\_macro\post.swig 文章底部的代碼位置如下：

         {{ content.substring(0, theme.auto_excerpt.length) }}
          {% if content.length > theme.auto_excerpt.length %}...{% endif %}


          <div class="post-more-link text-center">
            <a class="btn" href="{{ url_for(post.path) }}{% if theme.scroll_to_more %}#more{% endif %}" rel="contents">
              {{ __('post.read_more') }} »
            </a>
          </div>
        {% else %}
          {% if post.type === 'picture' %}
            <a href="{{ url_for(post.path) }}">{{ post.content }}</a>
          {% else %}
            {{ post.content }}
          {% endif %}
        {% endif %}
      {% else %}
        {{ post.content }}

        
### 編輯區(qū)域

        
      {% endif  %}

那個(gè)打賞功能是主題自帶的一個(gè)參數(shù)配置，大家可以去next主題官方文檔上看。

文章底部的橫線樣式修改

小紅框里面的一條線，有些人覺(jué)得想換樣式，換顏色或直接去掉。 直接在.post-nav下加入一個(gè)樣式

.post-nav {
    border: none;
}

文章閱讀次數(shù)的統(tǒng)計(jì)深入講解

對(duì)比分析方法

再次用下這張圖，我這里面的閱讀次數(shù)是通過(guò)leanCloud,來(lái)實(shí)現(xiàn)文章閱讀量統(tǒng)計(jì)的，next主題還自帶了一個(gè)不蒜子的統(tǒng)計(jì)參數(shù)配置，相信大家用過(guò)了，在主題的配置文件里有如下代碼：

## Show PV/UV of the website/page with busuanzi.
## Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i> 訪問(wèn)用戶：
  site_uv_footer: 人
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 訪問(wèn)次數(shù)：
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: false
  page_pv_header: <i class="fa fa-file-o"></i> 點(diǎn)擊量 
  page_pv_footer: 次

我設(shè)置page_pv為false因?yàn)槲掖蛩阌胠eanCloud來(lái)實(shí)現(xiàn),因?yàn)橛貌凰庾舆@個(gè)來(lái)統(tǒng)計(jì)是沒(méi)問(wèn)題，但是它說(shuō)了 # custom pv span for one page only意思是只顯示在文章相應(yīng)這里，你在首頁(yè)是看不到閱讀次數(shù)統(tǒng)計(jì)的，對(duì)用戶體驗(yàn)來(lái)說(shuō)十分不好，所以打算用leanCloud，如果覺(jué)得首頁(yè)不展示閱讀次數(shù)什么的無(wú)所謂的，就可以用next主題的不蒜子插件，具體的查看官方文檔上面有寫方法。

這里講下官方文檔上沒(méi)有詳細(xì)說(shuō)明的leanCloud,來(lái)實(shí)現(xiàn)文章閱讀量統(tǒng)計(jì)的方法

leanCloud來(lái)實(shí)現(xiàn)閱讀統(tǒng)計(jì)

我現(xiàn)在版本的next主題是集成了這個(gè)插件的，并且給出了對(duì)應(yīng)的參數(shù)配置

## Show number of visitors to each article.
## You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: true
  app_id: TxBSdzFliqxOpec29xEd8pO5-gzGzoHsz
  app_key: 5rH911Nhs9V7AWFjEYqe8Bz7

過(guò)程是：
1.注冊(cè)leancloud賬戶并完成驗(yàn)證后登錄leanCloud的，創(chuàng)建應(yīng)用并配置相關(guān)操作
2.獲取對(duì)應(yīng)的AppID和AppKey
3.配置相應(yīng)參數(shù)完成閱讀文章的數(shù)量的統(tǒng)計(jì)

注冊(cè)賬戶

過(guò)程省略...沒(méi)啥好說(shuō)的

創(chuàng)建一個(gè)應(yīng)用

進(jìn)入應(yīng)用創(chuàng)建Class

我之前已經(jīng)創(chuàng)建好了一個(gè)Class名為Counter,創(chuàng)建成功就會(huì)出來(lái)了。

獲取AppID和AppKey

設(shè)置主題配置文件

設(shè)置主題配置文件_config.yml相關(guān)字段，實(shí)現(xiàn)閱讀數(shù)量的統(tǒng)計(jì) 添加以下字段

leancloud_visitors:
  enable: true
  app_id: #你的App ID
  app_key: #你的的App Key

完成配置并重新編譯。

通過(guò)在本地服務(wù)器測(cè)試是看不到閱讀次數(shù)的統(tǒng)計(jì)的，所以要發(fā)布到網(wǎng)上查看才行。

酷炫的博客背景

添加背景特效

背景的幾何線條是采用的nest效果，一個(gè)基于html5
canvas繪制的網(wǎng)頁(yè)背景效果，非常贊！來(lái)自github的開源項(xiàng)目canvas-nest 特性

    不依賴任何框架或者內(nèi)庫(kù)，比如不依賴jQuery，使用原生的javascript。
    非常小，只有1.66kb，如果開啟gzip，可以更小。
    非常容易實(shí)現(xiàn)，配置簡(jiǎn)單，即使你不是web開發(fā)者，也能簡(jiǎn)單搞定。

使用非常簡(jiǎn)單

color: 線條顏色, 默認(rèn): ‘0,0,0’ ；三個(gè)數(shù)字分別為(R,G,B)，注意用,分割 opacity: 線條透明度（0~1）, 默認(rèn): 0.5 count: 線條的總數(shù)量, 默認(rèn): 150 zIndex: 背景的z-index屬性，css屬性用于控制所在層的位置, 默認(rèn): -1

添加修改代碼

next/layout/_layout.swig，在body標(biāo)簽之前添加如下代碼：

{% if theme.canvas_nest %}
<script type="text/javascript" src="http://cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js" rel="external nofollow" ></script>
{% endif %}

打開next/_config.yml，添加以下代碼：

## Canvas-nest
canvas_nest: true

如果是最新的next主題是集成了這段代碼的，如果沒(méi)手動(dòng)添加，有就設(shè)置為true
### 完成
重新編譯配置后，在本地測(cè)試就能看到效果了。

在首頁(yè)菜單里添加的獨(dú)立的標(biāo)簽頁(yè)

標(biāo)題的意思大概是文章列表實(shí)現(xiàn) 效果如圖：

實(shí)現(xiàn)過(guò)程思想

1、修改HEXO POST模板，添加categories。以后的文章將會(huì)以此作為模板新增。
2、新增一文章，并修改分類屬性。分類屬性如果被設(shè)置，在HEXO編譯會(huì)生成對(duì)應(yīng)分類目錄
3、修改主題配置文件(config.yml),添加MENU分類字段 ,導(dǎo)航欄顯示分類鏈接
4、假定為中文網(wǎng)站，修改主題目錄下的語(yǔ)言配置文件(zh-Hans.yml) .導(dǎo)航欄鏈接顯示中文

修改HEXO POST模板

添加categories 在你的HEXO根目錄下，找到文件夾scaffolds，此文件夾下定義創(chuàng)建文章的基本模型，你可以修改此模板 實(shí)現(xiàn)每次進(jìn)行HEXO NEW 文章名，文章會(huì)以您的模板進(jìn)行對(duì)應(yīng)配置屬性創(chuàng)建。這里我們主要是新增categories 字段，讓每次新增文章都會(huì)打上此屬性字段。 scaffolds里有三個(gè)文件分別對(duì)應(yīng)草稿、頁(yè)面、文章，建議都加上如下代碼：

---
title: {{ title }}
date: {{ date }}
tags:
categories:
---

新增一文章，并修改分類屬性 新建文章后如： hexo new 你的文章名，并打開您的文章，在categories寫上你的分類名字， 此操作后并保存文檔，在你進(jìn)行hexo g編譯的時(shí)候會(huì)在你的PUBLIC目錄下的 categories下建立以你分類名字命名的 文件夾， 以后的鏈接將定向到此文件夾。(本文的測(cè)試分類名為：life 中文名生活)

修改主題配置文件添加MENU分類字段

修改代碼大概如下，參考下就行了。

menu:
  home: /
  categories: /categories
  about: /about
  archives: /archives
  tags: /tags
  #commonweal: /404.html
  #sitemap: /sitemap.xml
  life: /categories/life
  technology: /categories/technology

修改主題目錄下的語(yǔ)言配置文件

路徑為themes\next\languages 文件為zh-Hans.yml 修改代碼如下

menu:
  home: 首頁(yè)
  archives: 歸檔
  categories: 分類
  tags: 標(biāo)簽
  about: 關(guān)于
  search: 搜索
  schedule: 日程表
  sitemap: 站點(diǎn)地圖
  commonweal: 公益404
  life: 生活
  technology: 技術(shù)

完成

重新編譯預(yù)覽下效果。

總結(jié)

這篇寫了不少小技巧，都是平時(shí)總結(jié)的，當(dāng)然還有一些沒(méi)講到的點(diǎn)，如果有疑問(wèn)的可以在下面評(píng)論說(shuō)，我會(huì)在后面的文章提及。