搭建自己的技術部落格系列(六)酷炫主題icarus常用配置整合版,快速搞定部落格首頁

a724888發表於2019-09-14

_config.xml

這裡首先要知道在 Hexo 中有兩份主要的配置檔案,其名稱都是 _config.yml,它們均是用於站點配置使用的。其中,一份位於站點根目錄下(比如我的:D:\h2pl.github.io_config.yml),主要包含 Hexo 本身整站的配置;另一份位於主題目錄(D:\hexo\themes\icaurs_config.yml)下,這份配置由主題作者提供,主要用於配置主題相關的選項。為了描述方便,在以下說明中,將前者稱為站點配置檔案, 後者稱為主題配置檔案。下面我們先來看看站點配置檔案的配置修改。
在這裡插入圖片描述
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: 程式設計師江湖 #主頁標題
subtitle: 黃小斜的部落格 #副標題
description: 大廠程式設計師,網際網路行業新知,終身學習踐行者 # 網站描述,可以加一句自己喜歡的座右銘
author: 黃小斜 #作者,左下角顯示
avatar: /images/hxx.jpg #設定頭像,放在\themes\next\source\images裡
language: zh-Hans # 選擇中文簡體
timezone:
since: 2018 #建站日期,左下角顯示
# 多說 ShortName
busuanzi:
  enable: true
#duoshuo_shortname: your_username # 多說評論,後面填寫使用者名稱
# 百度分析
baidu_analytics: 2289335dd443797b5867abbd156e7575 # 填寫自己獲得的id
#Social links
links:
 我的簡書: https://www.jianshu.com/users/9ab8d7b38c4e
 Github: https://github.com/h2pl
 知乎: https://www.zhihu.com/people/h2pl
 CSDN: https://blog.csdn.net/a724888
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://h2pl.github.io/ #填自己的github pages網址
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# 本地搜尋
search:
  path: search.xml
  field: post
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
# 語法高亮
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
# 百度網站地圖
plugins:
#busuanzi:
#  enable: true
baidusitemap: # 需要安裝外掛 npm install hexo-generator-baidu-sitemap@0.1.1 --save
  path: baidusitemap.xml
# 主題切換
theme: icarus
# RSS訂閱
feed:
  type: atom
  path: atom.xml
  limit: 0
# ---------------下面選項需要對應外掛的支援---------------
# npm install hexo-generator-index --save
# npm install hexo-generator-archive --save
# npm install hexo-generator-category --save
# npm install hexo-generator-tag --save
index_generator:
  per_page: 10 ##首頁預設10篇文章標題 如果值為0不分頁
archive_generator:
  per_page: 20 ##歸檔頁面預設20篇文章標題
  yearly: true  ##生成年檢視
  monthly: true ##生成月檢視
tag_generator:
  per_page: 10 ##標籤分類頁面預設10篇文章
category_generator:
  per_page: 10 ###分類頁面預設10篇文章
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git
# 填上你自己的倉庫名,注意後面有`.git`
  repository: git@github.com:h2pl/h2pl.github.io.git 
  branch: master- type: git
  repo: git@github.com:h2pl/h2pl.github.io.git
  branch: src
  extend_dirs: /
  ignore_hidden: false
  ignore_pattern:
          public: .

icarus的主題配置檔案.config_xml

# Version of the Icarus theme that is currently used
version: 2.6.0
# 你的網站圖示,可以搜尋線上圖示製作,並將其放在images資料夾中
favicon: /images/favicon.svg
# Additional HTML meta tags in an array.
meta:
# Path or URL to RSS atom.xml
rss: /atom.xml
# 顯示在導航欄左側的網站logo,同樣可以自己製作
logo: /images/hxx.jpg
# Open Graph metadata
# https://hexo.io/docs/helpers.html#open-graph
open_graph:
    # Facebook App ID
    fb_app_id:
    # Facebook Admin ID
    fb_admins:
    # Twitter ID
    twitter_id:
    # Twitter site
    twitter_site:
    # Google+ profile link
    google_plus:
