就算悲伤难抑,遍体鳞伤地处于谷底,也不能中止演奏!
php
本人博客预览: https://blog.onfree.cncss
本博客基于hexo开发,使用的主题是 @blinkfox 的主题 hexo-theme-materyhtml
hexo 是基于node.js制做的一个博客工具,支持多种主题更换,主要是基于YAML来配置所需信息便可,经过markdown编写文章,hexo 可以快速构建出静态的html页面,而静态页面能够放在GitHub、Gitee等代码托管上,而无需本身购买服务器。前端
本地安装Git(版本控制工具)git
本地安装NodeJs(服务端的 JavaScript)github
GitHub建立和Github Pages建立web
1.1 Git下载地址(本文默认基于Window环境下开发)git官网ajax
由于官网下载会比较慢,推荐使用淘宝镜像快速下载 点击下载算法
1.2 下载完后点击安装文件并一直下一步运行成功便可,右键会看见 Git Bash
,
打开输入 git --version
出现版本数即为成功。
1.3 有关Git用法请参考 文档
经常使用命令:
#使用前配置全局信息 git config --global user.name '你的名字' git config --global user.email '你的邮箱' #查看是否已配置成功 git config --list --global #在你须要使用Git的文件夹下运行 git init #初始化 git add . #添加变动文件到暂存区 git status #查看变动信息 git commit -m '你须要写的信息' #提交到工做区 git remote add origin https://github.com/用户名/仓库名.git #添加Github远程链接 git push origin #上传到GitHub git push origin -f #强制上传到GitHub
2.1 NodeJs 下载地址: 点击下载
2.2 下载完后也是一直下一步就好 ,输入 node -v 查询版本就可。
由于官方镜像源比较慢,推荐以下修改成国内的淘宝镜像源
# 临时修改镜像源 npm --registry=https://registry.npm.taobao.org # 永久设置为淘宝镜像源 npm config set registry https://registry.npm.taobao.org # 查看npm的配置 npm config list
修改默认内置路径,在安装路径上建立 node_global
和
node_cache, 如如下:
D:\Program Files\nodejs\node_global D:\Program Files\nodejs\node_cache
执行命令:
npm config set prefix"D:\Program Files\nodejs\node_global" npm config set cache "D:\Program Files\nodejs\node_cache"
3.1 打开Github官网首页,注册登陆并建立仓库,并建立文件 index.html 便可.
3.2 在Setting 中往下拉找到 GitHub Pages 配置便可访问链接。
在你想要保存博客文件的路径上建立文件夹,如E:\my\hexo_blog,按住 win+r 弹出框里输入 cmd 进入控制台
#进入博客文件夹的上一级目录 cd E:\my # 安装hexo npm install -g hexo-cli #初始化文件夹 hexo init hexo_blog #进入博客文件夹 cd E:\my\hexo_blog # 安装博客须要的依赖文件 npm install
hexo命令 官网文档
hexo cl #清理 hexo g #生成 hexo s #本地服务 hexo d #发布
本地测试 http://locakhost:4000 或者127.0.0.1:4000
hexo 目录结构
_config.yml 配置文件 _public 生成的静态文件,这个目录最终会发布到服务器 _scaffolds 通用模板 _source 保存编写的markdown文件 drafts 草稿文件 themes 博客主题 node_modules 类库
_config.yml
配置
#网站 title: 你的博客名 subtitle: 博客副标题 description: 博客描述(主要用于SEO) keywords: 博客关键词(主要用于SEO) author: 做者(用于主题显示文章的做者) language: 博客语言 timezone: 时区 #网址 url :网址 root :网站根目录 permalink: 文章的永久连接格式 :year/:month/:day/:title/ permalink_defaults: 永久连接中各部分的默认值 pretty_urls: 改写 permalink 的值来美化 URL pretty_urls.trailing_index: 是否在永久连接中保留尾部的 index.html,设置为 false时去除 pretty_urls.trailing_html: 是否在永久连接中保留尾部的 .html, 设置为 false 时去除 #目录(基本不需改) source_dir 资源文件夹,这个文件夹用来存放内容 public_dir 公共文件夹,这个文件夹用于存放chang生成的站点文件 tag_dir 标签文件夹 archive_dir 归档文件夹 category_dir 分类文件夹 code_dir Include code 文件夹,source_dir 下的子目录 i18n_dir 国际化(i18n)文件夹 skip_render 跳过指定文件的渲染。(经常使用于跳过GitHub的README.md渲染) #分页 per_page 每页显示的文章量 (0 关闭分页功能,默认10) pagination_dir 分页目录 #主题 theme:当前主题名称 #发布 deploy: type: git repo: 仓库 branch: 分支
themes
文件夹中便可。_config.yml
修改theme: 主题名
防坑指南:设置的主题名和下载的主题名要彻底一致
hexo new page "categories"
编辑文件 /source/categories/index.md
,内容以下:
--- title: categories date: 2020-02-10 type: "categories" layout: "categories" ---
hexo new page "tags"
编辑文件 /source/tags/index.md
,内容以下:
--- title: tags date: 2018-09-30 18:23:38 type: "tags" layout: "tags" ---
hexo new page "about"
编辑文件 /source/about/index.md
,内容以下:
--- title: about date: 2018-09-30 17:25:30 type: "about" layout: "about" ---
hexo new page "friends"
编辑文件 /source/friends/index.md
,内容以下:
--- title: friends date: 2018-12-12 21:25:30 type: "friends" layout: "friends" ---
同时,在你的博客 source
目录下新建 _data
目录,在 _data
目录中新建 friends.json
文件,文件内容以下所示:
[{ "avatar": "https://s2.ax1x.com/2020/02/13/1q6iAs.th.png", "name": "Athink_", "introduction": "加油 你能够的", "url": "https://blog.onfree.cn/", "title": "前去学习" }]
使用 hexo-prism-plugin的 Hexo 插件来增强代码高亮,安装命令以下:
npm i -S hexo-prism-plugin
修改 Hexo 根目录下 _config.yml
中 highlight.enable
的值为 false
,并新增 prism
插件相关配置,主要配置以下:
highlight: enable: false prism_plugin: mode: 'preprocess' # realtime/preprocess theme: 'tomorrow' line_number: false # default false custom_css:
使用 hexo-generator-search 的 Hexo 插件来作内容搜索,安装命令以下:
npm install hexo-generator-search --save
在 Hexo 根目录下的 _config.yml
文件中,新增如下的配置项:
search: path: search.xml field: post
使用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久连接,安装命令以下:
npm i hexo-permalink-pinyin --save
在 Hexo 根目录下的 _config.yml
文件中,新增如下的配置项:
permalink_pinyin: enable: true separator: '-' # default: '-'
注:除了此插件外,hexo-abbrlink 插件也能够生成非中文的连接。
3.10 文章字数统计插件(可选的)
安装 hexo-wordcount插件,在文章中显示文章字数、阅读时长信息,安装命令以下:
npm i --save hexo-wordcount
而后只需在本主题下的 _config.yml 文件中,激活如下配置项便可:
wordCount: enable: true postWordCount: true min2read: true totalCount: true
页脚信息可在主题文件的 /layout/_partial/footer.ejs
文件中定制化修改,包括站点、使用的主题、访问量等。
在主题的 _config.yml
文件中,默认支持 QQ
、GitHub
和邮箱的配置,你能够在主题文件的 /layout/_partial/social-link.ejs
文件中,新增、修改你须要的社交连接地址,增长连接可参考以下代码:
<a href="https://github.com/blinkfox" class="tooltipped" target="_blank" data-tooltip="访问个人GitHub" data-position="top" data-delay="50"> <i class="fa fa-github"></i> </a>
其中,社交图标(如:fa-github
)你能够在 Font Awesome 中搜索找到。如下是经常使用社交图标的标识,供你参考:
fa-facebook
fa-twitter
fa-google-plus
fa-linkedin
fa-tumblr
fa-medium
fa-slack
fa-weibo
fa-wechat
fa-qq
在主题文件的 source/medias/reward
文件中,替换成你的的微信和支付宝的打赏二维码图片。
在主题的 _config.yml
配置文件中激活配置:
# 是否在首页显示音乐. music: enable: true title: #非吸底模式 有效 enable: false show: 听听音乐 server: netease #必须 服务源: netease, tencent, kugou, xiami, baidu type: playlist #必须 歌曲, playlist, album, search, artist id: 260222983 #必须 歌曲 id / playlist id / album id / search keyword fixed: true # 开启吸底模式 autoplay: false # 是否自动播放 theme: '#C4C4C4' loop: all # 音频循环播放, 可选值: 'all', 'one', 'none' order: 'random' # 音频循环顺序, 可选值: 'list', 'random' preload: 'auto' # 预加载,可选值: 'none', 'metadata', 'auto' volume: 0.9 # 默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效 listFolded: true # 列表默认折叠 listMaxHeight: 600px #列表最大高度
防坑指南:主题默认开启歌词的,简单粗暴直接修改aplyer源码
查找 aplayer-icon aplayer-icon-lrc 在后添加 aplayer-icon-lrc-inactivity
查找 this.player.template.lrcButton.addEventListener 在前面添加 e.player.lrc.hide();
防坑指南:主题最新播放器背景颜色和歌曲文章列表颜色相近致使看不清
在/source/css/matery.css里添加以下:
.aplayer-list-title {
color: #666;
}.aplayer-title {
color: #009688
}
Front-matter
选项中的全部内容均为非必填的。但我仍然建议至少填写 title
、categories
、 tags
、date
的值。
配置选项 | 默认值 | 描述 |
---|---|---|
title | Markdown 的文件标题 |
文章标题,强烈建议填写此选项 |
date | 文件建立时的日期时间 | 发布时间,强烈建议填写此选项,且最好保证全局惟一 |
author | 根 _config.yml 中的 author |
文章做者 |
img | featureImages 中的某个值 |
文章特征图,推荐使用图床(腾讯云、七牛云、又拍云等)来作图片的路径.如: http://xxx.com/xxx.jpg |
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 | 无 | 文章标签,一篇文章能够多个标签 |
注意:
如下为文章的 Front-matter
示例。
最简示例
--- title: hello world date: 2020-02-10 08:05:00 categories: 杂文 tags: 测试 ---
最全示例
--- title: hello world date: 2020-02-10 08:05:00 author: athink_ img: /source/images/xxx.jpg top: true cover: true coverImg: /images/1.jpg password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92 toc: false mathjax: false summary: 这是你自定义的文章摘要内容,若是这个属性有值,文章卡片摘要就显示这段文字,不然程序会自动截取文章的部份内容做为摘要 categories: 杂文 tags: 测试 ---
在主题文件的 /source/css/matery.css
文件中,搜索 .bg-color
来修改背景颜色:
/* 总体背景颜色,包括导航、移动端的导航、页尾、标签页等的背景颜色. */ .bg-color { background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); } /*若是想去掉banner图的颜色渐变效果,请将如下的css属性注释掉或者删除掉便可*/ @-webkit-keyframes rainbow { /* 动态切换背景颜色. */ } @keyframes rainbow { /* 动态切换背景颜色. */ }
推荐配色方案
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
作同步修改。
实现方法,引入js文件,在主题文件下的/source/js/
下新建FunnyTitle.js
,而后在添加到themes/matery/layout/layout.ejs
或者添加到themes/matery/layout/_partial/head.ejs
,其代码以下:
<!--浏览器搞笑标题--> var OriginTitle = document.title; var titleTime; document.addEventListener('visibilitychange', function () { if (document.hidden) { $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/favicon.png"); document.title = 'ヽ(●-`Д´-)ノ你要玩捉迷藏嘛'; clearTimeout(titleTime); } else { $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/favicon.png"); document.title = 'ヾ(Ő∀Ő3)ノ好哦!' + OriginTitle; titleTime = setTimeout(function () { document.title = OriginTitle; }, 2000); } });
在/themes/matery/layout/_partial/head.ejs
添加下面的一行代码:
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
而后再将/themes/matery/layout/_partial/bg-cover-content.ejs
中的<%= config.description %>
修改成把<%= config.description %>
改成<%- '正在加载今日诗词....' %>
,这个使用前提是将主题配置文件的subtitle
的值改成false
。
在\layout\_widget\dream.ejs
中修改以下
<div class="dream"> <% if (theme.dream.showTitle) { %> <div class="title center-align"> <i class="fa fa-paper-plane" aria-hidden="true"></i> <%- theme.dream.title %> </div> <% } %> <div class="row"> <!-- <div class="col l8 offset-l2 m10 offset-m1 s10 offset-s1 center-align text"> <%- theme.dream.text %> </div> --> <div class="col l8 offset-l2 m10 offset-m1 s10 offset-s1 center-align text"> </div> <!-- 添加动态添加一言语录 --> <% if (theme.dream.textUrl!=null||theme.dream.textUrl!="") { %> <script> $.ajax({ type: "Get", url: "<%- theme.dream.textUrl %>", success: function(data) { $(".text").html(data) }, error:function(){ $(".text").html(" <%- theme.dream.text %>") } }) </script> <% } %> </div> </div>
引用了 一言语录API : https://api.uixsj.cn/hitokoto/w.php
实现方法,引入js文件,在主题文件下的/source/js/
下新建click_show_text.js
,并添加到themes/matery/layout/layout.ejs
。其代码以下:
var a_idx = 0; jQuery(document).ready(function ($) { $("body").click(function (e) { var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"); var $i = $("<span/>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 5, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "#FF0000" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 3000, function () { $i.remove(); }); }); setTimeout('delay()', 2000); }); function delay() { $(".buryit").removeAttr("onclick"); }
参考教程:传送门
首先去中国天气官网:https://cj.weather.com.cn/plugin/pc,配置本身的插件,选择自定义插件—>自定义样式——>生成代码,而后会生成一段代码,复制粘贴到 themes/matery/layout/layout.ejs
便可。
打开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> <%- __('我的简历') %> </div> <div id="articleContent" data-aos="fade-up"> <%- page.content %> </div> </div> </div> </div>
注意粘贴的位置和空格要正确,这里的位置随你本身设置,你也能够把简历做为第一个card,而后/source/about/index.md
下面写上你的简历了(就像写博客同样)。
hexo-external-link是一个跳转外链相关插件。自动为全部html文件中外链的a标签生成对应的属性。 好比 设置
target=’_blank’, rel=’external nofollow noopener noreferrer’
告诉搜索引擎这是外部连接,不要将该连接计入权重。 同时自动生成外链跳转页面,默认在根目录下 go.html;
使用 npm 或者 yarn 安装
## npm 安装 npm install hexo-external-link --save ## yarn 安装 yarn add hexo-external-link
以后再hexo博客站点根目录下添加以下配置:
hexo_external_link: enable: true enable_base64_encode: true url_param_name: 'u' html_file_name: 'go.html' target_blank: true link_rel: 'external nofollow noopener noreferrer' domain: 'your_domain' # 若是开启了防盗链 safety_chain: true
hexo_external_link
插件 - 默认 falseurl
使用base64编码
- 默认 faslehtml_file_name
的参数名 - 默认 ‘u’a
标签添加target='_blank'
- 默认 truea
标签的rel属性 - 默认 ‘external nofollow noopener noreferrer’3.24 添加雪花飘落效果
在themes/matery/source/js
目录下新建snow.js
文件,打开这个网址传送门,将内容复制粘贴到cursor.js便可。
而后再themes/matery/layout/layout.ejs
文件内添加下面的内容:
<script src="/js/snow.js"></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
,在后面添加属性,以下:
skip_render: aboutme/** # 其意思为在对文件进行渲染时跳过aboutme文件下的全部文件
知道方法后,你能够添加你本身想要添加的页面,让你的博客内容更加充实。
首先再站点根目录下的source文件夹下新建404.md
文件,里面内容以下:
--- title: 404 date: 2020-02-10 16:41:10 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(https://cdn.jsdelivr.net/gh/Yafine/cdn@2.6/source/medias/banner/' + new Date().getDay() + '.jpg)'); </script>
主题默认的文章连接配置是
premalink: :year/:month/:day/:title
这种生成的连接地址很长,文章版权的连接地址会出现一大串字符编码,一点也很差看。所以须要修改文章生成连接的格式。
首先再根目录下执行下面的命令:
npm install hexo-abbrlink --save
而后再站点配置文件下添加以下配置:
abbrlink: alg: crc16 #算法: crc16(default) and crc32 rep: hex #进制: dec(default) and hex: dec #输出进制:十进制和十六进制,默认为10进制。丨dec为十进制,hex为十六进制
再将站点配置文件的permalink
的值修改成:
permalink: posts/:abbrlink.html # 此处能够本身设置,也能够直接使用 :/abbrlink
生成文章的连接格式就会是以下样例(官方样例):
crc16 & hex https://post.zz173.com/posts/66c8.html crc16 & dec https://post.zz173.com/posts/65535.html crc32 & hex https://post.zz173.com/posts/8ddf18fb.html crc32 & dec https://post.zz173.com/posts/1690090958.html
生成完后,原md文件的Front-matter 内会增长abbrlink
字段,值为生成的ID 。这个字段确保了在咱们修改了Front-matter 内的博客标题title或建立日期date字段以后而不会改变连接地址。
登陆LeanCloud,建立应用,在设置中将其中APPID和APPKey复制,添加到配置文件中。
valine: enable: false # true即为开启评论系统 appId: #此处填写你的appid appKey: #此处填写你的appkey notify: false verify: false visitor: true avatar: 'mm' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide pageSize: 10 placeholder: 'just go go' # Comment Box placeholder background: https://cdn.jsdelivr.net/gh/Yafine/cdn@2.6/social/comment_bg.png
本觉得使用hexo开发博客会很复杂很难,
然而发现大多数都是写好的,只有在配置文件上修改就行,
对于主题样式内容等不满意再去打开源码修改就行,
其实只有会一点前端知识即可以对源码大概进行你想要的定制呢,
耐心的能够研究下主题构造也不错呢。
今每天气不错!加油!!!