个人建立hexo博客Matery主题的过程心得

您所在的位置:网站首页 qq的留言板怎么不见了 个人建立hexo博客Matery主题的过程心得

个人建立hexo博客Matery主题的过程心得

2024-07-13 12:47| 来源: 网络整理| 查看: 265

本文已发布于个人博客https://tianjuewudi.gitee.io/,作为第一篇文章。有兴趣者可以去看看效果。

博客搭建 下载git和node

首先,搭建博客需要两个环境,一个是node.js,一个是git。

打开cmd控制台输入

node -v #查看node版本 git --version #查看git版本

在这里插入图片描述

如果没有显示版本号则需要配置环境变量:

右键点击“我的电脑”→高级系统设置→环境变量

给在系统变量给node新建变量:

变量:NODE_PATH 值:node文件夹所在地址(如:F:\node)

然后点击系统变量中Path的编辑,新建以下几个环境变量:

F:\node\ F:\Git\Git\cmd F:\node\node_global\ #具体情况需要看文件位置而定

然后再验证node和git的版本。

cnpm安装

直接用npm速度会比较慢(源在国外),因此要利用npm安装cnpm.

打开Git Bash输入以下命令:

npm install -g cnpm --registry=http://registry.npm.taobao.org #安装淘宝的cnpm 管理器

安装完成后,以后可以用cnpm直接代替npm.

hexo框架安装 cnpm install -g hexo-cli #安装hexo框架 hexo -v #查看hexo版本 利用hexo搭建博客

在一个地方创建空文件夹(命名blog),所有东西将在里面生成。

打开文件夹,在此文件夹下运行git bash(右键单击空白处)

sudo hexo init #生成博客 初始化博客

这时候系统会自动克隆文件到blog,并默认landscape主题。再输入命令:

hexo s #启动本地博客服务

浏览器访问 http://localhost:4000/,这时可以看到系统默认的版本。

创建文章 hexo n "我的第一篇文章" #创建新的文章

可以看到在source文件夹下的_posts文件夹下创建了.md文件。

打开文件就可以编辑内容,里面是基于markdown语法的。 想了解Markdown语法如何使用,请看b站视频15分钟快速上手Markdown教程

部署到gitee

输入命令:

hexo clean #清理 hexo g #生成 hexo s #启动本地服务器

这时可以再本地 http://localhost:4000/查看自己未发布的版本。

然后我们可以把它部署到网上了,部署的方案有很多种,可以把它部署到github,也可以部署到gitee,由于github访问速度较慢,且有的地区无法访问,因此我个人是部署到了gitee上。

首先你必须有个gitee账号,创建一个公开仓库,注意命名和路径必须与你的用户名一致(不是昵称)。

创建完仓库后,点击管理

在这里插入图片描述

此处可以查看仓库的路径,复制这个路径,等下用到。

打开位于Blog文件夹下的_config.yml文件,这个文件是用来配置你的博客的。滑到底端,改下面的三行代码并保存:

deploy: type: git repo: https://gitee.com/用户名/用户名.git #你的仓库地址+.git branch: master

然后安装git部署插件:

cnpm install --save hexo-deployer-git

然后在git bash上输入命令:

hexo d # 部署到仓库

然后输入你gitee的用户名和密码,等部署完毕,点开仓库,可以发现里面有你部署进去的文件。

在这里插入图片描述

此时点击服务里面的gitee Pages,对内容进行更新:

在这里插入图片描述

更新完成后就可以登录https://你的用户名.gitee.io/对你的博客进行访问啦!

Matery主题的搭建和完善 主题下载和更改 git clone https://github.com/blinkfox/hexo-theme-matery #在themes文件夹下执行命令,下载matery主题到本地

打开blog文件夹下的_config.yml,对其中的内容进行更改:

# Site title: 微笑紫瞳星 subtitle: '感谢各位的来访,请在留言板上留下你的足迹' description: '本站记录本人各种学习的旅途,用于巩固自我并启发后来人' keywords: [博客制作,个人经验分享,Unity,人工智能等] author: 微笑紫瞳星 language: zh-CN timezone: '' # URL ## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/' url: http://tianjuewudi.gitee.io/ root: / permalink: :year/:month/:day/:title/ permalink_defaults: pretty_urls: trailing_index: true # Set to false to remove trailing 'index.html' from permalinks trailing_html: true # Set to false to remove trailing '.html' from permalinks

主题修改找到关键词theme把内容替换成自己的主题:

theme: hexo-theme-matery

其他还有很多内容关于各种插件,我将一一讲述。

Matery主题配置

效果预览:

在这里插入图片描述

打开themes文件夹下的Matery主题文件夹。首先打开media文件夹,对里面的文件进行一一说明:

banner中存放的是在首页展示的图片,一天换一张,共7张,一个星期轮一次,可对其进行替换,图片名称须相同。fetureimages中的图片将被展示在相册中,且在没有给文章设置封面时,随机挑选一张作为封面,可替换。reward中存放着别人打赏你扫描的二维码,一张微信,一张支付宝,可替换。comment_bg.png是评论区上的图片。icp.png是备案标志。logo.png是你昵称旁的标志,可替换。