# Navigation bar link settings
navbar:
    #選單(顯示名稱:對應資料夾)
    menu:
        主頁: /
        歸檔: /archives
        分類: /categories
        標籤: /tags
        關於: /about
    # 導航欄右側圖示連結
    links:
        My GitHub:
            icon: fab fa-github
            url: 'https://github.com/h2pl/'
# Footer section link settings
footer:
    # 頁尾圖示連結
    links:
        Creative Commons:
            icon: fab fa-creative-commons
            url: 'https://creativecommons.org/'
        Attribution 4.0 International:
            icon: fab fa-creative-commons-by
            url: 'https://creativecommons.org/licenses/by/4.0/'
        Download on GitHub:
            icon: fab fa-github
            url: 'https://github.com/ppoffice/hexo-theme-icarus'
# 文章顯示設定
article:
    #程式碼主題atom-one-light亮色,atom-one-dark暗色
    highlight:
        # Code highlight themes
        # https://github.com/highlightjs/highlight.js/tree/master/src/styles
        theme: atom-one-dark
        # Show code copying button
        clipboard: true
        # Default folding status of the code blocks. Can be "", "folded", "unfolded"
        fold: unfolded
    # 是否顯示文章主圖
    thumbnail: true
    # 是否顯示估算閱讀時間
    readtime: true
# 搜尋外掛設定
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Search
search:
    # Name of the search plugin
    type: insight
# 評論外掛設定
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Comment
comment:
    #可選valine,disqus(科學上網)等
    # Name of the comment plugin
	avatar: retro # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
    placeholder: 要不要說點啥... # Comment Box placeholder
    type: valine
    shortname: 黃小斜
# 打賞功能
# https://ppoffice.github.io/hexo-theme-icarus/categories/Donation/
donate:
    -
        # 阿里巴巴支付寶
        type: alipay
        # 二維碼圖片
        qrcode: '/images/hxx.jpg'
    -
        # 微信
        type: wechat
        # 二維碼圖片
        qrcode: '/images/hxx.jpg'
# 分享外掛設定
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Share
share:
    # Share plugin name
    type: sharejs
# Sidebar settings.
# Please be noted that a sidebar is only visible when it has at least one widget
sidebar:
    # 左側邊欄設定
    left:
        # 是否不隨頁面滾動
        # https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
        sticky: false
    # right sidebar settings
    right:
        # 是否不隨頁面滾動
        # https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
        sticky: false
# 邊欄小部件設定
# https://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/
widgets:
    -
        # Widget name
        type: profile
        # Where should the widget be placed, left or right
        position: left
        # Author name to be shown in the profile widget
        author: 黃小斜
        # Title of the author to be shown in the profile widget
        author_title: 螞蟻金服Java工程師
        # Author's current location to be shown in the profile widget
        location: 浙江 杭州
        # Path or URL to the avatar to be shown in the profile widget
        avatar: /images/gzh.jpg
        # Email address for the Gravatar to be shown in the profile widget
        gravatar:
        # Whether to show avatar image rounded or square
        avatar_rounded: false
        # 關注我的連結,可設為你的GitHub主頁
        follow_link: 'https://github.com/h2pl/'
        # 個人介紹部件底部圖示社交連結
        social_links:
            Github:
                icon: fab fa-github
                url: 'https://github.com/h2pl'
            RSS:
                icon: fas fa-rss
                url: /
    -
        # Widget name
        type: toc
        # Where should the widget be placed, left or right
        position: left
    -
        # Widget name
        type: links
        # Where should the widget be placed, left or right
        position: left
        # Links to be shown in the links widget
        links:
            CSDN: 'https://blog.csdn.net/a724888'
            知乎: 'https://www.zhihu.com/people/h2pl/activities'
            簡書: 'https://www.zhihu.com/people/h2pl/activities'
    -
        # Widget name
        type: category
        # Where should the widget be placed, left or right
        position: left
    -
        # Widget name
        type: tagcloud
        # Where should the widget be placed, left or right
        position: left
    -
        # Widget name
        type: recent_posts
        # Where should the widget be placed, left or right
        position: right
    -
        # Widget name
        type: archive
        # Where should the widget be placed, left or right
        position: right
    -
        # Widget name
        type: tag
        # Where should the widget be placed, left or right
        position: right
