zoukankan      html  css  js  c++  java
  • 略略略

    hexo-theme-sakura主题 English document

    基于WordPress主题Sakura修改成Hexo的主题。

    demo预览

    正在开发中……

    交流群

    若你是小迷弟,加群QQ: 771362178

    若你是大迷哥,加群WX: 771362178

    主题特性

    • 首页大屏视频
    • 首页随机封面
    • 图片懒加载
    • valine评论
    • fancy-box相册
    • pjax支持,音乐不间断
    • aplayer音乐播放器
    • 多级导航菜单(按现在大部分hexo主题来说,这也算是个特性了)

    赞赏作者

    like this的话,可以考虑资助一下哦~非常感激!

    paypal | Alipay 支付宝 | WeChat Pay 微信支付

    未完善的使用教程

    2222222222222

    1、主题下载安装

    hexo-theme-sakura建议下载压缩包格式,因为除了主题内容还有些source的配置对新手来说比较太麻烦,直接下载解压就省去这些麻烦咯。

    下载好后解压到博客根目录(不是主题目录哦,重复的选择替换)。接着在命令行(cmd、bash)运行npm i安装依赖。

    2、主题配置

    博客根目录下的_config配置

    站点

    # Site
    title: 你的站点名
    subtitle:
    description: 站点简介
    keywords:
    author: 作者名
    language: zh-cn
    timezone:

    部署

    deploy:
      type: git
      repo: 
        github: 你的github仓库地址
        # coding: 你的coding仓库地址
      branch: master

    备份 (使用hexo b发布备份到远程仓库)

    backup:
      type: git
      message: backup my blog of https://honjun.github.io/
      repository:
        # 你的github仓库地址,备份分支名  (建议新建backup分支)
        github: https://github.com/honjun/honjun.github.io.git,backup
        # coding: https://git.coding.net/hojun/hojun.git,backup
    
    ``` -->
    
    
    
    <!-- ### 主题目录下的_config配置
    
    其中标明【改】的是需要修改部门,标明【选】是可改可不改,标明【非】是不用改的部分
    ```yml
    # site name
    # 站点名 【改】
    prefixName: さくら荘その
    siteName: hojun
    
    # favicon and site master avatar
    # 站点的favicon和头像 输入图片路径(下面的配置是都是cdn的相对路径,没有cdn请填写完整路径,建议使用jsdeliver搭建一个cdn啦,先去下载我的cdn替换下图片就行了,简单方便~)【改】
    favicon: /images/favicon.ico
    avatar: /img/custom/avatar.jpg
    
    # 站点url 【改】
    url: https://sakura.hojun.cn
    
    # 站点介绍(或者说是个人签名)【改】
    description: Live your life with passion! With some drive!
    
    # 站点cdn,没有就为空 【改】  若是cdn为空,一些图片地址就要填完整地址了,比如之前avatar就要填https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/custom/avatar.jpg
    cdn: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6
    
    # 开启pjax 【选】
    pjax: 1
    
    # 站点首页的公告信息 【改】
    notice: hexo-Sakura主题已经开源,目前正在开发中...
    
    # 懒加载的加载中图片 【选】
    lazyloadImg: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/loader/orange.progress-bar-stripe-loader.svg
    
    # 站点菜单配置 【选】
    menus:
      首页: { path: /, fa: fa-fort-awesome faa-shake }
      归档: { path: /archives, fa: fa-archive faa-shake, submenus: { 
        技术: {path: /categories/技术/, fa: fa-code }, 
        生活: {path: /categories/生活/, fa: fa-file-text-o }, 
        资源: {path: /categories/资源/, fa: fa-cloud-download }, 
        随想: {path: /categories/随想/, fa: fa-commenting-o },
        转载: {path: /categories/转载/, fa: fa-book }
      } }
      清单: { path: javascript:;, fa: fa-list-ul faa-vertical, submenus: { 
        书单: {path: /tags/悦读/, fa: fa-th-list faa-bounce }, 
        番组: {path: /bangumi/, fa: fa-film faa-vertical }, 
        歌单: {path: /music/, fa: fa-headphones },
        图集: {path: /tags/图集/, fa: fa-photo }
      } }
      留言板: { path: /comment/, fa: fa-pencil-square-o faa-tada }
      友人帐: { path: /links/, fa: fa-link faa-shake }
      赞赏: { path: /donate/, fa: fa-heart faa-pulse }
      关于: { path: /, fa: fa-leaf faa-wrench , submenus: { 
        我?: {path: /about/, fa: fa-meetup}, 
        主题: {path: /theme-sakura/, fa: iconfont icon-sakura },
        Lab: {path: /lab/, fa: fa-cogs },
      } }
      客户端: { path: /client/, fa: fa-android faa-vertical }
      RSS: { path: /atom.xml, fa: fa-rss faa-pulse }
    
    # Home page sort type: -1: newer first,1: older first. 【非】
    homePageSortType: -1
    
    # Home page article shown number) 【非】
    homeArticleShown: 10
    
    # 背景图片 【选】
    bgn: 8
    
    # startdash面板 url, title, desc img 【改】
    startdash: 
      - {url: /theme-sakura/, title: Sakura, desc: 本站 hexo 主题, img: /img/startdash/sakura.md.png}
      - {url: http://space.bilibili.com/271849279, title: Bilibili, desc: 博主的b站视频, img: /img/startdash/bilibili.jpg}
      - {url: /, title: hojun的万事屋, desc: 技术服务, img: /img/startdash/wangshiwu.jpg}
    
    
    # your site build time or founded date
    # 你的站点建立日期 【改】
    siteBuildingTime: 10/24/2019
    
    
    # 社交按钮(social)  url, img PC端配置 【改】
    social:
      github: {url: http://github.com/honjun, img: /img/social/github.png}
      sina: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/sina.png}
      wangyiyun: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/wangyiyun.png}
      zhihu: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/zhihu.png}
      email: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/email.svg}
      wechat: {url: /#, qrcode: /img/custom/wechat.jpg, img: /img/social/wechat.png}
    
    # 社交按钮(msocial)  url, img 移动端配置 【改】
    msocial:
      github: {url: http://github.com/honjun, fa: fa-github, color: 333}
      weibo: {url: http://weibo.com/mashirozx?is_all=1, fa: fa-weibo, color: dd4b39}
      qq: {url: https://wpa.qq.com/msgrd?v=3&uin=954655431&site=qq&menu=yes, fa: fa-qq, color: 25c6fe}
    
    # 赞赏二维码(其中wechatSQ是赞赏单页面的赞赏码图片)【改】
    donate:
      alipay: /img/custom/donate/AliPayQR.jpg
      wechat: /img/custom/donate/WeChanQR.jpg
      wechatSQ: /img/custom/donate/WeChanSQ.jpg
    
    # 首页视频地址为https://cdn.jsdelivr.net/gh/honjun/hojun@1.2/Unbroken.mp4,配置如下 【改】
    movies:
      url: https://cdn.jsdelivr.net/gh/honjun/hojun@1.2
      # 多个视频用逗号隔开,随机获取。支持的格式目前已知MP4,Flv。其他的可以试下,不保证有用
      name: Unbroken.mp4
    
    # 左下角aplayer播放器配置 主要改id和server这两项,修改详见[aplayer文档] 【改】
    aplayer: 
      id: 2660651585
      server: netease
      type: playlist
      fixed: true
      mini: false
      autoplay: false
      loop: all
      order: random
      preload: auto
      volume 大专栏  略略略: 0.7
      mutex: true
    
    # Valine评论配置【改】
    valine: true
    v_appId: GyC3NzMvd0hT9Yyd2hYIC0MN-gzGzoHsz
    v_appKey: mgOpfzbkHYqU92CV4IDlAUHQ

    分类页和标签页配置

    分类页

    标签页

    配置项在themesSakuralanguageszh-cn.yml里。新增一个分类或标签最好加下哦,当然嫌麻烦可以直接使用一张默认图片(可以改主题或者直接把404图片替换下,征求下意见要不要给这个在配置文件中加个开关,可以issue或群里提出来),现在是没设置的话会使用那种倒立小狗404哦。

    #category
    # 按分类名创建
    技术:
        #中文标题
        zh: 野生技术协会 
        # 英文标题
        en: Geek – Only for Love
        # 封面图片
        img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/banner/coding.jpg
    生活:
        zh: 生活
        en: live
        img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/banner/writing.jpg
    
    #tag
    # 标签名即是标题
    悦读:
        # 封面图片
        img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/banner/reading.jpg

    单页面封面配置


    如留言板页面页面,位于source下的comment下,打开index.md如下:

    ---
    title: comment
    date: 2018-12-20 23:13:48
    keywords: 留言板
    description: 
    comments: true
    # 在这里配置单页面头部图片,自定义替换哦~
    photos: https://cdn.jsdelivr.net/gh/honjun/cdn@1.4/img/banner/comment.jpg
    ---

    单页面配置

    番组计划页 (请直接在下载后的文件中改,下面的添加了注释可能会有些影响)

    ---
    layout: bangumi
    title: bangumi
    comments: false
    date: 2019-02-10 21:32:48
    keywords:
    description:
    bangumis:
      # 番组图片
      - img: https://lain.bgm.tv/pic/cover/l/0e/1e/218971_2y351.jpg
      # 番组名
        title: 朝花夕誓——于离别之朝束起约定之花
      # 追番状态 (追番ing/已追完)
        status: 已追完
      # 追番进度
        progress: 100
      # 番剧日文名称
        jp: さよならの朝に約束の花をかざろう
      # 放送时间
        time: 放送时间: 2018-02-24 SUN.
      # 番剧介绍
        desc:  住在远离尘嚣的土地,一边将每天的事情编织成名为希比欧的布,一边静静生活的伊欧夫人民。在15岁左右外表就停止成长,拥有数百年寿命的他们,被称为“离别的一族”,并被视为活着的传说。没有双亲的伊欧夫少女玛奇亚,过着被伙伴包围的平稳日子,却总感觉“孤身一人”。他们的这种日常,一瞬间就崩溃消失。追求伊欧夫的长寿之血,梅萨蒂军乘坐着名为雷纳特的古代兽发动了进攻。在绝望与混乱之中,伊欧夫的第一美女蕾莉亚被梅萨蒂带走,而玛奇亚暗恋的少年克里姆也失踪了。玛奇亚虽然总算逃脱了,却失去了伙伴和归去之地……。
      - img: https://lain.bgm.tv/pic/cover/l/0e/1e/218971_2y351.jpg
        title: 朝花夕誓——于离别之朝束起约定之花
        status: 已追完
        progress: 50
        jp: さよならの朝に約束の花をかざろう
        time: 放送时间: 2018-02-24 SUN.
        desc: 住在远离尘嚣的土地,一边将每天的事情编织成名为希比欧的布,一边静静生活的伊欧夫人民。在15岁左右外表就停止成长,拥有数百年寿命的他们,被称为“离别的一族”,并被视为活着的传说。没有双亲的伊欧夫少女玛奇亚,过着被伙伴包围的平稳日子,却总感觉“孤身一人”。他们的这种日常,一瞬间就崩溃消失。追求伊欧夫的长寿之血,梅萨蒂军乘坐着名为雷纳特的古代兽发动了进攻。在绝望与混乱之中,伊欧夫的第一美女蕾莉亚被梅萨蒂带走,而玛奇亚暗恋的少年克里姆也失踪了。玛奇亚虽然总算逃脱了,却失去了伙伴和归去之地……。
    ---

    友链页 (请直接在下载后的文件中改,下面的添加了注释可能会有些影响)

    ---
    layout: links
    title: links
    # 创建日期,可以改下
    date: 2018-12-19 23:11:06 
    # 图片上的标题,自定义修改
    keywords: 友人帐 
    description: 
    # true/false 开启/关闭评论
    comments: true 
    # 页面头部图片,自定义修改
    photos: https://cdn.jsdelivr.net/gh/honjun/cdn@1.4/img/banner/links.jpg 
    # 友链配置
    links: 
      # 类型分组
      - group: 个人项目
        # 类型简介
        desc: 充分说明这家伙是条咸鱼 < ( ̄︶ ̄)>
        items:
        # 友链链接
        - url: https://shino.cc/fgvf
        # 友链头像
          img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
        # 友链站点名
          name: Google
        # 友链介绍  下面雷同
          desc: Google 镜像
        - url: https://shino.cc/fgvf
          img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
          name: Google
          desc: Google 镜像
      # 类型分组...
      - group: 小伙伴们
        desc: 欢迎交换友链 ꉂ(ˊᗜˋ)
        items:
        - url: https://shino.cc/fgvf
          img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
          name: Google
          desc: Google 镜像
        - url: https://shino.cc/fgvf
          img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
          name: Google
          desc: Google 镜像
    ---

    写文章配置

    主题集成了个人插件hexo-tag-bili和hexo-tag-fancybox_img。其中hexo-tag-bili用来在文章或单页面中插入B站外链视频,使用语法如下:

    {% bili video_id [page] %}

    详细使用教程详见hexo-tag-bili

    hexo-tag-fancybox_img用来在文章或单页面中图片,使用语法如下:

    {% fb_img src [caption] %}

    详细使用教程详见hexo-tag-fancybox_img

    还有啥,一时想不起来……

    To be continued…

  • 相关阅读:
    Atitit attilax要工作研究的要素 纪要 方案 趋势 方向 概念 理论
    Atitit 常见每日流程日程日常工作.docx v7 r8f
    Atitit it 互联网 软件牛人的博客列表
    Atitit 信息链(Information Chain)的概念理解 attilax总结
    Atitit 知识点的体系化 框架与方法 如何了解 看待xxx
    Atitit 聚合搜索多个微博 attilax总结
    Atitit 企业知识管理PKM与PIM
    Atitit 项目沟通管理 Atitit 沟通之道 attilax著.docx
    Atitit 项目管理软件 在线服务 attilax总结 1. 项目管理协作的历史 1 1.1. Worktile 406k 1 1.2. Teambition  584k in baidu
    Atitit.每周末总结 于每周一计划日程表 流程表 v8 import 上周遗漏日志补充 检查话费 检查流量情况 Crm问候 Crm表total and 问候
  • 原文地址:https://www.cnblogs.com/lijianming180/p/12366315.html
Copyright © 2011-2022 走看看