Giter Site home page Giter Site logo

hexo-theme-aircloud's Introduction

Hexo-Theme-AirCloud: 一个简洁轻量的 hexo 博客主题

English Document | 预览地址

功能简介

Hexo-Theme-AirCloud 是一个简洁轻量的 hexo 博客主题,旨在将中心放在博文本身,因此:

  • 默认没有大范围的主题色块、图片铺排等,也不要求每片博文配图,一方面这并不是我们记录知识的重点,另外一方面可能程序员群体并没有足够的素材,容易造成主题纠纷。
  • 建议通过不冗余的内容进行传达,比如默认没有博文摘要,因为不少开发者写博客的时候没有写博文摘要,如果从博客前一部分截取往往不能表达完整**。

另外,该主题主要实现的功能有:

  • 全局搜索功能,并对搜索内容进行高亮。
  • 博客评论功能:内置了针对 https://giscus.app/ 的支持
  • 文章详情页文章目录功能
  • 访问量统计(总体UV、PV,单页PV)
  • 语言切换能力,目前支持中文和英文

起步

我在"常见问题"中总结了该项目之前被提及的一些问题,如果你在使用过程中遇到了问题,可以在"常见问题"中寻找答案,如果没能解决,欢迎提issue,我会保证回复。

注意,如果你不按照"功能适配"部分的内容进行操作,可能会导致相关提及的功能无法正常使用。

基本使用

建议:参考 DEMO 进行配置,尤其是 _config.yml 部分,否则可能会造成功能缺失

同其他博客主题使用方式相同,直接 clone 或者下载本项目,复制粘贴到 themes 文件夹下即可。

具体的 _config.yml 自定义配置,请参考DEMO

功能适配

搜索功能

为了使用搜索功能,首先需要安装下列插件:

npm i hexo-generator-search --save

然后在 _config.yml 中进行配置,可以参考如下配置:

search:
  path: search.json
  field: post

标签页面 & 关于页面

如果是新项目,默认是没有标签页面和关于页面的,需要在source文件夹下建立tags文件夹和about文件夹。

注:建议不要直接新建文件,而是采用 hexo 的 hexo new page tagshexo new page about 的方式新建文件,这样可以被 hexo 索引到。

其中tags文件夹中新建index.md并写入:

    ---
    layout: "tags"
    title: "Tags"
    ---

about文件夹下index.md为一篇支持 markdown 格式的文件,需要在开头添加:

    ---
    layout: "about"
    title: "About"
    date: 2016-04-21 04:48:33
    comments: true
    ---

评论功能

目前,本博客支持以下评论功能:

  • giscus 推荐目前使用
  • gitment(gitment 经常会出现限频或者 404 等错误,其作者已关闭github认证转发服务)
  • disqus
  • LiveRe

giscus

只需要在 https://giscus.app 配置好,然后把对应的 script 标签复制,参考下面的配置在 _config.yml 里面配置即可。

DEMO 目前就是使用了这个评论功能,建议直接参考(但请勿直接复制下面的内容)。

comment:
  type: giscus
  script: |
      <script src="https://giscus.app/client.js"
          data-repo="aircloud/hexo-aircloud-blog"
          data-repo-id="MDEwOlJlcG9zaXRvcnkxMjkwNDgyNjg="
          data-category="Announcements"
          data-category-id="DIC_kwDOB7EezM4COhKJ"
          data-mapping="title"
          data-reactions-enabled="1"
          data-emit-metadata="0"
          data-input-position="bottom"
          data-theme="light"
          data-lang="zh-CN"
          crossorigin="anonymous"
          async>
      </script>

gitment

建议先在gitment进行了解,然后参考DEMO进行配置,其中一些相关项目如下:

comment:
  type: gitment
  id: your-id-created-by-https://github.com/settings/applications/new
  secret: your-secret-created-by-https://github.com/settings/applications/new
  owner: aircloud
  repo: hexo-aircloud-blog

disqus

disqus 是一个使用比较广泛的评论系统,我们需要先在官方网站注册一个账号。

