Hexo-Matery主题美化

时间  2020-08-22
标签 hexo matery 主题 美化 繁體版
原文   原文链接

下载安装Matery主题

首先在hexo官网主题里面搜索Matery主题点击进入做者大大的github，而后下载 master 分支的最新稳定版的代码，解压缩后将 hexo-theme-matery 的文件夹重命名为matery，复制到Hexo 的 themes 文件夹中css

能够在themes 文件夹下使用Git clone命令来下载：html

git clone https://github.com/blinkfox/hexo-theme-matery.git

切换主题

下载完后，将站点配置文件中的 theme 值修改成你下载主题的文件名java

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: matery

一些其余在站点目录配置：node

language: zh-CN网站的语言设置linux

url: https://www.guixinchn.cn 网站的网站（域名）git

per_page: 12建议修改成 6 的倍数，主题排版比较好github

新建页面

一、标签页

hexo new page "tags"

编辑新建的/source/tags/index.md文件web

---
title: tags
date: 2020-02-23 19:37:07
type: "tags"
layout: "tags"
---

二、分类页

hexo new page "categories"

编辑新建的/source/categories/index.md文件npm

---
title: categories
date: 2020-02-23 19:37:07
type: "categories"
layout: "categories"
---

三、关于页面

hexo new page "about"

编辑新建的/source/about/index.md文件json

---
title: about
date: 2020-02-23 19:37:07
type: "about"
layout: "about"
---

四、留言板

hexo new page "contact"

编辑新建的/source/contact/index.md文件

---
title: contact
date: 2020-02-23 19:37:07
type: "contact"
layout: "contact"
---

五、友情连接

hexo new page "friends"

编辑新建的/source/friends/index.md文件

---
title: friends
date: 2020-02-23 19:37:07
type: "friends"
layout: "friends"
---

而后在博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容以下所示：

[
	{
	    "avatar": "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/csdn.png",
	    "name": "Blog",
	    "introduction": "CSDN社区",
	    "url": "https://blog.csdn.net/guixinchn",
	    "title": "CSDN"
	}, 
	{
        "avatar": "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/bokeyuan.png",
        "name": "Blog",
        "introduction": "博客园",
        "url": "https://www.cnblogs.com/guixinchn/",
        "title": "博客园"
	}, 
	{
	    "avatar": "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/github.png",
	    "name": "github",
	    "introduction": "github",
	    "url": "https://github.com/guixinchn",
	    "title": "github"
	}, 
	{
	    "avatar": "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/touxiang.jpg",
	    "name": "Blog",
	    "introduction": "咕咕星",
	    "url": "https://ythan.top",
	    "title": "咕咕星"
	}
]

六、添加 404 页面

首先再站点根目录下的 source 文件夹下新建 404.md 文件，里面内容以下：

---
title: 404
date: 2020-02-23 19:37:07
type: "404"
layout: "404"
description: "Oops～，我崩溃了！找不到你想要的页面了"
---

紧接着再新建主题文件夹的 layout 目录下新建 404.ejs 文件，添加内容以下：

<style type="text/css">
    /* don't remove. */
    .about-cover {
        height: 90.2vh;
    }
</style>
<div class="bg-cover pd-header about-cover">
    <div class="container">
        <div class="row">
            <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
                <div class="brand">
                    <div class="title center-align">
                        404
                    </div>
                    <div class="description center-align">
                        <%= page.description %>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 天天切换 banner 图.  Switch banner image every day.
    $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>

七、添加自定义页面

首先在站点目录下的 source 文件夹下新建 aboutme 文件，文件名可自定义，而后编写一个 index.html 放入 aboutme 文件夹下，而后在主题配置文件下的导航配置信息添加下面的配置：

About:
    url: /
    icon: fas fa-address-card
    children:
      - name: 关于我
        url: /about
        icon: fas fa-user-circle
      - name: Another    #这是新添加的，在原有配置基础上添加
        url: /aboutme
        icon: fa fa-user-secret

而后在站点配置文件下，找到 skip_render，在后面添加属性，以下：

