Clement

如果丢掉盔甲,我依然是骄傲帅气的骑士。

  • 菜单
  • 标签
  • 友情链接
  • 关于我
  • 擅长前端各项技能,喜欢折腾新技术,对JavaScript/Html/CSS相关客户端、服务端(Java/Node.js)以及数据库(MYSQL/SQLServer)知识很感兴趣。

    第一次和大家见面

      缓缓的步伐,沉重的精神包袱让我来不及准备就一下步入了新世界,优质的精神粮食让自己内在的一些东西慢慢发生了根本性的变化,感觉每一次进步都是姗姗来迟的,希望这次变革比上一次进步要更大。通过积累慢慢地沉淀自己,可以在将来的某一天能厚积薄发。
      虽然个人网站上线了,但是身上的担子一点也不轻松,还要花时间将数据迁移过来,整理数据是件麻烦事,不过更是考验人的耐性。
      最近这段时间都沉迷于研究Hexo,发现Hexo是一款基于Node.js的静态博客框架,非常轻量且强大。比臃肿的wordpress清新脱俗,感兴趣的同学可以到hexo延伸阅读,基本操作流程我在这里就不再赘述,互联网上有许多关于这些基础教程的说明。Node.js大家应该都熟知,v8引擎下的JavaScript平台还是什么称呼的。总之,创建的是js文件,使用的是JavaScript语言。换言之,就是,我们使用借助JavaScript让CSS更富有表现力,更动态,更健壮!

    在这里我要说一下怎样进行数据交互:

  • Hexo静态博客框架搭建可以不借助数据库进行一些简单数据处理,数据主要是存储在_config.yxl配置文件中,通过更改配置文件的键值对数据来对博客基本参数进行更新,当然也可以利用ajax做异步数据处理。
  • Hexo可以直接创建基于markdown格式的md文件,方便编辑文章内容,当然也可以新建html,不过这样比较麻烦,文章内容显示效果与markdown标准样式有关。推荐使用在线markdown编辑阅读器,然后导出md文件格式到hexo的_posts文件夹下发布。
  • 在对Hexo进行主题设置的时候,要经常读取Hexo根目录下_config.yml的键值数据,可以直接<%=config.key%>读取value的数据,value也可以是数组对象。每次对Config数据修改之后必须要重启服务,但是修改themes文件夹下对应的主题配置_config.yml,就不需要重启服务。不过使用方式是这样<%=theme.key%>
  • 上面提到的<%= %>还有未提及到的<%- %>和<% %>都是用到ejs模版引擎,可以直接在<%%>嵌套javascript代码,非常方便和强大。关于ejs模版引擎的使用方法可以到官网延伸阅读http://www.embeddedjs.com/
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    //将_config.yml数据读取出来存放到js变量中
    <script>
    var yiliaConfig = {
    fancybox: <%=theme.fancybox%>,
    animate: <%=theme.animate%>,
    isHome: <%=is_home()%>,
    isPost: <%=is_post()%>,
    isArchive: <%=is_archive()%>,
    isTag: <%=is_tag()%>,
    isCategory: <%=is_category()%>,
    fancybox_js: "<%- theme.CDN.fancybox_js %>",
    scrollreveal: "<%- theme.CDN.scrollreveal %>",
    search: <%= theme.search.on %>,
    overlayList: "<%- theme.overlay%>"
    }
    </script>

    还可以将_config.yml数据读取出来存放到主题目录下config.root/source/css/xx.styl文件中,css文件夹下有多个styl文件,stylus还具备面向对象继承的特性,Hexo在编译这些样式文件的时候会自动合并成style.css,对样式进行一些基本加工处理。对stylus内容感兴趣的同学可以到这里延伸阅读。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    highlight_style = hexo-config("highlight_style.on")
    code_block = hexo-config("highlight_style.code_block")
    if highlight_style
    if code_block
    highlight-background = rgba(51, 51, 51, .85)
    highlight-current-line = #393939
    highlight-selection = #515151
    highlight-foreground = #cccccc
    highlight-comment = #999999
    highlight-red = #f2777a
    highlight-orange = #f99157
    highlight-yellow = #ffcc66
    highlight-green = #99cc99
    highlight-aqua = #66cccc
    highlight-blue = #6699cc
    highlight-purple = #cc99cc

    hexo-config是hexo辅助函数,可以用来读取配置文件信息

    文章目录
    1. 1. 在这里我要说一下怎样进行数据交互:
  • 拉格朗日中值定理学习笔记
  • 罗尔定理学习笔记
  • 零点定理学习笔记
  • JavaScript创建对象之理解原型对象(笔记4)
  • JavaScript创建对象之理解原型对象(笔记3)
  • JavaScript创建对象之构造函数模式(笔记2)
  • JavaScript创建对象之工厂模式(笔记1)
  • ECMAScript属性类型
  • 各大互联网公司前端笔试面试题–JavaScript篇(持续更新)
  • Web异步交互技术之iframe
  • html页头设置不缓存
  • GitHub配置与使用总结(持续更新)
  • 七牛的qrsbox命令行工具使用 for osx
  • VirtualBox在OSX下无法识别U盘,提示Failed to create a proxy device for the USB device. (Error: VERR_PDM_NO_USB_PORTS).
  • sublime基本介绍和使用技巧(持续更新)
  • 第一次和大家见面
  • 数据迁移中,敬请期待!
  • css+div解决文字溢出控制显示字数
  • js的defer属性对dom加载的影响
  • Web前端开发学习教程