11分钟无需服务器搭建我的博客

就算悲伤难抑,遍体鳞伤地处于谷底,也不能中止演奏!php

本人博客预览: https://blog.onfree.cncss


本博客基于hexo开发,使用的主题是 @blinkfox 的主题 hexo-theme-materyhtml

hexo 是基于node.js制做的一个博客工具,支持多种主题更换,主要是基于YAML来配置所需信息便可,经过markdown编写文章,hexo 可以快速构建出静态的html页面,而静态页面能够放在GitHub、Gitee等代码托管上,而无需本身购买服务器。前端

同时hexo支持更换不一样好看个性的主题,好比 nextyilia 等。node

一. 环境搭建

  • 本地安装Git(版本控制工具)git

  • 本地安装NodeJs(服务端的 JavaScript)github

  • GitHub建立和Github Pages建立web

1. 本地安装Git

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. 本地安装NodeJs

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_globalnode_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. GitHub建立和Github Pages建立

3.1 打开Github官网首页,注册登陆并建立仓库,并建立文件 index.html 便可.

3.2 在Setting 中往下拉找到 GitHub Pages 配置便可访问链接。

二 . 博客开发

1. 安装Hexo

在你想要保存博客文件的路径上建立文件夹,如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

2.hexo配置

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: 分支

3. 使用主题和配置

参考博客 Hexo博客主题之hexo-theme-matery的介绍

3.1 下载主题:
hexo-theme-matery 放在站点目录文件夹下 themes 文件夹中便可。
3.2 在站点配置文件_config.yml修改theme: 主题名

防坑指南:设置的主题名和下载的主题名要彻底一致

3.3 新建分类 categories 页
hexo new page "categories"

编辑文件 /source/categories/index.md,内容以下:

---
title: categories
date: 2020-02-10
type: "categories"
layout: "categories"
---
3.4 新建标签 tags 页
hexo new page "tags"

编辑文件 /source/tags/index.md,内容以下:

---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---
3.5 新建关于我 about 页
hexo new page "about"

编辑文件 /source/about/index.md,内容以下:

---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---
3.6 新建友情链接 friends 页(可选的)
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": "前去学习"
}]
3.7 代码高亮

使用 hexo-prism-plugin的 Hexo 插件来增强代码高亮,安装命令以下:

npm i -S hexo-prism-plugin

修改 Hexo 根目录下 _config.ymlhighlight.enable 的值为 false,并新增 prism 插件相关配置,主要配置以下:

highlight:
  enable: false

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false # default false
  custom_css:
3.8 搜索

使用 hexo-generator-search 的 Hexo 插件来作内容搜索,安装命令以下:

npm install hexo-generator-search --save

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

search:
  path: search.xml
  field: post
3.9 中文连接转拼音(可选的)

使用 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
3.11 修改页脚

页脚信息可在主题文件的 /layout/_partial/footer.ejs 文件中定制化修改,包括站点、使用的主题、访问量等。

3.12修改社交连接

在主题的 _config.yml 文件中,默认支持 QQGitHub 和邮箱的配置,你能够在主题文件的 /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 中搜索找到。如下是经常使用社交图标的标识,供你参考:

  • Facebook: fa-facebook
  • Twitter: fa-twitter
  • Google-plus: fa-google-plus
  • Linkedin: fa-linkedin
  • Tumblr: fa-tumblr
  • Medium: fa-medium
  • Slack: fa-slack
  • 新浪微博: fa-weibo
  • 微信: fa-wechat
  • QQ: fa-qq
3.13 修改打赏的二维码图片

在主题文件的 source/medias/reward 文件中,替换成你的的微信和支付宝的打赏二维码图片。

3.14配置音乐播放器(可选的)

在主题的 _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
}

3.15 文章 Front-matter 介绍

Front-matter 选项中的全部内容均为非必填的。但我仍然建议至少填写 titlecategoriestagsdate 的值。

配置选项 默认值 描述
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 文章标签,一篇文章能够多个标签

注意:

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

如下为文章的 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: 测试
---
3.16 修改主题颜色

在主题文件的 /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 {
    /* 动态切换背景颜色. */
}

推荐配色方案

3.17修改 banner 图和文章特点图

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 作同步修改。

3.18 制做动态标题

实现方法,引入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);
     }
 });
3.19 添加动态诗词

/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

3.20 添加一言语录

\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> &nbsp;&nbsp;<%- 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

3.21 鼠标点击文字特效

实现方法,引入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");
}
3.22. 修改原有相册

参考教程:传送门

3.23. 添加天气小插件

首先去中国天气官网:https://cj.weather.com.cn/plugin/pc,配置本身的插件,选择自定义插件—>自定义样式——>生成代码,而后会生成一段代码,复制粘贴到 themes/matery/layout/layout.ejs便可。

3.24. 关于我页面添加我的简历

打开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>

注意粘贴的位置和空格要正确,这里的位置随你本身设置,你也能够把简历做为第一个card,而后/source/about/index.md下面写上你的简历了(就像写博客同样)。

3.25外链跳转插件

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
  • enable - 是否开启hexo_external_link插件 - 默认 false
  • enable_base64_encode - 是否对跳转url使用base64编码 - 默认 fasle
  • url_param_name - url参数名,在跳转到外链传递给html_file_name的参数名 - 默认 ‘u’
  • html_file_name - 跳转到外链的页面文件路径 - 默认 ‘go.html’
  • target_blank - 是否为外链的a标签添加target='_blank' - 默认 true
  • link_rel - 设置外链的a标签的rel属性 - 默认 ‘external nofollow noopener noreferrer’
  • domain - 若是开启了防盗链,除了 localhost 和 domain 以外调用会跳到主页,同时也是判断连接是否为外链的依据 - 默认 window.location.host
  • safety_chain - go.html 为了防止外链盗用 对域名进行的判断 - 默认 false

3.24 添加雪花飘落效果

themes/matery/source/js目录下新建snow.js文件,打开这个网址传送门,将内容复制粘贴到cursor.js便可。

而后再themes/matery/layout/layout.ejs文件内添加下面的内容:

<script src="/js/snow.js"></script>
3.25 添加自定义页面

首先在站点目录下的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文件下的全部文件

知道方法后,你能够添加你本身想要添加的页面,让你的博客内容更加充实。

3.26 添加404页面

首先再站点根目录下的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>
3.27 文章生成永久连接

主题默认的文章连接配置是

premalink: :year/:month/:day/:title

这种生成的连接地址很长,文章版权的连接地址会出现一大串字符编码,一点也很差看。所以须要修改文章生成连接的格式。

首先再根目录下执行下面的命令:

hexo-abbrlinkGitHub地址

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字段以后而不会改变连接地址。

3.28添加Valine评论系统

登陆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

4.总结

本觉得使用hexo开发博客会很复杂很难,

然而发现大多数都是写好的,只有在配置文件上修改就行,

对于主题样式内容等不满意再去打开源码修改就行,

其实只有会一点前端知识即可以对源码大概进行你想要的定制呢,

耐心的能够研究下主题构造也不错呢。

今每天气不错!加油!!!

本博客原文:https://blog.onfree.cn/posts/c1595c80.html

相关文章
相关标签/搜索