作者信息

php中文网

认证0级讲师

视频教程分类
推荐视频教程
  • 千万级数据并发解决方案(理论+实战)千万级数据并发解决方案(理论+实战)
  • Laravel基础与实战Laravel基础与实战
  • UNI-APP开发(仿饿了么)UNI-APP开发(仿饿了么)
  • ThinkPHP6开发CMS系统ThinkPHP6开发CMS系统
  • 首页 >web前端 >html教程 > 正文

    教你定制Hexo的landscape打造自己的主题_html/css_WEB-ITnose

    原创2016-06-24 11:23:302480 关注公众号:每天精选资源文章推送
    我敢肯定大家不仅想拥有自己的博客,还想有一套自己的主题。目前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)

    <% if (!index && post.comments){ %>

    然后在Hexo的配置文件_config.yml,注意是Hexo的添加

    duoshuo_shortname: tiantengfei

    关于这个duoshuo_shortname就是你配置网站是的那个多说短域名tiantengfei.duoshuo.com前面那个

    添加百度分享

    同样去百度搜索百度分享然后获取代码,在与上一步配置多说同一个文件中找到粘贴到下面这句话下面,最好不要复制我的,大家可以自己去获取代码然后配置自己喜欢的样式

          

    我貌似把原来的分享和标签给删除了,不然不好整样式。

    添加文章目录

    找到layout/_partial/article.ejs文件中添加

    <% if (theme.excerpt_link){ %>      

    <%= theme.excerpt_link %>

    <% } %> <% } else { %> <% if (!index && post.toc){ %>
    文章目录 <%- toc(post.content, {list_number: false}) %>
    <% } %>

    其中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)

    高并发千万级数据库系统解决方案

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    相关文章

    相关视频


    专题推荐