hexo-theme-yummy

hexo-theme-yummy

移植Yummy-Jekyll 到Hexo

Demo Download

Hexo-theme-yummy

一次偶然的机会，发现了Yummy-Jekyll 这个jekyll主题，这种清爽简约的风格深得我心，于是着手移植到Hexo来。由于不会写前端，所有样式照搬。

Features

  • hexo主题基础功能
  • 评论系统
  • 阅读统计
  • 文章搜索功能
  • 相关文章推荐
  • 博客引流到公众号（观众公众号获得阅读更多的权限）

TimeLine

查看更新说明

使用说明

Hexo文档

安装

安装依赖

npm install hexo-related-popular-posts --save
npm install  hexo-prism-plugin --save

安装主题

  1. 进入Hexo站点文件夹，克隆本主题到themes/路径下：

    直接使用master分支，可能不稳定。 。

    # cd your hexo site directory
git clone https://github.com/cayzlh/hexo-theme-yummy.git themes/Yummy

    或者下载realease版本：https://github.com/cayzlh/hexo-theme-yummy/releases

  2. 重命名主题中的 _config.example.yml 为 _config.yml，然后可以使用配置文件配置主题

    cp -f themes/Yummy/_config.example.yml themes/Yummy/_config.yml

    此时_config.yml中是一些默认的配置， 请将相应信息改成自己的。

  3. 使用 hexo-prism-plugin插件

    否则代码样式不好看。否则代码样式不好看。否则代码样式不好看。

    安装插件

    npm install  hexo-prism-plugin --save

    根据提示，你可能还需执行

    npm audit fix

    修改站点配置文件_config.yml，禁用hexo默认的高亮插件，添加hexo-prism-plugin高亮插件支持。

    highlight:
  enable: false  # 将系统原来的高亮插件设置为false
  line_number: false
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
# 添加以下配置启用prism插件
prism_plugin:
  mode: 'preprocess'
  theme: 'tomorrow' # 推荐使用这个
  line_number: true    # default false 是否展示行号
  custom_css: '/css/common.css'# 这里要配这个，否则不好看。。

  4. 使用hexo-related-popular-posts插件，开启相关文章推荐功能

    npm install hexo-related-popular-posts --save

  5. 启用主题

    修改站点配置文件_config.yml，启用Yummy主题

    theme: Yummy

主题配置文件

topbar

配置页面右上角的几个小链接

topbar:
  homepage:    # 这个字段随便写
    name: 导航页
    url: https://www.cayzlh.com
  github:
    name: GitHub
    url: https://github.com/cayzlh
    target: _blank
  about:
    name: 关于
    url: /about

菜单配置，支持子菜单

menu:
  Home: # 这个字段随便写
    url: /
    name: 首页
  Archives:
    url: /archives
    name: 归档
  Tools:
    url: /
    name: 在线工具
    children:
      - name: Json在线工具
        url: https://www.cayzlh.com/tools/online-JSONFormat/
      - name: Markdown在线转换工具
        url: https://www.cayzlh.com/tools/online-markdown/

slogan 和 下面的一排链接

jumbotron:
  slogan: 记录成长路上的风景
  infos: ## 不配不显示，就是可以配很多个链接～～
    - name: 富强
      url: /
    - name: 民主
      url: /
    - name: 文明
      url: /
    - name: 和谐
      url: /
    - name: 自由
      url: /
    - name: 平等
      url: /
    - name: 公正
      url: /
    - name: 法制
      url: /
    - name: 爱国
      url: /
    - name: 敬业
      url: /
    - name: 诚信
      url: /
    - name: 友善
      url: /

社交链接配置

Icon和txt字段二选一

social:
  - url: https://github.com/cayzlh
    target: _blank
    icon: fa-github
    txt:
  - url: https://twitter.com/🐳Ant丶
    target: _blank
    icon: fa-twitter
    txt:
  - url: mailto:[email protected]
    target: _blank
    icon:
    txt: 邮

显示在页面下方和首页的右侧上方

favicon

配置站点的favicon icon

favicon: /favicon.svg  # 支持各种格式

精选文章

在首页的右侧展示精选文章，相当于置顶🔝，需在文章中添加 favorite: true 属性

favorites:
  enable: true # 是否展示精选文章
  title: 精选文章 # 标题
  num: 3  # 展示多少个， 建议不要太多

开源项目

在首页右侧展示开源项目，布局在精选文章的下面，支持github项目