# Other plugin settings
plugins:
    # Enable page animations
    animejs: true
    # Enable the lightGallery and Justified Gallery plugins
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/gallery-plugin/
    gallery: true
    # Enable the Outdated Browser plugin
    # http://outdatedbrowser.com/
    outdated-browser: true
    # Enable the MathJax plugin
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/mathjax-plugin/
    mathjax: true
    # Show the back to top button on mobile devices
    back-to-top: true
    # Google Analytics plugin settings
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Google-Analytics
    google-analytics:
        # Google Analytics tracking id
        tracking_id:
    # Baidu Analytics plugin settings
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Baidu-Analytics
    baidu-analytics:
        # Baidu Analytics tracking id
        tracking_id: 2289335dd443797b5867abbd156e7575
    # Hotjar user feedback plugin
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Hotjar
    hotjar:
        # Hotjar site id
        site_id:
    # Show a loading progress bar at top of the page
    progressbar: true
    # BuSuanZi site/page view counter
    # https://busuanzi.ibruce.info
    busuanzi: true
busuanzi:
    enable: true
# CDN provider settings
# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/speed-up-your-site-with-custom-cdn/
# 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: 訪客數
  site_uv_footer: 人
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: 總訪問量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>  閱讀數
  page_pv_footer:
providers:
    # Name or URL of the JavaScript and/or stylesheet CDN provider
    cdn: jsdelivr
    # Name or URL of the webfont CDN provider
    fontcdn: google
    # Name or URL of the webfont Icon CDN provider
    iconcdn: fontawesome

效果預覽

這就是目前我的部落格主頁:how2playlife.com

_config.xml
這裡首先要知道在 Hexo 中有兩份主要的配置檔案,其名稱都是 _config.yml,它們均是用於站點配置使用的。其中,一份位於站點根目錄下(比如我的:D:\h2pl.github.io_config.yml),主要包含 Hexo 本身整站的配置;另一份位於主題目錄(D:\hexo\themes\icaurs_config.yml)下,這份配置由主題作者提供,主要用於配置主題相關的選項。為了描述方便,在以下說明中,將前者稱為站點配置檔案, 後者稱為主題配置檔案。下面我們先來看看站點配置檔案的配置修改。
在這裡插入圖片描述

Hexo Configuration

Hexo Configuration

Site

title: 程式設計師江湖 #主頁標題
subtitle: 黃小斜的部落格 #副標題
description: 大廠程式設計師,網際網路行業新知,終身學習踐行者 # 網站描述,可以加一句自己喜歡的座右銘
author: 黃小斜 #作者,左下角顯示
avatar: /images/hxx.jpg #設定頭像,放在\themes\next\source\images裡
language: zh-Hans # 選擇中文簡體
timezone:
since: 2018 #建站日期,左下角顯示

多說 ShortName

busuanzi:
 enable: true
#duoshuo_shortname: your_username # 多說評論,後面填寫使用者名稱

百度分析

baidu_analytics: 2289335dd443797b5867abbd156e7575 # 填寫自己獲得的id
#Social links
links:

URL

If your site is put in a subdirectory, set url as ' http://yoursite.com/child ' and root as '/child/'

url: http://h2pl.github.io/ #填自己的github pages網址
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

本地搜尋

search:
 path: search.xml
 field: post

Directory

source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

Writing

new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true

語法高亮

highlight:
 enable: true
 line_number: true
 auto_detect: true
 tab_replace:

Category & Tag

default_category: uncategorized
category_map:
tag_map:

Date / Time format

Hexo uses Moment.js to parse and display date

You can customize the date format as defined in

date_format: YYYY-MM-DD
time_format: HH:mm:ss

Pagination