# 其意思为在对文件进行渲染时跳过aboutme文件下的全部文件
skip_render: 
    - aboutme/** 
    - aaa/**
    - bbb/**

配置菜单导航

配置基本菜单导航的名称、路径 url 和图标 icon.

图标 icon 能够在 Font Awesome 中查找

# main menu navigation url and icon
# 配置菜单导航的名称、路径和图标icon.
menu:
  Index:
    url: /
    icon: fas fa-home
  Tags:
    url: /tags
    icon: fas fa-tags
  Categories:
    url: /categories
    icon: fas fa-bookmark
  Archives:
    url: /archives
    icon: fas fa-archive
  About:
    url: /about
    icon: fas fa-user-circle
  Contact:
    url: /contact
    icon: fas fa-comments
  Friends:
    url: /friends
    icon: fas fa-address-book

添加 emoji 表情支持

须要安装插件 hexo-filter-github-emojis

npm install hexo-filter-github-emojis --save

在 Hexo 根目录下的 _config.yml 文件中，新增如下的配置项：

githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:

代码高亮

本来的代码显示行号和内容分开了，不美观

代码美化须要安装hexo-prism-plugin 插件

npm i -S hexo-prism-plugin

修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置以下：

highlight:			#代码块的设置
  enable: false			#开启代码块高亮
  line_number: true		#若是未指定语言，则启用自动检测
  auto_detect: false		#显示行数
  tab_replace: ''		#用n个空格替换tabs；若是值为空，则不会替换tabs
  wrap: ture
  hljs: false


# 关闭原有的代码高亮，使用本身的
prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:
参数KEY 可选值
mode realtime (Parse code on browser in real time)
preprocess (Preprocess code in node)
theme default
coy
dark
funky
okaidia
solarizedlight
tomorrow
twilight
若是要更多的选择访问： hexo-prism-plugin
line_number true (Show line numbers)
false (Default, Hide line numbers)
no_assets true (Stop loading asset files)
false (Default, load script and stylesheets files)

注意：

hexo花括号显示失败的话，须要将hexo版本降级，改为hexo4.2.0版本就行了

卸载hexo5.0
npm uninstall hexo --save

安装4.2.0版本

npm install hexo@4.2.0 --save

主题的搜索功能

须要安装hexo-generator-search插件

npm install hexo-generator-search --save

在Hexo 根目录下的 _config.yml 文件中，新增如下的配置项：

search:
  path: search.xml
  field: post

文章字数统计插件

须要安装 hexo-wordcount 插件

npm i --save hexo-wordcount

主题下的 _config.yml 文件中，激活如下配置项便可：

wordCount:
  enable: false # 将这个值设置为 true 便可.
  postWordCount: true
  min2read: true
  totalCount: true

添加 RSS 订阅支持

须要安装hexo-generator-feed插件

npm install hexo-generator-feed --save

Hexo 根目录下的 _config.yml 文件中，新增如下的配置项：

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

在 public 文件夹中便可看到 atom.xml 文件，则已经安装成功

修改页脚

页脚信息可能须要作定制化修改，并且它不便于作成配置信息，因此可能须要你本身去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中，包括站点、使用的主题、访问量等。

修改社交连接

在主题的 config.yml 文件中，默认支持 QQ、GitHub 和邮箱等的配置，你能够在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、修改你须要的社交连接地址，增长连接可参考以下代码：

<% if (theme.socialLink.github) { %>
    <a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="访问个人GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>
<% } %>

修改打赏的二维码图片

在主题文件的 source/medias/reward 文件中修改

配置音乐播放器

支持接入第三方音乐，如 QQ 音乐，网易云音乐，酷狗音乐等等

主题的 _config.yml 配置文件中激活 music 配置便可：

# Whether to display the musics.
# 是否在首页显示音乐.
music:
  enable: true
  title: #非吸底模式有效
    enable: true
    show: 咕咕星的歌单
  autoHide: true    # hide automaticaly
  server: netease   #require	music platform: netease, tencent, kugou, xiami, baidu
  type: playlist    #require song, playlist, album, search, artist
  id: 2888085740     #require	song id / playlist id / album id / search keyword
  fixed: false       # 开启吸底模式
  autoplay: false   # 是否自动播放
  theme: '#42b983'
  loop: 'all'       # 音频循环播放, 可选值: 'all', 'one', 'none'
  order: 'random'   # 音频循环顺序, 可选值: 'list', 'random'
  preload: 'auto'   # 预加载，可选值: 'none', 'metadata', 'auto'
  volume: 0.7       # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
  listFolded: true  # 列表默认折叠
  hideLrc: true     # 隐藏歌词

server 可选 netease（网易云音乐），tencent（QQ 音乐），kugou（酷狗音乐），xiami（虾米音乐），

baidu（百度音乐）。

type 可选 song（歌曲），playlist（歌单），album（专辑），search（搜索关键字），artist（歌手）

id 获取示例：浏览器打开网易云音乐，点击我喜欢的音乐歌单，地址栏有一串数字，playlist 的 id 即为这串数字。

文章 Front-matter 介绍

配置选项 默认值 描述
title Markdown 的文件标题 文章标题，强烈建议填写此选项
date 文件建立时的日期时间 发布时间，强烈建议填写此选项，且最好保证全局惟一
author 根 _config.yml 中的 author 文章做者
img featureImages 中的某个值 文章特征图，推荐使用图床
top true 推荐文章（文章是否置顶），若是 top 值为 true，则会做为首页推荐文章
cover false v1.0.2 版本新增，表示该文章是否须要加入到首页轮播封面中
coverImg 无 v1.0.2 版本新增，表示该文章在首页轮播封面须要显示的图片路径，若是没有，则默认使用文章的特点图片
password 无 文章阅读密码，若是要对文章设置阅读验证密码的话，就能够设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项
toc true 是否开启 TOC，能够针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
mathjax false 是否开启数学公式支持 ，本文章是否开启 mathjax，且须要在主题的 _config.yml 文件中也须要开启才行
summary 无 文章摘要，自定义的文章摘要内容，若是这个属性有值，文章卡片摘要就显示这段文字，不然程序会自动截取文章的部份内容做为摘要
categories 无 文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
tags 无 文章标签，一篇文章能够多个标签
reprintPolicy cc_by 文章转载规则， 能够是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

注意:

  1. 若是 img 属性不填写的话，文章特点图会根据文章标题的 hashcode 的值取余，而后选取主题中对应的特点图片，从而达到让全部文章都的特点图各有特点。
  2. date 的值尽可能保证每篇文章是惟一的，由于本主题中 Gitalk 和 Gitment 识别 id 是经过 date 的值来做为惟一标识的。
  3. 若是要对文章设置阅读验证密码的功能，不只要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还须要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。
  4. 您能够在文章 md 文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则

自定制修改

修改主题颜色

在主题文件的 /source/css/matery.css 文件中修改

/* 总体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
    background-image: linear-gradient(to right, #2558FF 0%, #0f9d58 100%);
}
/*若是想去掉banner图的颜色渐变效果，请将如下的css属性注释掉或者删除掉便可*/
@-webkit-keyframes rainbow {
   /* 动态切换背景颜色. */
}
@keyframes rainbow {
    /* 动态切换背景颜色. */
}