openSource:
  enable: false # 是否展示
  title: 开源软件
  username: cayzlh # github用户名，用于展示stars 和 forks数
  repos:
    - url: https://github.com/cayzlh/hexo-theme-yummy
      name: hexo-theme-yummy # repo的名称，一定要填对
      title: hexo-theme-yummy # 展示到页面的名称
      description: 移植自Jekyll的一款hexo主题

白嫖CDN加速

jsDelivr:
  enable: true
  url: https://cdn.jsdelivr.net/gh/yourgithubname/yourreponame@master # 记得要替换成你的地址

本地调试js和css的时候需要设置成false

google站点相关设置

google:
  analytics:  # google 分析
    enable: false
    id: # google analytics ID
  verification: # 验证
    enable: false
    id: # google 站点验证，填你的

ICP

站点备案号，配置后显示在页脚部分

ICP: # 京ICP备123456789号

回到最顶端

top:
  enable: true # 是否开启回到最上面

rss

# 是否展示页面左下角的rss区域
rss:
  enable: true

归档页面设置

# 自定义归档页面的标题和副标题
archive:
  title: All My Blogs
  subtitle: Record the scenery on the road of growth

分类页面设置

# 分类页面设置，用于指定分类页的元素的展示，否则按照默认的文案展示
category:
  enable: false
  Git: # 这个个Key要写对应分类的名称，比如分类为Git的页面就如案例所示配置
    title: Git相关文章
    subtitle: git操作相关的文章

标签页面设置

# 标签页面设置，用于指定标签的元素的展示，否则按照默认的文案展示
tag:
  enable: false
  Docker:
    title: Docker~~~
    subtitle: docker~~~

# 页面下方copyright设置
copyright:
  enable: true
  name: 🐳Ant丶
  since: 2020

文章结尾版权声明

# 文章结尾设置
postending:
  enable: true # 是否启用
  image: true # 是否在文章结尾显示一个图片
  declaration: # 是否在文章结尾显示版权声明
    enable: true
    copyright: # 版权声明。不配则用默认的文案。支持html代码片段

busuanzi统计

# busuanzi统计
busuanzi:
  enable: true
  site: # 站点统计配置
    pv: true # 展示站点访问次数
    uv: true # 展示站点访问人次
  post: # 文章统计配置
    pv: true # 展示文章阅读次数

评论系统

以下评论插件一支持

  • gitalk
  • gitment
  • valine

配置文件，开启其中一个即可。

# 评论系统，开启相应的评论系统， 将会在你的文章下方展示评论，也可以用文章属性 comments 来控制
comment:
  enable: false  # 是否开启
  gitalk: # gitalk
    enable: false
    owner: # '你的 GitHub ID',
    repo: # '存储评论的 repo',
    oauth:
      clientId: # '你的 client ID'
      clientSecret: # '你的 client secret',
    admin:
  gitment: # gitment
    enable: false
    owner: # '你的 GitHub ID',
    repo: # '存储评论的 repo',
    oauth:
      client_id: # '你的 client ID'
      client_secret: # '你的 client secret',
  valine: # Valine 评论模块的配置，默认为不激活，如要使用，就请激活该配置项，并设置 appId 和 appKey.
    enable: false
    appId: # 你的appid
    appKey: # 你的appkey
    notify: false
    verify: false
    visitor: true
    avatar: 'mm' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
    pageSize: 10
    placeholder: 'just go go' # Comment Box placeholder
    guest_info: nick,link,mail # Comment header info

相关文章推荐

启用相关文章推荐，在文章结尾处显示相关文章， 根据标签关联。

popular_posts:
  enable: false
  title: 相关推荐
  max: 6

博客引流到公众号

# 公众号引流，需要插件 https://github.com/snowdreams1006/hexo-plugin-readmore
# 需要去 https://my.openwrite.cn 注册一个账号并开通增长工具：博客导流公众号
readmore:
  enable: false
  blogId: # 填写已申请的博客 id
  name:  # 填写已申请的博客名称
  qrcode: # 填写已申请的公众号二维码链接
  keyword: # 填写已申请的公众号回复关键字

开启这个功能，除了在主题配置文件中配置以外，还需要配置文章属性的影响，需要在文章中添加属性：readmore: true，如：

---
title: "About"
comments: true
readmore: true
---

其他

代码过于简单，没啥好说的了。。

License

MIT License

Copyright (c) 2020 🐳Ant丶

minimalacademicresumeportfoliodocumentationwikitailwindbootstrapdarkecommercegithub-pagesblog