关于itsNeko开源博客食用方法

2022-03-30 08:16:36 浏览数 (1)

前言:本文是关于itsNeko开源博客食用方法详解,感谢使用本开源博客。时间过的好快,还好我都记录下来了。

itsNeko开源介绍

  • 基于 itsNeko开源博客是基于Hexo博客Matery主题魔改,感谢各位对本博客的喜爱与支持。
  • 提示 本博客为纯静态,无数据库,文章使用markdown格式,图片存在json里面,整体打包上传至服务器即可。
  • 建议 最好懂一点编程知识,建议使用VsCode,善于使用“ ctrl F ”快捷键定位然后修改自定义内容。

源码下载及命令

  • 本开源博客源码已公开在在博主的GitHub仓库,国内也可使用Gitee,希望得到各位的小星星,Star
  • GitHub仓库:itsNeko开源博客源码GitHub地址
  • Gitee仓库:itsNeko开源博客源码Gitee地址
  • 首先,新建一个文件夹名为“ nekoblog ”,在该文件夹下打开git bash,执行命令行
代码语言:javascript复制
git clone 仓库地址
  • 将下载的整个文件夹在VsCode中打开,在终端中依次执行以下命令行
代码语言:javascript复制
npm install
hexo init
hexo g
hexo s
  • 然后在浏览器中,打开“ http://localhost:4000/ ”,即可实时预览网站,再依次修改网站内容。

注意:依次执行完上述4条命令后,若遇到报错极大概率是npm install的问题,也可能是网络问题,建议删除整个“ node_modules ”文件夹,然后重新执行上述命令行。

各页面配置详解

首页
1、网站标题描述等

/nekoblog/_config.yml文件中,使用“ ctrl F ”快捷键定位到“ Site ”,然后自行修改内容。

2、logo图片与logo字体
  • logo图片: 在/themes/_config.yml文件中,使用“ ctrl F ”快捷键定位到“ 配置网站favicon和网站LOGO ”,然后自行修改图片并注意图片格式(此处建议图片大小为180*116最佳)。
  • logo字体: 在/themes/layout/_partial/header.ejs文件中,使用“ ctrl F ”快捷键定位到“ itsNeko-openSource-Blog ”,然后自行修改大屏幕和小屏幕下logo字体(此处建议小屏下字体数目不宜过多)。
3、banner图上打字效果字体

/themes/_config.yml文件中,使用“ ctrl F ”快捷键定位到“ sub1 ”,然后自行修改。

4、《质数的孤独》内容部分

/themes/layout/_widget/dream.ejs文件中,使用“ ctrl F ”快捷键定位到“ 《质数的孤独》 ”,然后自行修改标题和内容。

5、公告栏作者等内容部分

/themes/layout/index.ejs文件中,使用“ ctrl F ”快捷键定位到“ 公告文字栏开始 ”,然后自行修改内容。

6、footer内容部分

/themes/layout/_partial/footer.ejs文件中,使用“ ctrl F ”快捷键定位到“ 版权信息 ”,然后自行修改各类内容;此处还要在/themes/_config.yml文件中,使用“ ctrl F ”快捷键定位到“ socialLink ”,然后自行修改。

关于
1、配置个人信息

/themes/_config.yml文件中,使用“ ctrl F ”快捷键定位到“ profile ”,然后自行修改头像、职业和个人介绍。

2、个人介绍内容

/themes/layout/about.ejs文件中,使用“ ctrl F ”快捷键定位到“ 关于我哦 ”,然后自行个人介绍介绍。

相册
1、页面介绍

/themes/layout/galley.ejs文件中,使用“ ctrl F ”快捷键定位到“ itsNeko开源博客相册 ”,然后自行修改此内容。

2、相册数据

相册是存在json里面的,在/nekoblog/source/_data/galley.json文件中。一个相册就是在一个{}对象内的json数据。

3、新建一个相册流程
  • 首先,找到/nekoblog/source/galley文件夹。
  • 复制已存在的“ itsNeko博主的绘画作品 ”文件夹,并取名。
  • 打开新取名文件夹下的index.md文件,然后修改title字段必须与新取名文件夹名称相同,否则运行报错。
  • 然后,在/nekoblog/source/_data/galley.json文件中,复制已存在的{}对象内的json数据,与第一段并以逗号区隔,然后修改新相册的各类内容。并注意:name,url_name,album内的title这三个字段内容必须与新取名文件夹名称相同,否则运行报错。