修改 banner 图和文章特点图

在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是天天动态切换一张，只需 7 张便可。若是你会 JavaScript 代码，能够修改为你本身喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 代码中：

$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');

在 /source/medias/featureimages 文件夹中默认有 24 张特点图片，你能够再增长或者减小，并须要在 _config.yml 作同步修改。

若是想改成每小时或者每分钟切换 banner 图的话，须要将 getDay() 改成 getHours() 或者 getMinutes() 便可。

修改网站相关信息

#这是根目录下的配置文件信息
# Site
title: 咕咕星Blog		#网站标题
subtitle: 世界很暗，可是你来了 #网站副标题
description: 本网站是我的兴趣爱好，总结分享经验，记录生活点滴的平台，但愿在之后的学习旅途中，走出本身的风景。	#网站描述description 主要用于5E0，告诉搜索引擎一个关于您站点的简单描述
keywords: [HTML, CSS, JavaScript, JQuery, java, linux等]		#网站的关键词。使用半角逗号“，”分隔多个关键词
author: 咕咕星			#您的名字
language: zh-CN			#网站使用的语言。建议修改成zh-CN
timezone:			#网站时区。Hexo默认使用您电脑的时区。


# 这是主题配置文件的相关信息
# 配置网站favicon和网站LOGO
# 此处我用的CDN，也可使用本地文件
favicon: https://cdn.jsdelivr.net/gh/guixinchn/image/blog/favicon.png
logo: https://cdn.jsdelivr.net/gh/guixinchn/image/blog/logo.png


