当前位置: 移动技术网 > IT编程>开发语言>其他编程 > Hexo+GitHub基本操作记录 图片无法显示 添加分类

Hexo+GitHub基本操作记录 图片无法显示 添加分类

2020年10月24日  | 移动技术网IT编程  | 我要评论
Hexo+Github搭建个人博客 更换主题 图片无法显示 添加分类标签 文章加密

Hexo环境搭建

参考文章:GitHub+hexo搭建博客
由于电脑已存在git,node.js,此次操作直接从安装hexo开始

检测node是否安装成功node -v
检测npm是否安装成功npm -v
检测git是否安装成功并配置成功git -version

遇到问题1: 无法生成github.io的域名
解决: 在创建仓库的时候需要勾选 Add a README file

遇到问题2: 图片无法显示
解决:

  • 在根目录下下载插件npm install https://github.com/CodeFalling/hexo-asset-image --save
  • 修改配置config.ymlpost_asset_folder: true
  • 重新new一个文件(如果还是不行,图片路径名前加上./)
  • (同时可以结合Typora,修改Typora的设置,如图)
    在这里插入图片描述

常用Hexo代码及含义

npm install hexo -g //安装
npm update hexo -g //升级 
hexo init //初始化博客 

hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新,无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存,若是网页正常情况下可以忽略这条命令

更换主题

  1. 在blog目录中
git clone https://github.com/iissnan/hexo-theme-next themes/next
  1. 将下载下来的theme中的主题文件夹,修改成与原来的主题文件夹同级
  2. 修改配置主题名称
    在这里插入图片描述

添加分类和标签

添加分类:

生成“分类”页
在bolg根目录开启终端输入hexo new page categories
成功后有INFO Created: D:\blog\source\categories\index.md
根据上面的路径,找到index.md这个文件,添加type: "categories"到内容中:
在这里插入图片描述
给文章添加“categories”属性
打开要添加目录的文章
在这里插入图片描述
下方的categories: web前端表示添加这篇文章到“web前端”这个分类。

hexo一篇文章只能属于一个分类,也就是说如果在“- web前端”下方添加“-xxx”,hexo不会产生两个分类,而是把分类嵌套(即该文章属于 “- web前端”下的 “-xxx ”分类)。

可以看见网站中categories中多出一个分类
在这里插入图片描述

添加标签:

生成“标签”页
在bolg根目录开启终端输入hexo new page tags
成功后有INFO Created: D:\blog\source\tags\index.md
根据上面的路径,找到index.md这个文件,添加type: "tags"到内容中:
在这里插入图片描述
给文章添加标签
在这里插入图片描述

设置文章加密访问

方法一:(尝试过,未成功,不知原因)

  1. 找到themes->next->layout->_partials->head.njk 添加如下代码,编译的时候会自动加入 HTML 中
    在这里插入图片描述
<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入查看密码') !== '{{ page.password }}'){
                alert('密码不正确,请询问主编大大');
                history.back();
            }
        }
    })();
</script>
  1. 在文章头中添加password标签
    在这里插入图片描述
    方法二:(成功)
    Hexo文章加密

本文地址:https://blog.csdn.net/qq_43643438/article/details/109260203

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网