Coder Social home page Coder Social logo

s-xianyu.github.io's Introduction

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

itsNeko开源介绍

  • 基于 itsNeko开源博客是基于Hexo博客Matery主题魔改，感谢各位对本博客的喜爱与支持。
  • 作者 Hello，itsNeko，我是本博客的作者，itsNeko博主博客: itsNeko博客~
  • 赞赏 如果你觉得本开源博客还可以，欢迎大家的赞赏，赞赏二维码见页面：赞赏itsNeko开源博主~
  • 提示 本博客为纯静态，无数据库，文章使用markdown格式，图片存在json里面，整体打包上传至服务器即可。
  • 建议 最好懂一点编程知识，建议使用VsCode，善于使用“ ctrl+F ”快捷键定位然后修改自定义内容。

源码下载及命令

git clone 仓库地址
  • 将下载的整个文件夹在VsCode中打开，在终端中依次执行以下命令行
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文件中并修改图片链接即可。

    <style> /* banner背景图 */ .bg-cover { background-image: url("图片链接地址")!important; } </style>

怎样联系itsNeko

  • 留言：itsNeko博客地址:itsNeko博客~
  • 邮箱：[email protected] ======= 前言：本文是关于itsNeko开源博客食用方法详解，感谢使用本开源博客。时间过的好快，还好我都记录下来了。

itsNeko开源介绍

  • 基于 itsNeko开源博客是基于Hexo博客Matery主题魔改，感谢各位对本博客的喜爱与支持。
  • 作者 Hello，itsNeko，我是本博客的作者，itsNeko博主博客: itsNeko博客~
  • 赞赏 如果你觉得本开源博客还可以，欢迎大家的赞赏，赞赏二维码见页面：赞赏itsNeko开源博主~
  • 提示 本博客为纯静态，无数据库，文章使用markdown格式，图片存在json里面，整体打包上传至服务器即可。
  • 建议 最好懂一点编程知识，建议使用VsCode，善于使用“ ctrl+F ”快捷键定位然后修改自定义内容。

源码下载及命令

git clone 仓库地址
  • 将下载的整个文件夹在VsCode中打开，在终端中依次执行以下命令行
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文件中并修改图片链接即可。

   /* banner背景图 */
   .bg-cover {
      background-image: url("图片链接地址")!important;
    }

怎样联系itsNeko

6576c8929fd357beff1c3cfadded4a9b45374ea1

  • QQ: 2018854221

s-xianyu.github.io's People

Contributors

s-xianyu avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.