Set per_page to 0 to disable pagination

per_page: 10
pagination_dir: page

Extensions

百度網站地圖

plugins:
#busuanzi:

enable: true

baidusitemap: # 需要安裝外掛 npm install hexo-generator-baidu-sitemap@0.1.1 --save
 path: baidusitemap.xml

主題切換

theme: icarus

RSS訂閱

feed:
 type: atom
 path: atom.xml
 limit: 0

---------------下面選項需要對應外掛的支援---------------

npm install hexo-generator-index --save

npm install hexo-generator-archive --save

npm install hexo-generator-category --save

npm install hexo-generator-tag --save

index_generator:
 per_page: 10 ##首頁預設10篇文章標題 如果值為0不分頁
archive_generator:
 per_page: 20 ##歸檔頁面預設20篇文章標題
 yearly: true  ##生成年檢視
 monthly: true ##生成月檢視
tag_generator:
 per_page: 10 ##標籤分類頁面預設10篇文章
category_generator:
 per_page: 10 ###分類頁面預設10篇文章

Deployment

deploy:
  • type: git填上你自己的倉庫名,注意後面有 .git  repository: git@github.com:h2pl/h2pl.github.io.git  branch: master
  • type: git  repo: git@github.com:h2pl/h2pl.github.io.git  branch: src  extend_dirs: /  ignore_hidden: false  ignore_pattern:          public: . icarus的主題配置檔案.config_xml 在這裡插入圖片描述

Version of the Icarus theme that is currently used

version: 2.6.0

你的網站圖示,可以搜尋線上圖示製作,並將其放在images資料夾中

favicon: /images/favicon.svg

Additional HTML meta tags in an array.

meta:

Path or URL to RSS atom.xml

rss: /atom.xml

顯示在導航欄左側的網站logo,同樣可以自己製作

logo: /images/hxx.jpg

Open Graph metadata

open_graph:
# Facebook App ID
fb_app_id:
# Facebook Admin ID
fb_admins:
# Twitter ID
twitter_id:
# Twitter site
twitter_site:
# Google+ profile link
google_plus:

Navigation bar link settings

navbar:
#選單(顯示名稱:對應資料夾)
menu:
    主頁: /
    歸檔: /archives
    分類: /categories
    標籤: /tags
    關於: /about
# 導航欄右側圖示連結
links:
    My GitHub:
        icon: fab fa-github
        url: 'https://github.com/h2pl/'

Footer section link settings

footer:
# 頁尾圖示連結
links:
    Creative Commons:
        icon: fab fa-creative-commons
        url: 'https://creativecommons.org/'
    Attribution 4.0 International:
        icon: fab fa-creative-commons-by
        url: 'https://creativecommons.org/licenses/by/4.0/'
    Download on GitHub:
        icon: fab fa-github
        url: 'https://github.com/ppoffice/hexo-theme-icarus'

文章顯示設定

article:
#程式碼主題atom-one-light亮色,atom-one-dark暗色
highlight:
    # Code highlight themes
    # https://github.com/highlightjs/highlight.js/tree/master/src/styles
    theme: atom-one-dark
    # Show code copying button
    clipboard: true
    # Default folding status of the code blocks. Can be "", "folded", "unfolded"
    fold: unfolded
# 是否顯示文章主圖
thumbnail: true
# 是否顯示估算閱讀時間
readtime: true

搜尋外掛設定

search:
# Name of the search plugin
type: insight

評論外掛設定

comment:
#可選valine,disqus(科學上網)等
# Name of the comment plugin
avatar: retro # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
placeholder: 要不要說點啥... # Comment Box placeholder
type: valine
shortname: 黃小斜

打賞功能

donate:
-
    # 阿里巴巴支付寶
    type: alipay
    # 二維碼圖片
    qrcode: '/images/hxx.jpg'
-
    # 微信
    type: wechat
    # 二維碼圖片
    qrcode: '/images/hxx.jpg'

分享外掛設定

share:
# Share plugin name
type: sharejs

Sidebar settings.

