Hexo主题casper使用教程

绝地灬酷狼 2022-04-23 10:20 178阅读 0赞

# Hexo主题casper使用教程 #

我看到的一个好的主题，对其中的部分代码进行了修改。  
原项目地址 [https://github.com/xzhih/hexo-theme-casper][https_github.com_xzhih_hexo-theme-casper]  
DEMO [https://blog.geekmubai.com][https_blog.geekmubai.com]

## 特性 ##

*  文章封面图（在首页文章摘要上显示）
 *  文章特色图（在文章详细页面上置顶）
 *  自定义菜单
 *  自定义 favicon, logo, 头部背景, 作者头像
 *  社交链接 ( 现在支持 github、哔哩哔哩、YouTube、微博、推特、脸书(我将它改为了CDSN )
 *  共三个插件（最新文章、分类、标签云）
 *  内容目录
 *  代码高亮
 *  响应式网页设计
 *  懒加载
 *  主题集成本地搜索
 *  Valine 评论系统
 *  Baidu 链接提交、Google Analytics
 *  Service Worker

## 安装方法 ##

### 下载 ###

在hexo目录下执行

git clone https://github.com/GeekMubai/hexo-casper.git themes/hexo-casper

### 激活 ###

把hexo配置文件 `_config.yml` 里的 `theme` 字段内容改为 `hexo-casper` 。

### 升级 ###

建议先备份一下在执行下面的操作。

cd themes/casper 
    git pull

添加统一的文章模板参数  
把下面的内容加入到 `scaffolds/post.md`,

cover_img:     # 在文章摘要上显示
    feature_img:   # 在文章详细页面上置顶
    description:   # 文章描述
    keywords:      # 关键字

### valine 评论系统 ###

使用方法请到他的官网查看，并结合下面的配置文件详细添加appID和appKey  
[https://valine.js.org/][https_valine.js.org]

### 添加关于页面 ###

hexo new page about

## 自定义配置 ##

# Config
    rss: https://geekmubai.com/feed         
    favicon: https://mubai.oss-cn-hangzhou.aliyuncs.com/icon.png
    blog_logo: 
    header_image: https://mubai.oss-cn-hangzhou.aliyuncs.com/background.jpg
    bio: 做一个特立独行的少数派
    post_toc: true
    
    # Keywords
    keywords: hexo, casper, ghost, theme
    
    # Menu
    menu:
      ABOUT: /about
      ARCHIVES: /archives
      # you can add here
    
    # author
    author_image: https://mubai.oss-cn-hangzhou.aliyuncs.com/author.png
    author_bio: 一个有趣的人
    author_location: 安徽·安庆
    
    # Social Links
    social:
      weibo: https://weibo.com/geekmubai
      github: https://github.com/geekmubai
      bilibili: https://space.bilibili.com/167817331/#
      facebook: https://blog.csdn.net/geekmubai
      twitter: 
      telegram:
      youtube: 
      # You only can use that I have added, I will keep adding
    
    # Footer Links
    footer_text: 
      皖ICP备17018037号: http://www.miitbeian.gov.cn
      # title: link
      # 粤公网安备xxxxxxx号: http://www.beian.gov.cn
    
    # Widget
    widgets:
      recent_posts: true
      category: true
      tagcloud: true
      # This is a simple theme, I think 3 is enough.
    
    # Gallery
    # https://github.com/sachinchoolur/lightgallery.js
    lightgallery: true
    
    # LazyLoad
    # home page has enabled, this value is to post page
    # https://github.com/dinbror/blazy
    lazyload: true
    
    # Local Search
    local_search: true
    
    # Comment
    # https://valine.js.org
    comment: true
    valine:
      notify: false # mail notifier , https://github.com/xCss/Valine/wiki 
      verify: false # Verification code
      appId: 
      appKey: 
      placeholder: 你是魔鬼吧，都不留言！ # comment box placeholder
      pageSize: 10 # pagination size
      avatar: mm # gravatar style
    
    # PWA
    # you need create a manifest.json file in hexo's source folder
    manifest: false
    service_workers: false
    
    navColor: '3c484e'
    
    # Baidu Push
    baidu: false
    
    # Google Analytics
    googleAnalytics: false
    GA_TRACKING_ID: UA-XXXXXXXXXX-1

[https_github.com_xzhih_hexo-theme-casper]: https://github.com/xzhih/hexo-theme-casper
[https_blog.geekmubai.com]: https://blog.geekmubai.com
[https_valine.js.org]: https://valine.js.org/