hexo 主题优化

hexo常见操作

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo clean #清除部署緩存
hexo n == hexo new #新建文章
hexo g == hexo generate #生成静态页面至public目录
hexo s == hexo server #开启预览访问端口(默认端口4000,可在浏览器输入localhost:4000预览)
hexo d == hexo deploy #将.deploy目录部署到GitHub
hexo g -d #生成加部署
hexo g -s #生成加预览


next主题优化

next风格选择

next有四种风格,在站点配置文件搜索字段Scheme Settings可以看到,

# Scheme Settings
# ---------------------------------------------------------------
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

我这里用的是四种:Gemini

next菜单设置

比如可以看到我的主页有首页留言分类归档标签等菜单,
在站点配置文件下搜索menu:,可以看到

menu:
  home: / || home
  about: /about/ || user
  message: /message/ || comment
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

home就是首页;message就是留言…一开始只有首页和归档,其余的需要我们手动创建,
在站点根目录下打开命令行,输入hexo new page "about"
并在主题配置文件menu:字段处取消对about的注释
重新部署我们就可以看到主页有关于这个菜单了,其他的类似,
修改D:\hexoblog\source\about\index.md,就可以修改关于界面了
about: /about/ || user中的user是指关于菜单附件的图标用的是图标库里面名为user的图标

添加萌妹子动图

在根目录下打开命令行

输入npm install --save hexo-helper-live2d

修改站点配置文件(注意不是主题配置文件)

在末尾加入:

live2d:
	enable: true
	scriptFrom: local
	model:

​ scale: 1
​ hHeadPos: 0.5
​ vHeadPos: 0.618
display:
​ superSample: 2
​ width: 150
​ height: 300
​ position: right
​ hOffset: 0
​ vOffset: -20
mobile:
​ show: false
react:
​ opacityDefault: 0.5
​ opacityOnHover: 0.

实现文章首页"分类于"、"阅读次数"等效果

效果图如下:

在根目录下打开命令行

依次输入以下命令:

​ npm install hexo-wordcount --save
​ npm uninstall hexo-generator-index --save
​ npm install hexo-generator-index-pin-top --save

打开主题配置文件

打开相关开关:

​ post_wordcount:
​ item_text: true
​ wordcount: true
​ min2read: true
​ totalcount: true

打开…/themes/next/layout/_macro/post.swig文件

把里面的代码用下面的代码替换:
点击下载

打开…/themes/next/languages/zh-Hans.yml文件

搜索post字段,添加一行comments: 评论数,注意其余的不要改

设置某篇文章置顶

前面的流程走完后,只需要在写文章的时候在文章前面加入top: true
或者top: 100(100只是个例子,数字越大越靠前),就能实现置顶效果了


常见错误

本地预览和同时发布到远程的浏览结果不一致

这是由缓存造成的,需要先hexo clean,再hexo g -d部署到远程


markdown高级语法

插入连续多行的代码块

按一个tab键,然后贴代码,保证每一行代码前都要额外的tab键,同时最前面空一行。
比如,我前面插入的连续行代码的实现效果:

设置文字大小和颜色和居中效果

hello,world!
hello,world!
hello,world!
hello,world!

hello,world!

上面的效果需要在markdwon中的代码是这样的:

hello,world!    
<font color="#FF0000"> hello,world! </font>    
<font size=5> hello,world! </font>     
<font size=5 color="#FF0000">hello,world! </font>    
<center>hello,world!</center>    

插入表格

效果图:

左对齐标题右对齐标题居中对齐标题
短文本中等文本稍微长一点的文本
稍微长一点的文本短文本中等文本

markdown代码如下:

| 左对齐标题 | 右对齐标题 | 居中对齐标题 |
| :------| ------: | :------: |
| 短文本 | 中等文本 | 稍微长一点的文本 |
| 稍微长一点的文本 | 短文本 | 中等文本 |

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值