# 网站副标题，打字效果
# 若是有符号 ‘ ，请在 ’ 前面加上 \
subtitle:
  enable: true
  loop: true # 是否循环
  showCursor: true # 是否显示光标
  startDelay: 300 # 开始延迟
  typeSpeed: 100 # 打字速度
  backSpeed: 50 # 删除速度
  sub1: 若是放弃太早，你永远都不知道本身会错过什么。
  sub2: 没有伞的孩子必须努力奔跑！
  sub3: 花开不是为了花落，而是为了开的更加灿烂。
  sub4: 没有礁石，就没有美丽的浪花；没有挫折，就没有壮丽的人生。

注意：

网站打字效果副标题默认有两个，即 sub1 和 sub2，若是想写多个，则须要修改两处地方，首先修改配置文件，如上面所示，在 sub1 和 sub2 后面继续添加便可，而后在去主题目录下的 layout 文件夹下的_partial 文件夹，修改 bg-cover-content.ejs 文件，大约在 12 行左右，以下面所示：

<div class="description center-align">
                <% if (theme.subtitle.enable) { %>
                <span id="subtitle"></span>
                <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
                <script>
                    var typed = new Typed("#subtitle", {
                        strings: ['<%= theme.subtitle.sub1 %>',
				 				  '<%= theme.subtitle.sub2 %>',
								  '<%= theme.subtitle.sub3 %>',
				 				  '<%= theme.subtitle.sub4 %>'],
                        startDelay: <%= theme.subtitle.startDelay %>,
                        typeSpeed: <%= theme.subtitle.typeSpeed %>,
                        loop: <%= theme.subtitle.loop %>,
                        backSpeed: <%= theme.subtitle.backSpeed %>,
                        showCursor: <%= theme.subtitle.showCursor %>
                    });
                </script>
                <% } else { %>
                    <%= config.description %>
                <% } %>
            </div>

社交连接的修改

在主题的配置文件中修改：

# 首页 banner 中的第二行我的信息配置，留空即不启用
socialLink:
  qq: 673888718
  weixin: https://cdn.jsdelivr.net/gh/guixinchn/image/blog/wechat.jpg
  github: #https://github.com/guixinchn
  email: guixinchn@gmail.com
  facebook: # https://www.facebook.com/xxx
  twitter: # https://twitter.com/xxx
  weibo: # https://weibo.com/xxx
  zhihu: # https://www.zhihu.com/xxx
  csdn: https://blog.csdn.net/guixinchn
  cnblogs: https://www.cnblogs.com/guixinchn
  rss: true # true、false

期中的 weixin 我是用的图片连接，会跳转到一个新的标签页，以后还须要修改 ejs 文件，文件在主题目录下的 layout 文件夹下的_partial 文件夹，修改 social-link.ejs，添加相关的配置，好比：

<% if (theme.socialLink.github) { %>
    <a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="访问个人GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>
<% } %>

<% if (theme.socialLink.email) { %>
    <a href="mailto:<%= theme.socialLink.email %>" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50">
        <i class="fas fa-envelope-open"></i>
    </a>
<% } %>

<% if (theme.socialLink.facebook) { %>
    <a href="<%= theme.socialLink.facebook %>" class="tooltipped" target="_blank" data-tooltip="关注个人Facebook: <%= theme.socialLink.facebook %>" data-position="top" data-delay="50">
        <i class="fab fa-facebook-f"></i>
    </a>
<% } %>

<% if (theme.socialLink.twitter) { %>
    <a href="<%= theme.socialLink.twitter %>" class="tooltipped" target="_blank" data-tooltip="关注个人Twitter: <%= theme.socialLink.twitter %>" data-position="top" data-delay="50">
        <i class="fab fa-twitter"></i>
    </a>
<% } %>

