欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Hexo个人博客之yilia主题的安装和配置

程序员文章站 2024-03-18 16:43:58
...

前言,本篇文章讲述的是yilia主题的安装与配置,关于hexo的安装及github部署可以去看我的上一篇文章
Hexo yilia主题搭建自己的github个人博客(一)

1.yilia主题的安装(在文件夹目录下使用git bash)

 git clone http://github.com/litten/hexo-theme-yilia.git  themes/yilia

Hexo个人博客之yilia主题的安装和配置

Hexo个人博客之yilia主题的安装和配置

2.打开D:\blog_hexo\_config.yml修改主题

Hexo个人博客之yilia主题的安装和配置
更改后
Hexo个人博客之yilia主题的安装和配置
重新运行hexo s -g 命令,查看本地效果

Hexo个人博客之yilia主题的安装和配置

更换yilia主题成功,接下来我们修改对应的配置


基本信息的修改

1. 打开D:\blog_hexo\_config.yml,找到site下的title、author、language

Hexo个人博客之yilia主题的安装和配置

**更改后的效果**
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200626112449766.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg2NDkyNw==,size_16,color_FFFFFF,t_70)

2. 打开D:\blog_hexo\themes\yilia\_config.yml

  • 修改smart_menu下的friends、aboutme

    Hexo个人博客之yilia主题的安装和配置
    更改后的效果
    Hexo个人博客之yilia主题的安装和配置

    • 修改博客左边下方图标外接链接
      Hexo个人博客之yilia主题的安装和配置
      更改后的效果
      Hexo个人博客之yilia主题的安装和配置

如果你需要加入微信QQ这些的话,一定要以外网能访问到的图片链接形式,否则不会生效

3. 添加所有文章处的缺失模块

  • D:\blog_hexo下执行以下命令
npm i hexo-generator-json-content --save
  • 打开D:\blog_hexo\_config.yml配置文件,在最后添加以下代码:
jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true

Hexo个人博客之yilia主题的安装和配置

4. 完善代码行号显示错乱

  • 用编辑器打开 D:\blog_hexo\themes\yilia\source\main.0cf68a.css 文件,删除 white-space:pre-wrap; 这行代码
相关标签: 博客网站搭建