Concise,一款为hexo设计的简约而漂亮的主题

简介: Concise,一款为hexo设计的简约而漂亮的

本文章已废弃。

前言


本人已将主题更换为next,但文章仍适用初学者学习搭建博客。
您可以先进Demo网站来看看这个主题的样式。


Concise概括


Concise是一款为Hexo设计的主题。我最早使用的是light主题,因为我非常喜欢light主题简约明朗的风格,之后看到pacman主题,很喜欢pacman的头部和尾部的设计,之间甚至起过要换主题的念头(真是太可怕了)。但pacmanbody部分我不是很感冒,还是更喜欢light主题的body部分,两难之下,便产生了将pacman的头部和尾部移植到light主题下的想法。说干就干,利用了几天工作之余的时间将pacman的头部和尾部成功移植到了light主题下,于是Concise便产生了。主题源码托管在Github。如果你喜欢本主题,欢迎你在GithubForkStar,或者你出于鼓励的心态,也欢迎。如果你在使用本主题的过程中遇到任何问题,欢迎在本文下方留言,本人将竭我所能帮助你。当然,由于本人能力有限,并且该主题也是基于light主题进行修改的。因此,有些地方我可能也不懂,还请见谅。


安装指南


安装


$ git clone https://github.com/huangjunhui/concise.git themes/concise


Concise是本人在Hexo3.0.0版本下制作的,因此,请你最好Hexo级到3.0.0


启用


修改你的博客根目录下的config.yml配置文件中的theme属性,将其修改为concise


更新


$ cd themes/concise
$ git pull

更新前,请先备份你的themes/concise/_config.yml文件。


配置指南


配置文件:themes/concise/_config.yml

####menu
menu:
  Home: /
  Archives: /archives
  About: /about
##菜单栏,如果你想把某个分类或者某个标签放在菜单栏上,可以通过以下方法实现。
##首先在博客根目录的source文件下创建两个文件夹tags和categories,并在文件夹下分别创建文件index.md
##tags的index.md文件的内容如下(记得去掉前面的##),categories的内容则将两个tags改成categories即可。
##layout: tags
##title: tags
##---
##最后在menu下进行配置即可,例如你要添加hexo分类,则在menu下添加hexo: /categories/hexo
####widgets
widgets:
- search    ##搜索
- category  ##分类
- tagcloud  ##标签云
- weibo   ##新浪微博秀,需要你自己去新浪微博秀获取代码,然后将weibo.ejs中的代码替换掉
- links   ##友情链接,你可以进入links.ejs进行编辑
##小插件,在concise/layout/_widget文件夹下提供了7个小插件,要使用的在widgets进行配置即可,
##不使用则去掉,其中search默认使用的google,如果你想使用和我一样的站内搜索,可以访问以下链接:
##http://opiece.me/2015/04/16/site-search-by-swiftype/
duoshuo_enable: true  ##不想用,改为false即可
duoshuo_shortname: chillax     ##你的多说shortname,上面为true,这个才会起效果,在多说官网注册一个自己的站点,在生成的代码里可以看到自己的shortname,在此处将chillax改成你的多说shortname即可。
tencent_sid: 44218032
##tencent analysis,腾讯分析sid
baidu_sid: 7192fa361f5cabb11d8a22de41c1ba8f
##baidu statistics id,百度统计sid,该sid为百度统计代码中:hm.src = "//hm.baidu.com/hm.js?之后的一串字符
excerpt_link: Read more ##文章摘要下方的阅读更多
twitter:  ##twitter
  username:
  show_replies: false
  tweet_count: 5
#### Fancybox ##图片效果
fancybox: true
google_analytics:   ##google分析
#### RSS  ##RSS订阅
rss: /atom.xml
## RSS address.
#### Image
imglogo:
  enable: true         ## 是否开启网站的logo,标题左边的logo。
  src: imgs/logo.png   ## 图片放在`/concise/source/imgs`目录下,使用.svg和.png格式的图片.
favicon: imgs/favicon.ico   ## 浏览器标签上显示的图片,放在`/concise/source/imgs`下.
author_img_enable: true   ## 是否开启作者头像,左下角会旋转头像.
author_img: imgs/author.jpg ## 作者头像的路径,以../comcise/source/文件夹为根路径,如果放在imgs文件夹下,格式如本人范例
#### 作者信息,主要用于右下角的一些小图标链接的显示
author:
  google_plus:    ## eg:116338260303228776998 for https://plus.google.com/u/0/116338260303228776998
  intro_line1: "Hi,I'm the designer of this theme." ##博客底部的第一句话
  intro_line2: "I will share this theme on github after a few week!" ##底部底部的第二句话
  weibo:    ## e.g. 1923610190 for http://weibo.com/1923610190
  twitter:    ## e.g. yangjiansky for https://twitter.com/yangjiansky
  github:     ## e.g. huangjunhui for https://github.com/huangjunhui 
  facebook:   ## e.g. yangjian for https://favebook.com/yangjian
  tsina:      ## e.g. 1923610190  Your weibo ID,It will be used in share button.
  linkedin:   ## e.g. in/jeffweiner08 for https://www.linkedin.com/in/jeffweiner08
  email: jhhuang1993@foxmail.com##填写你的email地址



FAQ


问:我想要修改主题某些地方的颜色,去哪修改?
答:主题的颜色大部分在/themes/concise/variable.style里,如果你想修改的是首部和尾部的颜色,修改color-theme和color-footer即可。


问:友情链接怎么添加?

答:你可以在/concise/layout/_widget/links.ejs进行添加。


问:怎么在文章中使用文章目录,使得博客看起来更高大上一点啊?

答:你只要在文章的标题下方添加toc: true即可启用文章目录。


问:为什么启用左下角的旋转头像,也就是author_img_enable: true,头像的名称必须为author.jpg,不能自己定义吗?是不是博主的实力不行啊?

答:名字其实是可以自定义的,但如果你选择用其他的名字,则必须同时修改concise/source/css/_partial/footer.styl中的background no-repeat url("../imgs/author.jpg") left top,将author.jpg改成你使用图片的名称,至于url为什么不使用引用配置文件的方式,我自己也尝试过,但一直失败,如果有人知道,可以回复帮我。此问题已经解决,现在可以自定义名字了,只要按要求填写好路径和图片名字即可。


问:为什么左下角的头像不能旋转?

答:在某些浏览器上,确实有头像不能旋转的问题。作为一位搞技术的人员,肯定是用逼格更高的chromefirefox,在这两种浏览器下是没有问题的,如果你想体验旋转效果,请使用这两种浏览器。


问:我是小白,也想要搭建一个自己的博客,并使用博主的主题,我该怎么办?

答:本博客里有新鲜出炉的教程使用Hexo搭建个人博客(基于hexo3.0),文字言简意赅、清晰易懂,相当于手把手教,如果实在有问题,可以留言。


总结



有其他任何问题,欢迎在下方留言,本主题刚刚发布,肯定有很多不足,还请见谅。

相关文章
|
7月前
|
设计模式 缓存 前端开发
一款清新优雅的中后台模板,内置丰富可配置的主题(强烈推荐)
Soybean Admin 是一个基于 Vue3、Vite3、TypeScript、NaiveUI、Pinia 和 UnoCSS 的清新优雅的中后台模版,它使用了最新的前端技术栈,内置丰富的主题配置,有着极高的代码规范,基于 mock 实现的动态权限路由,开箱即用的中后台前端解决方案,也可用于学习参考。
|
9月前
|
开发者
冷门但好看的 VSCode 主题推荐
笔者在使用VSCode进行开发的过程中喜欢没事就逛一逛插件商店里的颜色主题,也看过国内外许多论坛上面的颜色主题推荐,不知不觉已经下载了超过一百个的颜色主题。这篇文章总结了我用过的最舒服的一些颜色主题。
3342 0
冷门但好看的 VSCode 主题推荐
|
Python
Markdown 拓展-Docsify 主题美化
docsify-themeable - A delightfully simple theme system for docsify.js https://jhildenbiddle.github.io/docsify-themeable/#/
1128 0
|
2天前
|
API
一个简约风的VitePress博客主题
前言 笔者的博客之前是使用 VuePress + reco主题 随着博客文章数量越来越多(md文件已经300+了),博客本地启动和构建越来越来慢了emmm 恰好此时 VitePress 也相对成熟了(1.x alpha),就萌生了迁移到 VitePress 的想法 其相比 VuePress 更加的简洁,可玩性强,上手成本也低,由 Vite 加持体验也是非常不错。 按照官方的给的定位,VitePress 只提供一些基础主题API,所有定制都在自己的主题里完成(个人感觉就像Hexo丰富多彩的主题一样),不提供插件系统
|
5月前
hexo主题集成pug
hexo主题集成pug
38 1
|
前端开发 CDN
ant-design实现主题暗黑主题 和 亮色主题的 切换(实现网站黑白皮肤)
最近在使用vite+react + ant-design 来搭建个人站点,看到网上好多网站都实现了黑白皮肤的切换,并且ant-design帮我们实现了三套主题色,一个默认亮白色,暗黑主题和紧凑主题。于是我也想来弄一弄。最后还是实现了,打包后也是ok的。
ant-design实现主题暗黑主题 和 亮色主题的 切换(实现网站黑白皮肤)
一款三栏简约typecho主题 Lanstar v2.2.0跨年版
自动适配各种大小尺寸屏幕,表情功能可能是目前所有用心主题的标配了
120 0
一款三栏简约typecho主题 Lanstar v2.2.0跨年版
|
存储 前端开发 JavaScript
从零开始写一个Hexo主题
本文将会从零开始编写一个简单的Hexo博客主题,目的是了解一个Hexo博客主题的构成以及如何编写,因此,本示例中的博客页面样式不做过多描绘,样式主要参考 Hexo theme 中的 Noise 主题。
733 1
从零开始写一个Hexo主题
|
Shell 开发工具 git
关于Hexo使用Next主题的一些优化
肯定还会跟我一样,使用主题之后还不满意的小伙伴,不光想要好,还想要更好! 那就来看看如何优化你的博客,让他变得更富有细节吧 ~
|
JavaScript 前端开发 API
Hexo NexT 主题对数学公式的支持
由于静态网站的某些功能有限,所以我们需要第三方服务来扩展我们的网站。在任何时候,你都可以使用 NexT 支持的第三方服务来扩展所需的功能。 Next 提供了两个渲染引擎来显示数学方程: MathJax 和 KaTeX。 要使用这个特性,您只需要选择一个渲染引擎并打开它的 enable(位于heme config file)。 然后你需要安装相应的 Hexo 渲染器来完全支持数学方程式的显示-只开启启用可能不会让你正确地看到显示的方程式。 相应的 Hexo 渲染引擎将提供如下。 Settings 设置
263 0
Hexo NexT 主题对数学公式的支持