Please be noted that a sidebar is only visible when it has at least one widget

sidebar:
# 左側邊欄設定
left:
    # 是否不隨頁面滾動
    # https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
    sticky: false
# right sidebar settings
right:
    # 是否不隨頁面滾動
    # https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
    sticky: false

邊欄小部件設定

widgets:
-
    # Widget name
    type: profile
    # Where should the widget be placed, left or right
    position: left
    # Author name to be shown in the profile widget
    author: 黃小斜
    # Title of the author to be shown in the profile widget
    author_title: 螞蟻金服Java工程師
    # Author's current location to be shown in the profile widget
    location: 浙江 杭州
    # Path or URL to the avatar to be shown in the profile widget
    avatar: /images/gzh.jpg
    # Email address for the Gravatar to be shown in the profile widget
    gravatar:
    # Whether to show avatar image rounded or square
    avatar_rounded: false
    # 關注我的連結,可設為你的GitHub主頁
    follow_link: 'https://github.com/h2pl/'
    # 個人介紹部件底部圖示社交連結
    social_links:
        Github:
            icon: fab fa-github
            url: 'https://github.com/h2pl'
        RSS:
            icon: fas fa-rss
            url: /
-
    # Widget name
    type: toc
    # Where should the widget be placed, left or right
    position: left
-
    # Widget name
    type: links
    # Where should the widget be placed, left or right
    position: left
    # Links to be shown in the links widget
    links:
        CSDN: 'https://blog.csdn.net/a724888'
        知乎: 'https://www.zhihu.com/people/h2pl/activities'
        簡書: 'https://www.zhihu.com/people/h2pl/activities'
-
    # Widget name
    type: category
    # Where should the widget be placed, left or right
    position: left
-
    # Widget name
    type: tagcloud
    # Where should the widget be placed, left or right
    position: left
-
    # Widget name
    type: recent_posts
    # Where should the widget be placed, left or right
    position: right
-
    # Widget name
    type: archive
    # Where should the widget be placed, left or right
    position: right
-
    # Widget name
    type: tag
    # Where should the widget be placed, left or right
    position: right

Other plugin settings

plugins:
# Enable page animations
animejs: true
# Enable the lightGallery and Justified Gallery plugins
# https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/gallery-plugin/
gallery: true
# Enable the Outdated Browser plugin
# http://outdatedbrowser.com/
outdated-browser: true
# Enable the MathJax plugin
# https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/mathjax-plugin/
mathjax: true
# Show the back to top button on mobile devices
back-to-top: true
# Google Analytics plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Google-Analytics
google-analytics:
    # Google Analytics tracking id
    tracking_id:
# Baidu Analytics plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Baidu-Analytics
baidu-analytics:
    # Baidu Analytics tracking id
    tracking_id: 2289335dd443797b5867abbd156e7575
# Hotjar user feedback plugin
# https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Hotjar
hotjar:
    # Hotjar site id
    site_id:
# Show a loading progress bar at top of the page
progressbar: true
# BuSuanZi site/page view counter
# https://busuanzi.ibruce.info
busuanzi: true
busuanzi:
enable: true

CDN provider settings

Show PV/UV of the website/page with 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: 訪客數
 site_uv_footer: 人

custom pv span for the whole site

 site_pv: true
 site_pv_header: 總訪問量
 site_pv_footer: 次

custom pv span for one page only

 page_pv: true
 page_pv_header: <i class="fa fa-file-o"></i>  閱讀數
 page_pv_footer:
providers:
# Name or URL of the JavaScript and/or stylesheet CDN provider
cdn: jsdelivr
# Name or URL of the webfont CDN provider
fontcdn: google
# Name or URL of the webfont Icon CDN provider
iconcdn: fontawesome
效果預覽
這就是目前我的部落格主頁:how2playlife.com
在這裡插入圖片描述在這裡插入圖片描述
在這裡插入圖片描述


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69906029/viewspace-2657008/,如需轉載,請註明出處,否則將追究法律責任。

相關文章