轻量化的响应式Hexo博客主题。

# BlueLake [English](README.en.md) | [简体中文](README.md) 一个简洁轻量化的响应式[Hexo](https://hexo.io/)博客主题。 - [点击预览](http://chaoo.oschina.io/) [](https://chaoo.oschina.io/) ## 一、安装 ### 1. hexo 安装 hexo 安装前，需要确保 git、node、npm 已经安装。因为安装 hexo 需要使用 npm 命令，hexo 初始化需要使用 git。 **1.1 安装 hexo** ``` $ sudo npm install -g hexo-cli /usr/local/node-6.11/bin/hexo -> /usr/local/node-6.11/lib/node_modules/hexo-cli/bin/hexo /usr/local/node-6.11/lib └─┬ hexo-cli@1.0.4 ├── abbrev@1.1.1 ├── bluebird@3.5.1 ..... ``` **1.2 初始化博客文件夹** ``` $ hexo init hexo INFO Cloning hexo-starter to /data/blogs/hexo Cloning into '/data/blogs/hexo'... remote: Counting objects: 62, done. .... # 初始化博客文件夹(hexo)，会自动在当前路径下生成 hexo 目录 $ ls ./hexo _config.yml node_modules package.json scaffolds source themes ``` ### 2. 安装主题和渲染插件 ```shell $ cd hexo $ git clone https://gitee.com/stevenshen/hexo-theme-BlueLake.git themes/BlueLake $ npm install hexo-renderer-jade@0.3.0 --save $ npm install hexo-renderer-stylus --save ``` ### 3. 启用 BlueLake 在 Hexo 配置文件（`hexo/_config.yml`）中把主题设置修改为`BlueLake`;并添加中文支持。 ``` bash theme: BlueLake ... language: zh-CN ``` 如果你想生成压缩后的css，在（`hexo/_config.yml`）中添加： ``` yml stylus: compress: true ``` ### 4. 本地预览 ``` bash # 生成静态页面 $ hexo generate INFO Start processing INFO Files loaded in 1.46 s INFO Generated: index.html INFO Generated: apple-touch-icon.png INFO Generated: favicon.ico INFO Generated: archives/index.html INFO Generated: iconfont/iconfont.eot INFO Generated: iconfont/iconfont.svg INFO Generated: iconfont/iconfont.ttf INFO Generated: iconfont/iconfont.woff INFO Generated: archives/2018/01/index.html INFO Generated: img/bg.jpg INFO Generated: archives/2018/index.html INFO Generated: css/highlight.css INFO Generated: js/search.json.js INFO Generated: js/toctotop.js INFO Generated: js/totop.js INFO Generated: css/style.css INFO Generated: 2018/01/24/hello-world/index.html INFO 17 files generated in 582 ms # 开启本地服务器 $ hexo s INFO Start processing INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop. ``` 打开浏览器，地址栏中输入：[http://localhost:4000/](http://localhost:4000/),应该可以看见刚刚创建的博客了。  ### 更新主题 ``` bash cd themes/BlueLake git pull ``` ## 5. 配置 打开`themes/BlueLake/_config.yml`进行配置。 ``` yml ########################## ## Site Config Settings ## ########################## # Theme version version: 2.0.1 # Header menu: - page: home directory: . icon: fa-home - page: archive directory: archives/ icon: fa-archive - page: about directory: about/ icon: fa-user - page: rss directory: atom.xml icon: fa-rss # Sidebar widgets: - recent_posts - category - tag - archive #- weibo - links # Toc toc: enable: true number: false # Static files js: js css: css # Extensions Plugins: hexo-generator-feed hexo-generator-sitemap hexo-generator-baidu-sitemap #Feed Atom feed: type: atom path: atom.xml limit: 20 #sitemap sitemap: path: sitemap.xml baidusitemap: path: baidusitemap.xml #Local search local_search: true ## Use a javascript-based local search engine, true/false. #Cmments comment: duoshuo: #chaooo ## duoshuo_shortname disqus: ## disqus_shortname livere: ## 来必力(data-uid) uyan: ## 友言(uid) cloudTie: ## 网易云跟帖(productKey) changyan: ## 畅言需在下方配置两个参数，此处不填。 appid: ## 畅言(appid) appkey: ##畅言(appkey) #Share baidu_share: true ## 百度分享 JiaThis_share: ##true ##JiaThis分享 duoshuo_share: #true ##true 多说分享必须和多说评论一起使用。 # Analytics google_analytics: ## Your Google Analytics tracking id, e.g. UA-42025684-2 baidu_analytics: ## Your Baidu Analytics tracking id, e.g. 1006843030519956000 # Miscellaneous show_category_count: true ## If you want to show the count of categories in the sidebar widget please set the value to true. widgets_on_small_screens: true ## Set to true to enable widgets on small screens. busuanzi: true ## If you want to use Busuanzi page views please set the value to true. # About page about: photo_url: ## Your photo e.g. http://obzf7z93c.bkt.clouddn.com/themeauthor.jpg items: - label: email url: ## Your email with mailto: e.g. mailto:zhenggchaoo@gmail.com title: ## Your email e.g. zhenggchaoo@gmail.com - label: github url: ## Your github'url e.g. https://github.com/chaooo title: ## Your github'name e.g. chaooo - label: weibo url: ## Your weibo's url e.g. http://weibo.com/zhengchaooo title: ## Your weibo's name e.g. 秋过冬漫长 - label: twitter url: title: - label: facebook url: title: # Friend link links: - title: site-name1 url: http://222.178.203.72:19005/whst/63/_vvvzdwZlokd0zbnl// - title: site-name2 url: http://222.178.203.72:19005/whst/63/_vvvzdwZlokd1zbnl// - title: site-name3 url: http://222.178.203.72:19005/whst/63/_vvvzdwZlokd2zbnl// ``` - **version** - 用于自动刷新CDN上的静态文件。 - **menu** - 导航菜单。 - **widgets** - 侧边栏中的窗口小部件。 - **Toc** - 文章目录 - **Static files** - 静态文件目录，以方便CDN使用。 - **Local search** - self_search - 默认本地JS搜索. - **Cmments** - duoshuo - 若使用[多说评论](http://duoshuo.com)，注册多说后在这填写short_name(用于评论与分享)。 - disqus - 若使用[Disqus评论](https://disqus.com)，注册Disqus后在这填写short_name。 - livere- 若使用[来必力评论](https://livere.com)，注册来必力,获得data-uid。 - uyan - 若使用[友言评论](http://www.uyan.cc/)，注册友言,获得uid。 - cloudTie - 若使用[网易云跟帖评论](https://gentie.163.com/info.html)，注册网易云跟帖,获得productKey。 - changyan - 若使用[畅言评论](http://changyan.kuaizhan.com)，注册畅言，获得appid，appkey。 - **About page** - 关于我页面(hexo new page 'about')。 - **links** - 友情链接。 - **Miscellaneous** - show_category_count - 是否在侧边栏分类中显示类别的数量（true/false）. - widgets_on_small_screens - 小屏幕下侧边栏在底部显示. - busuanzi - 用[Busuanzi](http://busuanzi.ibruce.info)来统计网站访问量. - google_analytics - [Google Analytics](https://www.google.com/analytics/) tracking ID。 - baIDu_analytics - [Baidu Analytics](http://tongji.baidu.com) tracking ID。 ## 二、特征 #### 站点图标 您可以准备一张ico格式并命名为** favicon.ico **，请将其放入hexo目录的`source`文件夹，建议大小：32px * 32px。 您可以为苹果设备添加网站徽标，请将名为** apple-touch-icon.png **的图像放入hexo目录的“source”文件夹中，建议大小为：114px * 114px。 #### 添加站点关键字 请在hexo目录的“hexo/_config.yml”中添加`keywords`字段，如： ```YAML # Site title: Hexo subtitle: 副标题 description: 网站简要描述,如：Charles·Zheng's blog. keywords: 网站关键字, key, key1, key2, key3 author: Charles language: zh-CN ``` #### 设置阅读全文 您可以在文章的 front-matter 中添加 description，并提供文章摘录，或在文章中使用‘‘`<!--more-->`’’手动进行截断（Hexo推荐的方式）。 #### 自定义page页面 在`source`文件夹中创建文件夹`index.md`来添加页面，并在`index.md`的`front-matter'中添加`layout：page`。 Create folders inlcuding `index.md` in `source` folder to