链接
增加友情链接
  • 友链信息是存储在/nekoblog/source/_data/friends.json文件中,一个友链就是在一个{}对象内的json数据,自行增添。
增加网址收藏
  • 网址收藏信息是存储在/nekoblog/source/_data/collection.json文件中,一个网址信息就是在一个{}对象内的json数据,自行增添。
其余

其余页面自定义修改的内容不多,或者没必要修改,这里给出其余页面的对应文件,可自行根据需要定位到对应页面文件中进行修改。

  • 书单 -> /themes/layout/books.ejs
  • 留言板 -> /themes/layout/contact.ejs
  • 实战项目 -> /themes/layout/project.ejs
  • 博客打赏记录 -> /themes/layout/donate.ejs
  • ticktack -> /themes/layout/ticktack.ejs
  • 实战项目 -> /themes/layout/project.ejs
  • vlog -> /themes/layout/videos.ejs 使用“ ctrl F ”快捷键定位到“ src=”//player.bilibili ”,然后自行修改两个视频的src,建议使用B站的外链。
  • music -> /themes/layout/musics.ejs 使用“ ctrl F ”快捷键定位到“ id=” ”,然后自行修改两个歌单的id,建议使用网易云和QQ音乐的外链。
  • urls.txt -> /nekoblog/urls.txt将内容替换成自己网站的url地址即可。
  • 网站2个_config.yml文件 -> 主要是网站的总体配置,自行打开两个文件然后只修改里面的包含个人信息的部分,其余不动。

撰写第一篇文章

  • 修改完个人信息后,你便可以撰写属于你的第一篇文章啦。
  • 文章采用markdown语法,所有文章存储在/nekoblog/source/_posts文件夹中。
  • 这里我已给出常用的两类文章模板,可直接复制粘贴然后(修改文章名,链接后缀建议用英文,标签建议只用一个,分类,时间,以及文章banner图片)形成新的文章。

怎样开通评论

  • 本开源博客使用valine评论,环境以及搭好,只需填写valine配置数据即可。
  • 自行根据网上教程得到配置数据,关键词 “ Hexo 博客添加 Valine 评论系统 ”,教程之一:Hexo 博客添加 Valine 评论系统
  • 注意:本开源博客中已经搭好了环境,比如valine.min.js,valine.ejs等文件已经存在,不用再根据教程添加这些文件,只需根据教程步骤配置其余,然后获取到 APP ID 和 APP KEY。
  • 然后,将获取到的 APP ID 和 APP KEY,在/themes/_config.yml文件中,使用“ ctrl F ”快捷键定位到“ valine ”,然后自行修改appId,appKey值即可。
  • 多说一句,若最后评论功能总是报错,不知道怎么弄,那么建议一切根据外链教程(这个不行,换个完整版教程)操作,可替换本博客已经存在的环境文件,学会自己独立使用浏览器解决问题

网站怎样上线

  • 免费版 使用gitee免费托管 关键词,“ Hexo部署到Gitee ”,随机教程:Hexo 部署到 Gitee
  • 收费版 自行购买域名服务器 关键词,“ Hexo部署到自己服务器 ”

七零八碎补充

可自行根据需要定位到对应文件中进行修改。

  • 赞赏二维码图片 -> /themes/source/medias/reward
  • 鼠标左键点击文字 -> /themes/source/js/click_show_text.js
  • 网站标题栏和footer栏背景颜色 -> /themes/source/css/matery.css 在该文件中使用“ ctrl F ”快捷键定位到“ 网站标题栏和footer栏背景颜色 ”,然后自行修改颜色。
  • 各大页面banner图 -> 若你不想使用默认图片,将以下代码复制到对应页面ejs文件中并修改图片链接即可。
代码语言:javascript复制
<style>
  /* banner背景图 */
  .bg-cover {
      background-image: url("图片链接地址")!important;
  }
</style>

0 人点赞