hexo主题制作
2019-05-02

ejs

框架

{theme_name}/-+-source/-+-css/ 存放网页css,styl
              |         |
              |         +-js/ 存放网页js
              |         |
              |         ...(存放其他文件)
              |
              `-layout/-+-\partial/ 其他模板
                        |
                        +-index.ejs/ 主页
                        |
                        +-post.ejs/ 文章页
                        |
                        `-layout.ejs/ 模板

模板

官方说明

主页默认继承index.ejs,其余所有页面,没有特别声明layout,都默认继承post.ejs

此外,如果存在layout.ejs,所有的模板都会将自身的layout填入layout.ejs的<%- body %>来重写layout.ejs

ejs

styl

引用:@import "main.styl"

传参

与js传参
var js = '<%- ejs %>';

函数

forEach(function(item) {})

模块

特殊模块

post.ejs:文章页面
index.ejs:主页
layout.ejs:在其他ejs文件中,会把<%- body %>替换成layout.ejs中的内容

模块调用

传参

<%- partial('post.ejs', {
  post: post,
  page: page,
  post_num: post_num
}) %>

变量(`_config.yml`)

hexo变量:config
theme变量:theme

css

滑动条

.class_name::-webkit-scrollbar {
  width: 0px;
}

强制换行(一般word-break: break-all就够了)

code {
  word-break: break-all;
  white-space:pre-wrap; /* css3.0 */
  white-space:-moz-pre-wrap; /* Firefox */
  white-space:-pre-wrap; /* Opera 4-6 */
  white-space:-o-pre-wrap; /* Opera 7 */
  word-wrap: break-word;
}

比例数值混合:width: calc(%100 - 70px);

自定义input关闭键背景

&::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  cursor: pointer;
  background: url("/img/close.png") no-repeat center;
  background-size: 100% 100%;
}

筛选器
- 一级子元素:body > p(TODO)

自定义字体

@font-face {
  font-family: 'varela';
  src: url('/font/VarelaRound.ttf');
}

自定义变量

:root {
  --val: rgba(250, 250, 250, 1);
}

子元素靠右
1. 父元素position为relative
2. 子元素position为absolute,然后自己定位

javascript

jquery

获取css:$(element).css("property")
修改css:$(element).css("property", "value")
监听
$(element).click(function () {
});

scroll顶部,返回过程中无法中断

$(".right_tool_4").click(function () {
  $("html, body").animate({
    scrollTop: 0
  }, 300);
});

元素到顶部距离:$(element).offset.top()
切换className:TODO
$(element).toggleClass("class_name");
解决firefoxborder不对称的问题
scrollbar-width: none;

原生javascript

scroll特定元素(有少部分浏览器不支持smooth效果)

// 1. 使用scrollIntoView
element.onclick = function () {
  target_element.scrollIntoView({
    block: "end",
    behavior: "smooth"
  });
};

// 2. 使用scrollTo
window.scrollTo({
  top: element_position - vertical_offset,
  behavior: "smooth"
})

全页长度: document.body.scrollHeight

文章链接解码(成中文)

str += "<li><a href='" + unescape(decodeURI(data_url)) + "' class='search-result-title'>" + data_title + "</a>";

为页面元素添加属性:element.setAttribute("attribute", "value")

根据不同设备进行放缩

function change_scale() {
  if (navigator.userAgent.match("Android")) {// 放大
    document.body.style.zoom = 1.6;
  } else if (navigator.userAgent.match("Windows") || navigator.userAgent.match("Mac")) {// 缩小
    document.body.style.zoom = 0.7;
  }
}

监听

// 直接修改函数
element.onclick = function() {
  another_function(arg);
}

// 增加监听
element.addEventListener("click", function() {
  addEventListener(arg);
})

判断未定义:typeof x == "undefined"

获取鼠标悬停位置

var event = window.event;
mouse_element = event.target;

修改css的:root属性:document.documentElement.style.setProperty('--color_1', 'rgba(200, 241, 255, 1)');

其他(过期)

本地搜索功能

搜索功能需要RSS,现在使用现成的npm包来生成xml

可使用的包:hexo-generator-search,hexo-generator-searchdb(代码和前面那个一模一样,归属next主题的子项目)

略

latex公式渲染

见hexo插入latex公式

国内一些垃圾浏览器渲染不正确很正常

代码块美化,显示语言类型

注意取消hexo自带的highlight行号

略

附加导航

如果要用guide_active(激活状态)的css属性覆盖原有属性,在css文件中要将guide_active放到其后

略

swig

TODO

ejs

框架

模板

ejs