打开matery文件夹下的_config.yml可对主题进行配置

首页的轮播设置(页首语和文章推送):

cover: showPrevNext: true # 是否显示左右切换按钮. Whether to display the left and right toggle buttons. showIndicators: true # 是否显示指示器. # Whether to display the indicators autoLoop: true # 是否自动轮播. Whether it is automatically rotated. duration: 120 # 切换延迟时间. Switching delay time. intervalTime: 5000 # 自动切换下一张的间隔时间. Automatically switch the interval of the next one. useConfig: false # 是否使用配置文件, 在 _data/covers.json 下配置推荐文章, false则使用主题在文章中的配置 cover coverImg # useConfig 使用方式: 将主题 hexo-theme-matery/source/_data/covers.json 移动到 my-blog/source/_data/下修改配置即可

我的梦想模块:

dream: enable: true showTitle: true title: 关于多巴胺的兴趣驱动 text: 了解自身的兴趣产生和作用机制是控制自我的重要一步,多巴胺是能让自身产生兴奋愉悦感的物质,对于任何事物的任何兴趣都是基于多巴胺驱动的,但奈何人体对于多巴胺具有耐受性,长期沉浸于高多巴胺分泌的环境下会使得人体对于快乐的感觉变得迟钝。因此,让自己沉浸于技术学习的最好办法是平时隔绝高多巴胺分泌的娱乐活动,但又把这种活动作为阶段性成就的奖赏,你便会得到数倍于平时的快乐。

在这里插入图片描述

其他以此类推,代码注释非常友好,可以轻易知道其功能。

看板娘模块的安装和使用

模块安装:

cnpm install --save hexo-helper-live2d

下载完成后,可以在node_modules文件夹中找到自己安装的插件。

然后下载你想要的看板娘模块(可以自己到网上找哪个合心意的),执行命令:

cnpm install {packagename} # 例如cnpm install live2d-widget-model-haru

下载完成后,回到blog根目录下配置_config.yml,添加以下代码(model要根据自己情况设置):

live2d: enable: true scriptFrom: local pluginRootPath: live2dw/ pluginJsPath: lib/ pluginModelPath: assets/ tagMode: false debug: false model: use: live2d-widget-model-z16 display: position: right width: 200 height: 400 mobile: show: false

这样在右下角有看板娘啦!

音乐播放器的使用

进入matery主题文件夹下的_config.yml,可以发现matery主题自带一个音乐播放器模块,对其进行修改:

# 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: 5456680252 # require song id / playlist id / album id / search keyword # 503838841 fixed: true # 开启吸底模式 autoplay: true # 是否自动播放 theme: '#42b983' loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none' order: 'random' # 音频循环顺序, 可选值: 'list', 'random' preload: 'auto' # 预加载,可选值: 'none', 'metadata', 'auto' volume: 0.7 # 默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效 listFolded: true # 列表默认折叠 hideLrc: true # 隐藏歌词

这里最重要的是id号,这决定了我们播放的歌单,默认是播放网易云音乐(server: netease),腾讯,酷狗,虾米,百度音乐都可以,这里以网易云为例:

首先在网易云上创建自己的歌单,然后用浏览器打开网易云音乐,打开你的歌单页面,看网址,网站后面的一串数字就是你歌单的id,把它填到配置中去。

Valine评论系统的使用

可以看到在matery主题_config.yml有这么一段代码(enable改为true):

# The configuration of the Valine comment module is not activated by default. # To use it, activate the configuration item and set appId and appKey. # Valine 评论模块的配置,默认为不激活,如要使用,就请激活该配置项,并设置 appId 和 appKey. valine: enable: true appId: appKey: notify: true verify: false visitor: true avatar: 'mm' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide pageSize: 10 placeholder: '请畅所欲言' # Comment Box placeholder background: /medias/comment_bg.png

在这里,我们只需填写的内容只有appId和appKey。具体操作访问https://valine.js.org/quickstart.html

然后把你得到的appId和appKey填入其中,那么在留言板和每篇文章的最后都会出现这么一个评论区:

在这里插入图片描述

这样利用leanCloud就可以无后端得开发出一个评论区啦,非常简单便捷。

文章图片无法显示问题

hexo根目录下运行

cnpm install https://github.com/CodeFalling/hexo-asset-image --save

安装成功后这个插件的内容需要修改(可能有bug)

打开/node_modules/hexo-asset-image/index.js,将内容更换为下面的代码

'use strict'; var cheerio = require('cheerio'); // http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string function getPosition(str, m, i) { return str.split(m, i).join(m).length; } var version = String(hexo.version).split('.'); hexo.extend.filter.register('after_post_render', function(data){ var config = hexo.config; if(config.post_asset_folder){ var link = data.permalink; if(version.length > 0 && Number(version[0]) == 3) var beginPos = getPosition(link, '/', 1) + 1; else var beginPos = getPosition(link, '/', 3) + 1; // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html". var endPos = link.lastIndexOf('/') + 1; link = link.substring(beginPos, endPos); var toprocess = ['excerpt', 'more', 'content']; for(var i = 0; i


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3