Hexo主题美化
通过 搭建Hexo博客通过GithubPages部署 之后博主发现太丑了，不太喜欢，于是，博主就找了几款主题
- next
- inside
- butterfly
关于 next 这里不介绍，度娘烂大街，主要介绍的是 inside。
inside
inside 官方地址：https://github.com/ikeq/hexo-theme-inside
安装 inside：
git clone git@github.com:ikeq/hexo-theme-inside.git themes/inside
这里我要说明一点内容，当你安装好了 inside 之后目录结构如下：
│ .gitignore
│ .npmignore
│ CNAME
│ db.json
│ package-lock.json
│ package.json
│ _config.landscape.yml
│ _config.yml hexo博客站点的配置
│
├─.github
│ dependabot.yml
├─scaffolds
│ draft.md
│ page.md
│ post.md
│
├─source
│ └─_posts
│ test.md
│
└─themes
│ .gitkeep
│
├─inside
│ │ .gitignore
│ │ .npmignore
│ │ .travis.yml
│ │ LICENSE
│ │ package.json
│ │ README.md
│ │ README_zh-Hans.md
│ │ _config.yml inside主题的配置
│ │
│ ├─source
│ │
│ └─images
│ avatar.png
│ favicon.png
│
└─next
主要就是修改如上代码段当中的两个配置文件即可，修改站点的_config.yml：
theme: inside
主题的 _config.yml
# ---------------------------------------------------------------
# Basic
# ---------------------------------------------------------------
# Appearance
appearance:
# Accent color, default '#2a2b33'
accent_color:
# Font color, default '#363636'
foreground_color:
# Border color, default '#e0e0e0'
border_color:
# body background, default '#f5f7fa'
background:
# Sidebar background (when opened), default to accent_color
sidebar_background:
# Card background, default '#fff'
card_background:
# All background settings above support image, e.g.,
# '//www.toptal.com/designers/subtlepatterns/patterns/confectionary.png #f5f7fa' or
# 'url(//www.toptal.com/designers/subtlepatterns/patterns/confectionary.png) #f5f7fa'
# Maximum width of content
content_width: 640
# Fonts
font:
# Url of font css file
# Below is a font set containing Baloo Bhaijaan, Josefin Sans, Montserrat and Inconsolata from Google Fonts.
url: //fonts.googleapis.com/css?family=Baloo+Bhaijaan|Inconsolata|Josefin+Sans|Montserrat
# Base font which applied to body
base: "'Josefin Sans', 'PingFang SC'"
# Sidebar author font, fallback to `base`
logo:
# Sidebar menu font, fallback to `base`
menu: 'Baloo Bhaijaan'
# Font for:
# - percentage on the fab button
# - month text on archives page
# - count
# - pager
# - toc index
# - category pill
# fallback to `base`
label: Montserrat
# Headline(h1, h2, h3, h4, h5, h6) font, fallback to `base`
heading:
# Code and code block
code: Inconsolata, monospace
# Base font for printing which applied to body
print:
# Code Syntax Highlighting
# Uses an architecture called "base16" (https://github.com/chriskempson/base16),
# the default theme is a customized Atelier Dune Light theme,
# please feel free to explore more.
highlight:
# Default Light by Chris Kempson (http://chriskempson.com)
# highlight: [
# '#f8f8f8', '#e8e8e8', '#d8d8d8', '#b8b8b8',
# '#585858', '#383838', '#282828', '#181818',
# '#ab4642', '#dc9656', '#f7ca88', '#a1b56c',
# '#86c1b9', '#7cafc2', '#ba8baf', '#a16946'
# ]
# Harmonic16 Light by Jannik Siebert (https://github.com/janniks)
# highlight: [
# '#f7f9fb', '#e5ebf1', '#cbd6e2', '#aabcce',
# '#627e99', '#405c79', '#223b54', '#0b1c2c',
# '#bf8b56', '#bfbf56', '#8bbf56', '#56bf8b',
# '#568bbf', '#8b56bf', '#bf568b', '#bf5656'
# ]
# Tomorrow Night by Chris Kempson (http://chriskempson.com)
# highlight: [
# '#1d1f21', '#282a2e', '#373b41', '#969896',
# '#b4b7b4', '#c5c8c6', '#e0e0e0', '#ffffff',
# '#cc6666', '#de935f', '#f0c674', '#b5bd68',
# '#8abeb7', '#81a2be', '#b294bb', '#a3685a'
# ]
darkmode:
accent_color: '#539bf5'
foreground_color: '#adbac7'
border_color: '#373e47'
background: '#22272e'
sidebar_background: '#22272e'
card_background: '#2d333b'
highlight: [
'#2d333b', '#444c56', '#3e4451', '#545862',
'#565c64', '#abb2bf', '#b6bdca', '#c8ccd4',
'#e06c75', '#d19a66', '#e5c07b', '#98c379',
'#56b6c2', '#61afef', '#c678dd', '#be5046'
]
# Sidebar profile
profile:
# `email` is used for gravatar(https://en.gravatar.com),
# fallback to `hexo.config.email` if not specified
email: 303158131@qq.com
# You can set Avatar URL directly
avatar: images/avatar.png
bio: "study hard, improve every day."
# Sidebar navigation links
menu:
Home: /
# About: /about
# Links: /links
#Github: https://github.com/BNTang
# Social media URL
sns:
# Built-in icons
# `email`, `feed`, `github`, `twitter`, `facebook`, `instagram`, `tumblr`, `dribbble`, `telegram`
# `youtube`, `hangouts`, `linkedin`, `pinterest`, `soundcloud`, `myspace`, `weibo`, `qq
- icon: email
title: Email
url: 303158131@qq.com
# - icon: feed
# title: Feed
# url: # default to `hexo.config.feed.path`
# custom icon
# - title: Email me
# url: # default to `profile.email`
# template: <i class="fa fa-github"></i>
# - title: Love you
# url:
# template: |
# <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
# Sidebar footer copyright info
footer:
# Set to false to hide.
copyright: '© 2021 • <a href="">BNTang</a>'
# Set to false to hide Hexo link.
powered: false
# Set to false to hide theme link.
theme: false
# Custom text.
custom: Hosted by <a target="_blank" rel="external nofollow" href="https://pages.github.com/"><b>Github Pages</b></a>
# ---------------------------------------------------------------
# Content
# ---------------------------------------------------------------
# Page
page:
# Display Table of content, default to `true`
toc: true
# Display reward, default to `false`
reward: true
# Display copyright notice, default to `false`
copyright: true
# Post
post:
# per_page: 10
# reading_time: false
# reading_time:
# wpm: 150
# text: ":words words in :minutes min"
# The following settings are the same as the page
# toc: false
# reward: true
# copyright: true
# Archive
archive:
# per_page: 10
# Tag
tag:
# per_page: 10
# Category
category:
# per_page: 10
# Search
search:
# Display a quick search button in fab
# fab: true
# Render a standalone searh page which can be configured in sidebar menu such as `Search: /search`
# page: true
# Local search
# adapter:
# range:
# - post
# - page
# per_page: 20
# limit: 10000
# Custom search
# adapter:
# # Used for pagination
# per_page: 10
# # Optional
# logo: //cdn.worldvectorlogo.com/logos/algolia.svg
# request:
# url: https://{APPLICATION_ID}-dsn.algolia.net/1/indexes/{INDEX}/query
# method: post
# # Available variables: :query, :per_page, :current
# body: '{"query":":query","hitsPerPage":":per_page","page":":current"}'
# headers:
# X-Algolia-API-Key: {API_KEY}
# X-Algolia-Application-Id: {APPLICATION_ID}
# Content-Type: application/json; charset=UTF-8
# keys:
# # Used to retrieve result list
# data: hits
# # Used to retrieve current page number
# current: page
# # Used to retrieve total page number
# total: nbPage
# # Used to retrieve total hits number
# hits: nbHits
# # Used to retrieve cost time
# time: processingTimeMS
# # Used to retrieve title from per hit
# title: _snippetResult.title.value
# # Used to retrieve content from per hit
# content: _snippetResult.content.value
# ---------------------------------------------------------------
# Content addons
# ---------------------------------------------------------------
# Prefix/Suffix of image URL, useful for CDN, for example,
# `` will convert to
# <img src="https://cdn.example.com/images/cat.gif?m=webp&q=80" alt="cat">
assets:
# prefix: 'https://cdn.example.com'
# suffix: '?m=webp&q=80'
# Table of content, enabled by default, set to `false` to disable.
toc:
# The depth of toc, default to `3`, maximum to `4`.
# depth: 3
# Showing index before title, eg. 1.1 title, default to `true`
# index: true
# Reward
reward:
# Text which shows at the top.
# text: Buy me a cup of coffee ☕.
# Payment Methods
# qrcode, url and text must be set at least one
# wechat, alipay, paypal and bitcoin has a built-in icon,
# use `name` to apply
# methods:
# - name: paypal
# qrcode: paypal.jpg
# url: https://paypal.me/imelmore
# text: This is a paypal payment link
# color: '#09bb07'
# Copyright notice
# It is possible to use front matter `copyright` to override this setting.
copyright:
# Display author, default to `true`
# author: false
# Display link, default to `true`
# link: false
# license: Attribution-NonCommercial-NoDerivatives 4.0 International (<a href=\"https://creativecommons.org/licenses/by-nc-sa/4.0/\" rel=\"external nofollow\" target=\"_blank\">CC BY-NC-ND 4.0</a>)
# Display published date, default to `false`
# published: true
# Display updated date, default to `false`
# updated: false
# Custom text, override above settings
# custom: my copyright
# Comments
# Built-in support Disqus (https://disqus.com) and LiveRe (https://livere.com),
# for other comment system, see plugins
comments:
# disqus:
# shortname: disqus_shortname
# # Or you can set disqus script URL directly
# script: //disqus_shortname.disqus.com/embed.js
# # Autoload, default to `true`, set to `false` to display a button
# autoload: false
# ---------------------------------------------------------------
# Misc
# ---------------------------------------------------------------
# URL prefix for theme statics
static_prefix:
# URL prefix for json data
# If your json file is put in a cdn server,
# set data_prefix as '//cdn.com/path/to/path/your_json_dir' and data_dir as 'your_json_dir'
data_prefix:
# Folder where json file will be generated to, default to 'api'
data_dir:
# Favicon, default to `favicon.png`
favicon: images/favicon.png
# Google analytics
# ga: UA-00000000-0
# SEO
seo:
# Render structured-data in <head>, default to `false`
# structured_data: true
# Server-side rendering (SSR), default to `false`
# ssr: true
# PWA
pwa:
# Workbox (https://developers.google.com/web/tools/workbox/) is a JavaScript
# libraries for adding offline support to web apps,
# disabled by default, remove the hash to enable
# workbox:
# # Workbox cdn, uses google by default, below is an example of using alicdn
# cdn: https://g.alicdn.com/kg/workbox/3.3.0/workbox-sw.js
# module_path_prefix: https://g.alicdn.com/kg/workbox/3.3.0/
# # Expire time in hour, 4 by default, set to 0 to be permanent,
# # caches will be forcibly deleted the next time the site is updated.
# expire: 4
# # The worker script name, `sw.js` by default
# name: sw.js
# # Custom rules
# rules:
# - name: jsdelivr
# strategy: staleWhileRevalidate
# regex: https://cdn\\.jsdelivr\\.net
# - name: gtm
# strategy: staleWhileRevalidate
# regex: https://www\\.googletagmanager\\.com\?id=.*
# - name: gravatar
# strategy: staleWhileRevalidate
# regex: https://www\\.gravatar\\.com
# - name: theme
# strategy: staleWhileRevalidate
# regex: /.*\\.(?:js|css|woff2|png|jpg|gif)$
# - name: cdn
# strategy: staleWhileRevalidate
# regex: https://cdn\\.yourdomain\\.com
# - name: json
# strategy: cacheFirst
# regex: your_data_prefix/.*\\.json
# manifest.json
# manifest:
# short_name:
# name:
# start_url: /
# theme_color: '#2a2b33'
# background_color: '#2a2b33'
# icons:
# - src: icon-194x194.png
# sizes: 194x194 512x512
# type: image/png
# purpose: any
# - src: icon-144x144.png
# sizes: 144x144
# type: image/png
# purpose: any
# Plugins
plugins:
# Built-in plugins
# - cipher:
# placeholder: Passcode is required
# excerpt: Content encrypted
# - palette:
# col: 5
# theme: [
# '#673ab7',
# '#3f51b5',
# '#2196f3',
# '#009688',
# '#4caf50',
# '#ff9800',
# '#ff5722',
# '#795548',
# '#607D8B',
# '#2a2b33'
# ]
# Global Inject script/style
# By default script will be injected into <body>, and style will be injected into <head>
# In general, script or style depends on their ext name.
# - xxx.css
# - xxx.jss
# Dynamic inject html snippet
# - position: # sidebar | post | page | comments | avatar | head_begin | head_end | body_begin | body_end
# HTML code
# template: <script>...</script>
# Or a path relative to `hexo.base_dir`
# template: snippets/snippet-1.html
如上的配置主要解释一下关于博客头像和站点的favicon的配置即可，需要在主题的source目录当中新建一个images文件夹在当中放上你需要展示的图片和favicon，然后替换一下配置文件当中的地址即可 ctrl + f 进行搜索然后替换，关于其它的比如赞赏代码段复制等功能这里不介绍配置，因为懒，其实是没太多的经精力了，后续再补上。
