我的博客地址(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的landscape打造自己的主题_html/css_WEB-ITnose的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did111460