登录后,点击首页的 GET STARTED 按钮,之后选择 I want to install Disqus on my site 选项,填写相关内容,值得注意的是,Website Name 需要全网唯一,而且,一般情况,假设你的 Website Name 填写的是 example,那么下文 script 字段就可以写 'https://example.disqus.com/embed.js'

当然,你也可以在下一步 -> 选择 basic 免费套餐 -> 选择最后的 "I don't see my platform listed, installed manually with universal code" -> 找到代码中的 s.src = 'https://xxxx.disqus.com/embed.js'; , 从而找到 script 地址。(无需插入 disqus 给出的脚本,只需按照这里的说明配置即可)

之后,你需要在 _config.yml 中配置如下内容:

comment:
   type: disqus
   script: 'https://example.disqus.com/embed.js'

当然,你也可以配置urlidentifier, 但是这个就属于高级内容了,对于我们一般的 hexo 博客网站来说必要性不大,如果你需要配置这些内容,可能你已经是一个高级玩家了,可以在 themes/aircloud/layout/layout.ejs 的相关代码的基础上进行改动。

注意: 目前,直接嵌入 disqus 的代码可能会加载失败,你也可以考虑将相关代码放在自己的博客下引入:在 public 文件夹下新建文件放入代码,跟随发布即可(放入 source 文件夹下可能会由于 hexo 的处理变得有错误),并同时更改 _config.yml 中的配置。

LiveRe

LiveRe 是一款来自韩国的支持中文且没有被墙LiveRe评论插件,重点是使用无需翻墙。

该插件分为city和premium两个版本,其中city版是适合所有人使用的免费版本,有更高需求的可以考虑premium版本。

注册之后,选择 安装 -> 选 city版本,按提示操作进入到管理页面,系统会给出一段嵌入代码,找到其中的data-id和data-uid。

之后,你需要在_config.yml中配置如下内容

comment:
   type: livere
   livere_id: 'city'
   livere_uid: 

livere_idlivere_uid就是注册后获得的 data-id和data-uid。

favicon 的配置

项目的 favicon 默认在你的博客根目录的 /source/img 下面,在 /source/img 下面添加 favicon.ico 即可,不要添加在主题文件夹内。

底部自定义

大家如果访问提供的预览链接,会发现我们的博客底部是提供一些内容的:一些社交平台的个人主页链接、友情链接、PV、UV 与 本模版链接。

一般情况下,大家无需改动底部的代码,直接在 _config.yml 中配置即可。

配置社交平台主页的样例代码:

# SNS settings
# 一些社交平台地址,支持以下几种:
weibo_username:     3286578617
zhihu_username:     ai-er-lan-xue-da
github_username:    AirCloud
twitter_username:   iconie_alloy
facebook_username:  xiaotao.nie.5
linkedin_username:  小涛-聂-80964aba

如果不想包括某些社交平台,直接注释或删除相关代码即可(目前暂不支持在不改动模版代码的前提下新增社交平台)。

配置友情链接的样例代码:

# Friends
# 友情链接
friends: [
    {
        title: "10000H",
        href: "https://www.10000h.top"
    },{
        title: "Xiaotao's Page",
        href: "https://niexiaotao.com"
    },{
        title: "It helps SEO",
        href: "#"
    }
]

最底部的 PV、UV 和模版地址,无需配置。

站长统计

如果不想包括某些统计平台,直接注释或删除相关代码即可。

analytics:
  google:
    # https://search.google.com
    site_verification:
    # https://analytics.google.com
    gtag_id:
  bing:
    # https://www.bing.com/webmasters
    site_verification:
  baidu:
    # https://ziyuan.baidu.com/site/index
    site_verification:
    # https://tongji.baidu.com
    id:
    # https://ziyuan.baidu.com/college/courseinfo?id=156&page=4#h2_article_title1
    disable_transformation: false
  cloudflare:
    # https://dash.cloudflare.com
    token:
  umami:
    # https://umami.is/
    host:
    id:

高级自定义

首行缩进

目前可以配置是否在博客页面带有首行缩进两个汉字的效果,默认是有首行缩进的效果的,但是也可以通过下面的配置代码进行关闭:

post_style:
    indent: 0

头像圆角

avatar_style:
  radius: true

常见问题

如何取消赞赏功能?

目前网站的赞赏功能做的比较鸡肋,缺乏一定的丰富度,如果你想取消这个功能,只需取消注释或者删除掉赞赏部分的相关配置即可:

donate:
  img: img/donate.jpg
  content: 感谢鼓励

另外,如果你对赞赏部分有用户体验较好并且通用型比较好的设计,也可以提 issue,我会考虑实现。

一些注意事项

由于一些hexo的历史遗留问题等,为了避免给用户在使用过程中带来太多麻烦(比如需要改动主题代码甚至hexo源码),建议用户使用过程中遵循一些规范:

  • 文章不要有跳级目录,比如一个###三级目录下是一个#####五级目录,然后又有一个###三级目录,这样有可能导致 hexo 解析出错,从而影响文章目录部分的展示。
  • 文章的段落(p)都有默认的两个字符的首行缩进,虽然能识别 markdown 段落中的换行,但是无法对换行后的内容进行缩进,所以这里需要注意样式问题(如果需要多行缩进,建议使用多个段落或者做成列表)。

hexo-theme-aircloud's People

Contributors

0xflotus avatar aircloud avatar claviering avatar jason23347 avatar puzzle9 avatar run-ze avatar shallotsh avatar uuuusssseeeerrrr avatar vanderchen avatar wanqiyang avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

hexo-theme-aircloud's Issues

搜索框取消建议

打开搜索框后, 只能点击 或者搜索到的内容才能关闭, 这样很不方便.
建议: 点击搜索框以外的空白区域, 可以关闭搜索框.

关于取消搜索功能

0.主题里边的_config.yml是空的?

1.貌似我在主题中的_config.yml里设置search: false,语言会变成中文?没有在代码中找到这部分逻辑

image

看这部分逻辑,应该走的是主配置文件里的search 可是设置了,为什么这个搜索的li标签还是会显示呢?

请楼主指点一下

关于主题language的问题

把language设置为zh,虽然界面的内容显示成中文了,但源代码上还是en。希望作者能够修复下

标签页面下文章排序

我的某标签下的笔记是按时间顺序建立的,并且文章标题和文件名前面也是有数字索引的,但是在标签页面下显示的时候我发现它们不是按顺序显示的。
我想知道标签页面中每个标签下的文章的排列顺序是依据什么的呢。

tags在hexo g和s步骤,均出现query字段,没有报错,这正常吗?

1. hexo g步骤
INFO Start processing
INFO Files loaded in 695 ms

Query {
  data:
   [ Document {
       name: 'R',
       _id: 'cjr7joi2700053c0ukof8fnxt',
       slug: [Getter],
       path: [Getter],
       permalink: [Getter],
       posts: [Getter],
       length: [Getter] } ],
  length: 1 }

2. hexo s
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

Query {
  data:
   [ Document {
       name: 'R',
       _id: 'cjr7joi2700053c0ukof8fnxt',
       slug: [Getter],
       path: [Getter],
       permalink: [Getter],
       posts: [Getter],
       length: [Getter] } ],
  length: 1 }

我在markdown文档中添加的标签是tags: R 格式,发现不添加标签,就不会出现这个问题。这个是报错吗?
期待您的解答,多谢!

PR cant be seen

非常喜欢这个轻量级主题,很简约。
我的每篇博客上的访问量无法显示,之前还能显示。不知道出了什么问题,可否解答一下?

请问怎么显示公式

emmmmmm在网上查了一圈好像一脸懵逼的这里改改那里改改还是不知道怎么才能显示出公式

文章出现404

更换了主题后有些文章无法打开出现404,但部分是好的 您碰到过这种问题嘛

Unhandled rejection TypeError

$ hexo server -p 5000
INFO  Start processing
INFO  Hexo is running at http://localhost:5000/. Press Ctrl+C to stop.
Unhandled rejection TypeError: E:\PersonalWeb\themes\aircloud\layout\layout.ejs:39
    37| <script>
    38|     // We expose some of the variables needed by the front end
 >> 39|     window.hexo_search_path = "<%- config.search.path %>"
    40|     window.hexo_root = "<%- config.root %>"
    41|     window.isPost = <%- is_post() %>
    42| </script>

