hexo/next主题自定义集合

访问原文

next10.png

怎么发文章

git里输入hexo n “文章标题”,回车
source/_posts中就会出现一个名为文章标题.md的文件;
编辑md文件,md全名为MarkDown,是种轻量级的页面格式文件!像我现在正在用印象笔记里的MarkDown编辑

next1.png

编辑好了文章,先再本地预览

hexo g
hexo s

浏览器打开输入http://localhost:4000,如果不行,就重复几次gs命令
确认文章之后

hexo d

怎么修改网站图标Favicon

准备好图标


next2.png

命名为favicon.ico,放到github的images里,修改你主题下的_config.yml文件

# favicon
favicon: /img/favicon.png

成果:


next3.png

怎么防止每次hexo clean后CNAME文件被删除

先把github中的CNAME文件复制一份到本地public
再安装插件

npm install hexo-generator-cname --save

根目录_config.yml中添加

Plugins:
- hexo-generator-cname

并修改

url: looseyouth.com

这样CNAME文件就不会被删除了!

怎么让文章带图片

首先下载插件

npm install hexo-asset-image --save

_config.yml配置文件中,修改

post_asset_folder: true

然后每次hexo n “文章标题”时,_posts文件夹里都会新建一个文章标题的文件夹,把你的图片素材同意放这里,然后md格式的文章正文里引用[图片上传失败...(image-998c49-1564492878984)]就能添加图片素材了!

怎么SEO优化

安装sitemap站点地图自动生成插件

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

修改站点配置文件
sitemap文件添加到站点配置文件_config.yml中,并修改url字段的值,其值默认为http://yoursite.com

sitemap: 
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml
url: looseyouth.com

执行hexo g就能在站点public\目录中生成sitemap.xmlbaidusitemap.xml了;其中第一个是一会要提交给google的,后面那个看名字当然就是提交给Baidu的了;

然后添加蜘蛛协议
在站点source文件夹下新建robots.txt文件,文件内容如下:

User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /tags/ 
Allow: /resources/ 
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: https://looseyouth.com/sitemap.xml
Sitemap: https://looseyouth.com/baidusitemap.xml

主题清单配置:

baidu_push: true

提交

怎么让首页文章折叠

修改主题下的_config.yml

auto_excerpt:
      enable: false
      length: 150

enablefalse改成truelength可以设定文章预览的文本长度。
或者
在文章中添加``

怎么设置为中文站

站点根目录_config.yml
设置language: zh-CN

怎么添加文章点击图片放大功能

切到next/source/lib
下载插件

git clone https://github.com/theme-next/theme-next-fancybox3 fancybox

更改next/_config.yml
fancybox: true

next4.png

怎么增加评论模块和阅读统计

阅读统计教程
评论教程
修改主题下的_config.yml

valine:
  enable: true
  .
  .
  .
leancloud_visitors:
  enable: true
next7.png
next8.png

怎么增加打赏模块

主题下的_config.yml

# Reward (Donate)
reward_settings:
  # If true, reward would be displayed in every article by default.
  # You can show or hide reward in a specific article throuth `reward: true | false` in Front-matter.
  enable: true
  animation: false
  comment: 感谢您的访问,您的支持将鼓励我继续创作!

reward:
  wechatpay: /images/wechat.jpg
  alipay: /images/alipay.jpg
  #bitcoin: /images/bitcoin.png
next5.png
next6.png

怎么增加分类/关于/标签模块

教程
以增加分类为例,其他同理

$ hexo new page categories

添加成功后显示INFO Created: ~/Documents/blog/source/categories/index.md
根据上面的路径,找到index.md这个文件,打开后默认内容是这样的:

---
title: 文章分类
date: 2017-05-27 13:47:40
---

添加type: "categories"到内容中,添加后是这样的:

---
title: 文章分类
date: 2017-05-27 13:47:40
type: "categories"
---

保存并关闭文件。
然后在文章中添加分类属性

---
title: 网站自定义篇
date: 2019-07-24 20:57:59
categories: 网站
---
next9.png

怎么增加头像

主题下的_config.yml

avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/apple-touch-icon-next.png  //头像图标
  # If true, the avatar would be dispalyed in circle.
  rounded: true //是否为圆角
  # If true, the avatar would be rotated with the cursor.
  rotated: false //是否旋转

怎么增加个人其他网站

主题下的_config.yml

social:
  GitHub: https://github.com/looseyouth || github
  #E-Mail: mailto:2507262@qq.com || envelope
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  Instagram: https://instagram.com/evenxiangyong || instagram
  #Skype: skype:yourname?call|chat || skype

我这里只放开了GitHub和Instagram

怎么增加RSS订阅功能

教程
安装hexo-generator-feed

在hexo根目录下执行下列命令
npm install hexo-generator-feed --save

然后在根目录_config.yml中配置如下:

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png

在主题对应的_config.yml中的social下加入
social: rss fa: /atom.xml
然后hexo g重新渲染,hexo s重启项目,就可以在首页看到RSS按钮了。

推荐阅读更多精彩内容