• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

hexo-theme-BlueLake: 一个简洁轻量化的响应式Hexo博客主题。

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

hexo-theme-BlueLake

开源软件地址:

https://gitee.com/shenweiyan/hexo-theme-BlueLake

开源软件介绍:

BlueLake

English | 简体中文

一个简洁轻量化的响应式Hexo博客主题。

BlueLake template preview

一、安装

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└─┬ [email protected]  ├── [email protected]  ├── [email protected]   .....

1.2 初始化博客文件夹

$ hexo init hexoINFO  Cloning hexo-starter to /data/blogs/hexoCloning into '/data/blogs/hexo'...remote: Counting objects: 62, done.....# 初始化博客文件夹(hexo),会自动在当前路径下生成 hexo 目录$ ls ./hexo_config.yml  node_modules  package.json  scaffolds  source  themes

2. 安装主题和渲染插件

$ cd hexo$ git clone https://gitee.com/stevenshen/hexo-theme-BlueLake.git themes/BlueLake$ npm install [email protected] --save$ npm install hexo-renderer-stylus --save

3. 启用 BlueLake

在 Hexo 配置文件(hexo/_config.yml)中把主题设置修改为BlueLake;并添加中文支持。

theme: BlueLake ...language: zh-CN

如果你想生成压缩后的css,在(hexo/_config.yml)中添加:

stylus:  compress: true

4. 本地预览

# 生成静态页面$ hexo generateINFO  Start processingINFO  Files loaded in 1.46 sINFO  Generated: index.htmlINFO  Generated: apple-touch-icon.pngINFO  Generated: favicon.icoINFO  Generated: archives/index.htmlINFO  Generated: iconfont/iconfont.eotINFO  Generated: iconfont/iconfont.svgINFO  Generated: iconfont/iconfont.ttfINFO  Generated: iconfont/iconfont.woffINFO  Generated: archives/2018/01/index.htmlINFO  Generated: img/bg.jpgINFO  Generated: archives/2018/index.htmlINFO  Generated: css/highlight.cssINFO  Generated: js/search.json.jsINFO  Generated: js/toctotop.jsINFO  Generated: js/totop.jsINFO  Generated: css/style.cssINFO  Generated: 2018/01/24/hello-world/index.htmlINFO  17 files generated in 582 ms# 开启本地服务器$ hexo sINFO  Start processingINFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

打开浏览器,地址栏中输入:http://localhost:4000/,应该可以看见刚刚创建的博客了。输入图片说明

更新主题

cd themes/BlueLakegit pull

5. 配置

打开themes/BlueLake/_config.yml进行配置。

############################ Site Config Settings ############################# Theme versionversion: 2.0.1# Headermenu:  - 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# Sidebarwidgets:  - recent_posts  - category  - tag  - archive  #- weibo  - links# Toctoc:  enable: true  number: false# Static filesjs: jscss: css# ExtensionsPlugins:  hexo-generator-feed  hexo-generator-sitemap  hexo-generator-baidu-sitemap#Feed Atomfeed:  type: atom  path: atom.xml  limit: 20#sitemapsitemap:  path: sitemap.xmlbaidusitemap:  path: baidusitemap.xml#Local searchlocal_search: true ## Use a javascript-based local search engine, true/false.#Cmmentscomment:  duoshuo: #chaooo ## duoshuo_shortname  disqus: ## disqus_shortname  livere: ## 来必力(data-uid)  uyan: ## 友言(uid)  cloudTie: ## 网易云跟帖(productKey)  changyan: ## 畅言需在下方配置两个参数,此处不填。    appid: ## 畅言(appid)    appkey: ##畅言(appkey)#Sharebaidu_share: true ## 百度分享JiaThis_share: ##true ##JiaThis分享duoshuo_share: #true ##true 多说分享必须和多说评论一起使用。# Analyticsgoogle_analytics: ## Your Google Analytics tracking id, e.g. UA-42025684-2baidu_analytics: ## Your Baidu Analytics tracking id, e.g. 1006843030519956000# Miscellaneousshow_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 pageabout:  photo_url: ## Your photo e.g. http://obzf7z93c.bkt.clouddn.com/themeauthor.jpg  items:  - label: email    url: ## Your email with mailto: e.g.  mailto:[email protected]    title: ## Your email e.g.  [email protected]  - 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 linklinks:  - title: site-name1    url: http://www.example1.com/  - title: site-name2    url: http://www.example2.com/  - title: site-name3    url: http://www.example3.com/
  • version - 用于自动刷新CDN上的静态文件。
  • menu - 导航菜单。
  • widgets - 侧边栏中的窗口小部件。
  • Toc - 文章目录
  • Static files - 静态文件目录,以方便CDN使用。
  • Local search
  • self_search - 默认本地JS搜索.
  • Cmments
  • duoshuo - 若使用多说评论,注册多说后在这填写short_name(用于评论与分享)。
  • disqus - 若使用Disqus评论,注册Disqus后在这填写short_name。
  • livere- 若使用来必力评论,注册来必力,获得data-uid。
  • uyan - 若使用友言评论,注册友言,获得uid。
  • cloudTie - 若使用网易云跟帖评论,注册网易云跟帖,获得productKey。
  • changyan - 若使用畅言评论,注册畅言,获得appid,appkey。
  • About page - 关于我页面(hexo new page 'about')。
  • links - 友情链接。
  • Miscellaneous
  • show_category_count - 是否在侧边栏分类中显示类别的数量(true/false).
  • widgets_on_small_screens - 小屏幕下侧边栏在底部显示.
  • busuanzi - 用Busuanzi来统计网站访问量.
  • google_analytics - Google Analytics tracking ID。
  • baIDu_analytics - Baidu Analytics tracking ID。