Cannot read property 'path' of undefined
    at eval (eval at compile (E:\PersonalWeb\node_modules\ejs\lib\ejs.js:549:12), <anonymous>:32:31)
    at returnedFn (E:\PersonalWeb\node_modules\ejs\lib\ejs.js:580:17)
    at Theme._View.View._compiled.locals [as _compiled] (E:\PersonalWeb\node_modules\hexo\lib\theme\view.js:124:48)
    at Theme._View.View.View.render (E:\PersonalWeb\node_modules\hexo\lib\theme\view.js:29:15)
    at _compiled.then.result (E:\PersonalWeb\node_modules\hexo\lib\theme\view.js:40:23)
    at tryCatcher (E:\PersonalWeb\node_modules\bluebird\js\release\util.js:16:23)
    at Promise._settlePromiseFromHandler (E:\PersonalWeb\node_modules\bluebird\js\release\promise.js:512:31)
    at Promise._settlePromise (E:\PersonalWeb\node_modules\bluebird\js\release\promise.js:569:18)
    at Promise._settlePromise0 (E:\PersonalWeb\node_modules\bluebird\js\release\promise.js:614:10)
    at Promise._settlePromises (E:\PersonalWeb\node_modules\bluebird\js\release\promise.js:693:18)
    at Async._drainQueue (E:\PersonalWeb\node_modules\bluebird\js\release\async.js:133:16)
    at Async._drainQueues (E:\PersonalWeb\node_modules\bluebird\js\release\async.js:143:10)
    at Immediate.Async.drainQueues (E:\PersonalWeb\node_modules\bluebird\js\release\async.js:17:14)
    at runCallback (timers.js:794:20)
    at tryOnImmediate (timers.js:752:5)
    at processImmediate [as _immediateCallback] (timers.js:729:5)

新手,请问如何解决呢?

集成gitbook

大神你好,我想把gitbook集成到这个主题下,有没有什么范例可以提供参考啊,比如主页、标签、存档、关于、搜索下再多一个

主页头像

设置头像后,在http://localhost:4000页面内显示正常,但在http://samuel-winston.gitee.io/myblog/头像无法显示。。

gitment

无法加载 airclouds-blog.disqus.com/embed.js:1 Failed to load resource:

主题的沟通

你好,不知能否加你微信,沟通起来更方便些/

comment配置

通过gitment方式配置评论功能,在login时一直显示“Loding comments”。请问除了更改id和secret,还有哪里需要配置的吗

目录过长的话,toc 显示不完全

如果目录过长,效果类似这样:
default

屏幕外还有目录显示不出来...

很喜欢这个主题!感谢!

希望作者能修复下。

PS:
我自己直接在 css 上修改了一下

/* toc.css */
.toc-item > .toc-child{
  display: none;
}
.toc-article li.active > .toc-child {
  display: block;
}
.toc-article li:hover > .toc-child {
  display: block;
}

效果如下(大概够用)
default

左侧的tags菜单能否进一步分类?

1.左侧的自定义菜单能否自定义名称,如中文自定义为“分类”
2.能否创建多个并列tags页面,并将不同的标签分到不同的tags页面展示,进一步达到分类的目的
3.能否新建new page,也同样支持添加到左侧?

gitment第一次加载不动

这是控制台信息
火狐转成中文了:image

使用谷歌:
image

然后页面加载不动:
image

我想问一下博主,该怎么解决啊.,

如何修改主页的个人头像

尊敬的作者您好,初学者对HTML不太懂,跟着那个readme添加了自己的favicon.ico,但是头像没有变化;
另外那个标签和关于页面,添加了index.md之后,写入

layout: "tags"
title: "Tags"


layout: "about"
title: "About"
date: 2016-04-21 04:48:33
comments: true

但是访问是空白页

还需要对哪里进行设置吗,谢谢!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.