<% if (theme.socialLink.qq) { %>
    <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=<%= theme.socialLink.qq %>" class="tooltipped" target="_blank" data-tooltip="QQ联系我: <%= theme.socialLink.qq %>" data-position="top" data-delay="50">
        <i class="fab fa-qq"></i>
    </a>
<% } %>

<% if (theme.socialLink.weibo) { %>
    <a href="<%= theme.socialLink.weibo %>" class="tooltipped" target="_blank" data-tooltip="关注个人微博: <%= theme.socialLink.weibo %>" data-position="top" data-delay="50">
        <i class="fab fa-weibo"></i>
    </a>
<% } %>

<% if (theme.socialLink.zhihu) { %>
    <a href="<%= theme.socialLink.zhihu %>" class="tooltipped" target="_blank" data-tooltip="关注个人知乎: <%= theme.socialLink.zhihu %>" data-position="top" data-delay="50">
        <i class="fab fa-zhihu1">知</i>
    </a>
<% } %>

<% if (theme.socialLink.rss) { %>
    <a href="<%- url_for('/atom.xml') %>" class="tooltipped" target="_blank" data-tooltip="RSS 订阅" data-position="top" data-delay="50">
        <i class="fas fa-rss"></i>
    </a>
<% } %>



<% if (theme.socialLink.jianshu) { %>
    <a href="<%= theme.socialLink.jianshu %>" class="tooltipped" target="_blank" data-tooltip="关注个人简书: <%= theme.socialLink.jianshu %>" data-position="top" data-delay="50">
        <i class="fab fa-jianshu">简</i>
    </a>
<% } %>

<% if (theme.socialLink.csdn) { %>
    <a href="<%= theme.socialLink.csdn %>" class="tooltipped" target="_blank" data-tooltip="关注个人CSDN: <%= theme.socialLink.csdn %>" data-position="top" data-delay="50">
        <i class="fab fa-csdn">C</i>
    </a>
<% } %>
<% if (theme.socialLink.juejin) { %>
    <a href="<%= theme.socialLink.juejin %>" class="tooltipped" target="_blank" data-tooltip="关注个人掘金: <%= theme.socialLink.juejin %>" data-position="top" data-delay="50">
        <i class="fab fa-juejin">掘</i>
    </a>
<% } %>

<% if (theme.socialLink.cnblogs) { %>
    <a href="<%= theme.socialLink.cnblogs %>" class="tooltipped" target="_blank" data-tooltip="关注个人博客园: <%= theme.socialLink.cnblogs %>" data-position="top" data-delay="50">
        <i class="fab fa-juejin">博</i>
    </a>
<% } %>
<% if (theme.socialLink.weixin) { %>
    <a href="<%= theme.socialLink.weixin %>" class="tooltipped" target="_blank" data-tooltip="微信联系我: <%= theme.socialLink.weixin %>" data-position="top" data-delay="50">
        <i class="fab fa-weixin"></i>
    </a>
<% } %>

其余一些个性DIY

动态标题

实现方法，引入 js 文件，在主题文件下的 /source/js/ 下新建 FunnyTitle.js，增长如下代码：

var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/favicon.png");
         document.title = '我相信你还会回来的！';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/favicon.png");
         document.title = '哈哈，我就知道！' + OriginTitle;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });

而后在添加到 themes/matery/layout/layout.ejs 引入

<script src="<%- theme.jsDelivr.url %><%- url_for('/js/FunnyTitle.js') %>"></script>

关于我页面添加我的简历

打开 theme/matery/layout/about.ejs 文件，大约在 13 行。有一个 `` 标签，找出其对应结尾的标签，大约在 61 行左右，而后在新增以下代码：

<div class="card">
     <div class="card-content">
         <div class="card-content article-card-content">
             <div class="title center-align" data-aos="zoom-in-up">
                 <i class="fa fa-address-book"></i>&nbsp;&nbsp;<%- __('我的简历') %>
              </div>
                 <div id="articleContent" data-aos="fade-up">
                     <%- page.content %>
                 </div>
           </div>
      </div>
</div>

能够在about页面自定义内容

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程