二、特征

站点图标

您可以准备一张ico格式并命名为** favicon.ico **,请将其放入hexo目录的source文件夹,建议大小:32px * 32px。

您可以为苹果设备添加网站徽标,请将名为** apple-touch-icon.png **的图像放入hexo目录的“source”文件夹中,建议大小为:114px * 114px。

添加站点关键字

请在hexo目录的“hexo/_config.yml”中添加keywords字段,如:

# Sitetitle: Hexosubtitle: 副标题description: 网站简要描述,如:Charles·Zheng's blog.keywords: 网站关键字, key, key1, key2, key3author: Charleslanguage: zh-CN

设置阅读全文

您可以在文章的 front-matter 中添加 description,并提供文章摘录,或在文章中使用‘‘<!--more-->’’手动进行截断(Hexo推荐的方式)。

自定义page页面

source文件夹中创建文件夹index.md来添加页面,并在index.mdfront-matter'中添加layout:page。 Create folders inlcuding index.mdinsourcefolder to add pages, and add alayout: pageinfront-matterofindex.md`.

About页面

此主题默认page页面是关于我页面的布局,生成一个关于我页面:

$ hexo new page 'about'

配置照片地址、邮箱、微博链接、微博名、GitHub链接、Github名:

# About pageabout:  photo_url: ## Your photo e.g. http://obzf7z93c.bkt.clouddn.com/themeauthor.jpg  items:  - label: email    icon: fa-email    url: ## Your email with mailto: e.g.  mailto:[email protected]    title: ## Your email e.g.  [email protected]  - label: github    icon: fa-github    url: ## Your github'url e.g.  https://github.com/chaooo    title: ## Your github'name e.g.  chaooo  - label: weibo    icon: fa-weibo    url: ## Your weibo's url e.g.  http://weibo.com/zhengchaooo    title: ## Your weibo's name e.g.  秋过冬漫长  - label: twitter    icon: fa-twitter    url:    title:  - label: facebook    icon: fa-facebook    url:    title:

点击预览About页面

代码语法高亮

请在hexo目录的“hexo/_config.yml”中设置“highlight”选项,如下所示:

highlight:  enable: true  auto_detect: true  line_number: true  tab_replace:

本地搜索

如果要使用本地站点搜索,您必须安装插件hexo-generator-json-content来创建JSON搜索文件 ,然后将配置添加到hexo/_config.yml

$ npm install [email protected] --save

然后在hexo/_config.yml添加配置:

jsonContent:  meta: false  pages: false  posts:    title: true    date: true    path: true    text: true    raw: false    content: false    slug: false    updated: false    comments: false    link: false    permalink: false    excerpt: false    categories: false    tags: true

语言

该主题目前有七种语言:简体中文(zh-CN),繁体中文(zh-TW),英语(en),法语(fr-FR),德语(de-DE),韩语 (ko),西班牙语(es-ES),欢迎修改主题并翻译成其他语言。

Solutions

  • 检查您当前的hexo的根目录,是否包含source /themes /等。
  • 如果你在使用这个主题有任何问题,请随时打开一个issue,或者给我发邮件[email protected]

浏览器支持

Imgur

License

MIT License

贡献

欢迎各种形式的贡献(增强功能,添加新功能,撰写文档,改进代码,提交问题和检查BUG...)。

期待您的pull request。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap