hexo需要先编辑好html文件吗,教你定制Hexo的landscape打造自己的主题_html/css_WEB-ITnose...
我敢肯定大家不仅想拥有自己的博客,还想有一套自己的主题。目前Hexo的主题多数都是从官方主题landscape修改而成的,然而别人能修改,你也可以修改,就算你不会编程,不会web前端,跟着我做你一样可以做出自己想要的主题样式,打造属于你自己的主题。ps:我也是一点一点摸索的,参考了很多教程。
我的博客地址(http://www.codertian/com)我会把博文先发到这里,请大家多多支持。有问题大家一起讨论
创建博客
关于怎么安装Hexo和创建博客请看我博客的另一篇文章(http://www.codertian.com/2015/11/26/github-hexo-blog/)
那么假设大家都已经安装好了博客,因为Hexo的默认主题就是landscape所以大家不需要更换其他主题
一下配置,请大家先hexo clean一下,再发布
landscape的配置文件 # Headermenu: Home: / Archives: /archivesrss: /atom.xml# Contentexcerpt_link: Read Morefancybox: true# Sidebarsidebar: right //插件可以放左边或右边widgets:- category- tag- tagcloud- archive- recent_posts 更改左上角菜单请更改header区域,格式复制一下自己改
如果想改变more分割线显示的提示,可以更改Read More
删除插件可以在widgets中,关于添加一个再讲
更改banner图片
图片的位置为:landscape/source/css/images目录下面,可以替换为你自己想要的图片。更改banner栏的大小就去landscape/source/css/_variables.styl找到下面一段修改一下 // Headerlogo-size = 40pxsubtitle-size = 16pxbanner-height = 200px //可以更改为自己喜欢的banner高度banner-url = "images/banner.jpg" //图片名称也可以修改
更改侧边栏连接的颜色
还是路径landscape/source/css/_variables.styl找到 // Colorscolor-default = #555 color-grey = #ec4c02color-border = #ddd //更改边框的颜色color-link = #0072a3 //更改连接的颜色color-background = #eee //页面的背景颜色 color-sidebar-text = #777 //貌似当时修改的这个吧color-widget-background = #ddd //边栏插件的背景颜色color-widget-border = #ccc //边栏插件的边框颜色color-footer-background = #262a30 //页面底部的背景颜色color-mobile-nav-background = #191919color-twitter = #00acedcolor-facebook = #3b5998color-pinterest = #cb2027color-google = #dd4b39
这些颜色都是CSS颜色。这时候可能有小伙伴有疑问“我怎么知道我想要的颜色是什么?”Mac上大家可以去AppStore下载sip这个是一个免费的取色软件,比Mac自带的好用的多。Windows上就有个更牛逼的软件了叫FastStone Capture,啥功能都有,大家自己去下载。
更改显示字体
还是同样一个文件,找到fonts // Fontsfont-sans = "Helvetica Neue", Helvetica, Arial, sans-seriffont-serif = Georgia, "Times New Roman", seriffont-mono = Menlo, "Source Code Pro", Consolas, Monaco, Consolas, monospace
更改页面布局
还是同一个文件中,找到layout,可以更改整个页面的布局,更改页面的宽度,间距等,建议大家也不要乱改,不然可能会电脑上看着还是好的,手机上看着就不行了。 // Layoutblock-margin = 20px //更改模块之间的间距article-padding = 20pxmobile-nav-width = 280pxmain-column = 11 //更改文章的宽度sidebar-column = 3
更改文章背景
找到landscape/source/css/_extend.styl $block background: #fbfbfb //文章的背景颜色 /*box-shadow: 1px 2px 3px #ddd*/ border: 1px solid color-border //文章的边框 border-radius: 10px //设置文章页面圆角
更改代码样式
找到landscape/source/css/_partial/highlight.styl $code-block background: highlight-background border-radius: 5px // 更改为圆角$line-numbers color: #666 font-size: 0.85em // 更改行号大小
小代码块的更改 .article-entry pre, code font-family: font-mono code background: #e3e3e3 设置背景颜色 color: #666 border-radius: 3px // 圆角设置 padding: 0.1em 0.3em // 控制大小
小代码块的颜色更改
找到landscape/source/css/_partial/article.styl文件 .article-entry @extend $base-style clearfix() color: color-default padding: 0 article-padding p, table line-height: line-height margin: line-height 0 h1, h2, h3, h4, h5, h6 font-weight: bold h1, h2, h3, h4, h5, h6 line-height: line-height-title margin: line-height-title 0 code color: color-grey //设定文章小代码块字体颜色
添加多说
首先去多说官网,注册一个账号,点击我要安装,一步一步配置自己的网站,然后找到landscape/layout/_partial/article.ejs添加下列代码
代码获取网址(http://dev.duoshuo.com/threads/541d3b2b40b5abcd2e4df0e9)
然后在Hexo的配置文件_config.yml,注意是Hexo的添加 duoshuo_shortname: tiantengfei
关于这个duoshuo_shortname就是你配置网站是的那个多说短域名tiantengfei.duoshuo.com前面那个
添加百度分享
同样去百度搜索百度分享然后获取代码,在与上一步配置多说同一个文件中找到粘贴到下面这句话下面,最好不要复制我的,大家可以自己去获取代码然后配置自己喜欢的样式
我貌似把原来的分享和标签给删除了,不然不好整样式。
添加文章目录
找到layout/_partial/article.ejs文件中添加 文章目录
其中list_number:false表示不显示序号,如果你想要打开可以设置为true
给侧边栏插件添加外链
首先,在/layout/_widget/目录下新建一个文件,复制个当前目录的archive.ejs内容,我就命名为linkss.ejs
然后修改主题的_config.yml文件 # Sidebarsidebar: rightwidgets:- category- tag- tagcloud- archive- recent_posts- links //新添加的那个外链
更改归档显示的文章数
安装landscape可能你会发现归档页面显示的文章很少,就会又有新的一页,那么怎么更改呢?因为landscape主题是Hexo的默认主题,所以他和Hexo的配合度最高,可以看到Hexo的配置文件中 # Pagination## Set per_page to 0 to disable paginationper_page: 8pagination_dir: page
这里控制了主页,归档,分类,标签页显示的文章数,所以这个数字对所有都生效,但是Hexo提供了插件对这几个进行分别控制
设置archive页面数 $ npm install hexo-generator-archive --save
_config.yml添加如下配置 archive_generator: per_page: 20 //为0时表示不分页全展示 yearly: true //按年生成归档 monthly: true //按月生成归档
设置tag页 npm install hexo-generator-tag --save
_config.yml添加如下配置 tag_generator: per_page: 10
设置category页 npm install hexo-generator-category --save category_generator: per_page: 10
好了本教程也就到这里了,里面内容可能有些疏漏,因为总结太晚,时间间隔太久了。本篇文章也大量参考了网上别人的文章,做了个大总结。希望大家能多多支持我的博文,感谢大家。
我的博客地址(http://www.codertian.com)
hexo需要先编辑好html文件吗,教你定制Hexo的landscape打造自己的主题_html/css_WEB-ITnose...相关推荐
- php如何实现区分编辑,php实现编辑和保存文件的方法
php实现编辑和保存文件的方法 发布于 2015-09-26 11:54:35 | 66 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertext Prep ...
- VI打开和编辑多个文件的命令
VI打开和编辑多个文件的命令 可分两种情况: 1.在同一窗口中打开多个文件: vi file1 file2 file3 :n 切换到下一个文件 (n=next) :N 切换到上一个文件 2.在不同 ...
- Vim - 编辑多个文件
Vim 编辑多个文件 在上一篇的文章中,我们介绍了在 Vim 中窗口分割同一文件,今天学习一下 Vim 编辑多个文件. 语法 : vim <file1> <file2> - 其 ...
- github船舰新文件夹_mac下搭建hexo+github
在这之前,网络上有很多教程,但是还是基于自己遇到的问题和流程写一下.因为自己是小白,所以在过程中遇到了很多小白的问题.这里简单说明 一.安装 首先,需要安装node.js.npm和Git Git可直接 ...
- php保存设置,php如何实现编辑和保存文件?
php如何实现编辑和保存文件? 本文实例讲述了php实现编辑和保存文件的方法.分享给大家供大家参考.具体如下: save_file.php: session_start(); $handle = fo ...
- secure使用vi编辑远程机器文件出现4;m
secure使用vi编辑远程机器文件出现4;m 这个是因为远程机器没有安装vim 安装vim后就可以正常使用securecrt正常编辑远程机器上的文件了.
- 如何编辑ttf字体文件
libfreetype的目标是以最小的内存最快的速度,读取和渲染字体.因此libfreetype并不适宜用来编辑ttf字体文件. 编辑字体文件,可以用FontCreator.微软fonttools.f ...
- 将windows下编辑好的文件(GBK)转换成Linux下的格式(UTF8)
背景:一般我们在windows上编辑好的文件默认编码是GBK,而且换行符是^M,为了将这些文件用在linux上,我们一般会将它们转换成Linux下的文件格式,即去掉^M,且将文件格式转换成UTF8. ...
- 在 Sublime Text 中使用 SFTP 插件快速编辑远程服务器文件 Sublime-text with SFTP plugin ...
Sublime Text 2 本身并不强大,但是它方便使用插件扩展功能,所以变得很强大.今天介绍一个很实用的插件 SFTP ,可以大大提高前端工作效率. 常见的工作流程 有时候修改一些网站上的文件,通 ...
最新文章
- android 应用变量,Android全局应用变量的使用
- HR问:“你能熬夜吗?”,你会如何回答?
- java中文乱码解决方案
- 信息系统项目管理师-案例分析专题(二)案例中常见问题找茬笔记
- 后勤管理系统_充满“智慧”的后勤管理系统是什么样的?
- Word——Word中粘贴Visio图只显示下面一部分
- Bear in the Field(CF-385E)
- Delphi 的信息框相关函数
- 内置函数filter()
- python微控制器编程从零开始 pdf_Python极客项目编程_(美)Mahesh Venkitachalam.pdf
- mysql 联合表(federated)及视图
- Win10窗口背景色改成淡绿色的方法
- python vecm_用Eviews处理有关VARVECM模型的几个问题
- C++ 性能优化篇三《测量性能》
- Google推出即时通讯软件Hello
- linux 配置vpn 客户端,mandriva下成功配置vpn客户端
- 麻将番型计算(二人麻将)
- 思创易控cetron-Cetron Wi-Fi 6 AP 荣获2020年度创新产品•鼎智奖
- 分布式任务调度平台XXL-JOB深度实战
- java json utf-8_关于java:如何使JSONObject的toString()像UTF-8字符一样将UTF-8字符编码为unicode?...
热门文章
- android的listview点击获取当前选项值的方法
- c/c++ 标准库 string
- Nebula Challenge 04
- 利用条件运算符的嵌套来完成此题:学习成绩 =90分的同学用A表示,60-89分之间的用B表示,60分以下的用C表示。...
- 比较jquery中的after(),append(),appendTo()方法
- android热门消息推送横向测评![转]
- Lucene应用开发揭秘 上线啦!((更新程度:完毕))
- 线程通信之多个线程循环执行,(A线程执行5次,B线程执行10次,C线程执行15次)...
- Windows下Eclipse 安装 SVN 插件的两种方法
- Python pow() 函数