LYNX

Links

Tags

Categories

svg笔记

外部svg

svg引入外部css

TODO

html引入外部svg

  1. embed
  2. img
  3. iframe
  4. object:<object type="image/svg+xml" data="image.svg"></object>
  5. css:background-image
  6. css内联svg(好像没用):参考

文件格式笔记

文件头

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3156"
xmlns:xlink="http://www.w3.org/2010/svg" width="50" height="50">
</svg>
  • 参数说明
    • xmlns
    • viewBox

元素说明

参考:w3cplus

  • def
  • symbol
  • g

内联svg

属性说明

  • 关于描边
    • stroke-dasharray
    • stroke-linecap
    • stroke-linejoin
bootstrap笔记

bootstrap.css

易重关键字

row,container

affix

导航栏class

  • nav-tabs:表格式

  • nav-pills:胶囊式

  • nav-justified:与父元素等宽(?)

  • nav-stacked:垂直方向堆叠

导航栏属性(html)

  • data-offset-top:触发距离
  • data-spy
    • affix
    • scroll

父元素属性(html)

body属性(html)

  • data-spy
    • scroll

tab

tooltip

导航栏

hexo主题制作

本文不对之后的主体优化再做记录

ejs

框架

{theme_name}/-+-script/ (现在还不知道是用来干嘛的,存放字体?)
|
+-source/-+-css/ 存放网页css,styl
| |
| `-js/ 存放网页js
|
`-layout/ 模板

模板

官方说明

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

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

主体块自动调整宽度(节选)

// 摘要块宽度,考虑两行并列
var b_padding = $(".mid_block").css("padding-left"); // padding转数字
var b_margin = $(".mid_block").css("margin-left"); // margin转数字
var rate = mid_block_rate(w_width);
if (b_padding)
{
b_padding = (Number(b_padding.replace("px", "")));
b_margin = (Number(b_margin.replace("px", "")));
var b_offset = b_padding + b_margin;

if (w_width < 1200)
{ // 半页,1列
var b_width = w_width * rate;
var b_left = (w_width - b_width) / 2 - b_offset; // 减去多余的padding
$(".mid_block").css("width", b_width + "px");
$(".mid_block").css("left", b_left + "px");
}
else
{ // 全页,2列
b_offset *= 2;
var b_width = w_width * rate;
var b_left = (w_width - 2 * b_width) / 2 - b_offset; // 因为并排,所以要减去两个padding
$(".mid_block").css("width", b_width + "px");
$(".mid_block").css("left", b_left + "px");
}
}

其中mid_block_rate是一个分段函数

js笔记:ejs向javascript传参

<script>
var cur_page = '<%= page.current%> / <%= page.total%>';
</script>
<%- js('js/paginator') %>

页面页脚

为了防止float属性导致排版问题,页脚的class应和摘要块有交集

<div class="shadow_block bottom_block">
<p id="bottom_block_inner">
<% if (page && page.posts) { %>
<%= page.current %> / <%= page.total %>
<% } else { %>
1 / 1
<% } %>
</p>
</div>

同时宽度要足够大

.bottom_block {
/* 放在底部用于凑长度的块 */
text-align: center;
padding-top: 30px;
padding-bottom: 30px; /* 凑高度 */
padding-left: 0px;
padding-right: 0px;
margin-left: 0px;
margin-right: 0px; /* 居中 */
width: 100%;

border-width: 0px;
box-shadow: 0px 0px 0px;
}

归档页制作

hexo自带的npm模块:blog/node_modules/hexo-generator-index/

页面文章数量配置:blog/_config.yml

ejs笔记:遍历

<% page.posts.each(function(post){ %>
<% if (is_home() || is_tag() || is_category()) { %>
<!-- post带摘要 -->
<style>
embed {
display: none; /* 防止找不到pdf报错 */
}
</style>
<div class="mid_block shadow_block block_300">
<%- partial('post.ejs', {
post: post,
page: page,
post_num: post_num
}) %>
</div>
<% } else if (is_archive()) { %>
<!-- post只有标题 -->
<div class="mid_block shadow_block block_100">
<%- partial('post.ejs', {
post: post,
page: page,
post_num: post_num
}) %>
</div>
<% } %>

翻页

  • post翻页:

    • if (page.prev)
    • url_for(page.next.path)/urll_for(page.prev.path)
  • archive翻页:

    • if (page.prev)
    • url_for(page.next_link)/url_for(page.prev_link)

js笔记:点击事件

$(".right_tool_2").click(function () {
location = '<%= url_for(page.next_link) %>';
});

回到顶部/底部

顶部

jquery自带回到顶部的功能

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

返回过程中无法中断

底部

由于浏览器对scroll-behavior的支持性不好,所以选择scrollIntoView来实现(同样有少部分浏览器不支持smooth效果)

$(document).ready(function () {
document.querySelectorAll(".right_tool_1")[0].onclick = function () {
document.querySelectorAll(".bottom_block")[0].scrollIntoView({
block: "end",
behavior: "smooth"
});
};
});

js笔记

  • 全页长度: document.body.scrollHeight

本地搜索功能

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

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

然后在source里面自行编写search.js,load.jssearch.css

layout.ejs中插入

<div class="shadow_block block_hide_top top_block">
<!-- 隐藏在顶部 -->
<span class="local-search-plugin">
<input type="search" placeholder="Search" id="local-search-input" class="local-search-input-cls">
<!-- placeholder:提示信息 -->
<div id="local-search-result" class="local-search-result-cls"></div>
</span>
</div>

文章链接解码(成中文)

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

latex公式渲染

hexo插入latex公式

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

代码块美化

注意取消hexo自带的highlight行号

高亮

hexo的highlight.js已经做了一部分语法分析,只需要进一步dfs区分关键字来美化,再重写css即可

关于换行和滚动条

.code_pre {
/* 强制换行必须要修改pre */
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;
}

.code_figure::-webkit-scrollbar-thumb {
background-color: var(--molokai_grey);
border-radius: 3px;
}

.code_figure::-webkit-scrollbar {
background-color: rgb(56, 57, 52);
height: 8px;
}

强制换行只有在pre中设置css样式才有效

显示语言类型(兼容性不是很好)

先一遍遍历

function show_language() {
document.querySelectorAll(".highlight").forEach(function(my_node) {
var temp_class = my_node.className.replace(/highlight/, "");
temp_class = temp_class.replace(/code_figure/, "");
console.log(temp_class);
my_node.setAttribute("language_type", temp_class);
});
}

styl格式文件

.code_figure {
/* 代码框 */
border: 1px solid var(--shadow_grey);
border-radius: 3px;
background-color: var(--molokai_black);
padding-left: 20px;
padding-right: 20px;
padding-top: 35px;

font-size: 15px;
position: relative;
overflow-x: hidden;
/* 防止溢出 */
overflow-y: hidden;

/* 显示语言类型 */
&::before {
background: #21252b;

color: white;
content: attr(language_type);
text-indent: 15px;
line-height: 38px;
font-size: 16px;

position: absolute;
top: 0;
left: 0;
height: 38px;
width: 100%;
/* 会溢出 */

font-family: 'DejaVu Sans Mono for Powerline';
font-weight: bold;
padding: 0px 80px;
}

&::after {
content: "";
position: absolute;
margin-top: 13px;
z-index: 3;

width: 12px;
height: 12px;
top: 0;
left: 20px;

border-radius: 50%;
background: #fc625d;
box-shadow: 20px 0px #fdbc40, 40px 0px #35cd4b;
/* 后两个圆是第一个的影子 */
}
}

附加导航

由于bootstrap真的是个垃圾,所以此功能自己手动实现

首先借用highlight功能的dfs,对文章所有标题进行标记,其中需要记录序号(第几个)和级数(h1,h2,h2).然后按序号绑定跳转,跳转功能还是需要scrollIntoView来实现

// 创建对象
function create_guide() {

var left_block = document.getElementsByClassName("left_block")[0];

var guide_title = document.createElement("a");// 跳转至标题
guide_title.innerText = document.getElementById("post_name").innerText;
guide_title.innerHTML = "<div id='guide_title'>" + guide_title.innerHTML + "</div>";

dfs_h(document.body);// 搜索所有的1,2,3级标题

var left_guide = document.createElement("div");
left_guide.setAttribute("class", "left_guide");
for (var i = 0; i < document.h_index; i ++)
{// 设置序号和级数
var temp_a = document.createElement("div");
temp_a.id = "guide_" + i;
temp_a.className = "guide_" + my_guide[i].rank;
temp_a.innerHTML = "<a>" + my_guide[i].name.replace(/</g, "<&shy;") + "</a>";
left_guide.appendChild(temp_a);
}

left_block.appendChild(guide_title);
document.querySelector("#guide_title").onclick = function () {
document.querySelector("#post_name").scrollIntoView({
block: "start",
behavior: "smooth"
});
};
left_block.appendChild(left_guide);
for (var i = 0; i < document.h_index; i ++)
{
document.querySelector("#guide_" + i).setAttribute("onclick", "add_scroll(" + i + ")");
}
}

在dfs之后,监听滚动事件(和自动宽度调整一起执行)

// 附加导航功能
function change_guide(direct)
{
var w_top = $(window).scrollTop();
var guide_1 = null; // 待修改的索引
var guide_2 = null;
var guide_3 = null;
var guide_4 = null;
var guide_5 = null;

for (var i = 0; i < document.h_index; i ++)// h_index是section/guide的总数
{
var this_guide = document.getElementById("guide_" + i);
if ((this_guide.className != "guide_1")
&&(this_guide.className != "guide_2")
&&(this_guide.className != "guide_3")
&&(this_guide.className != "guide_4")
&&(this_guide.className != "guide_5"))
{
$(this_guide).toggleClass("guide_active");// 关闭active属性
}
}

for (var i = 0; i < document.h_index; i ++)// 从上往下遍历
{
var this_section = document.getElementById("section_" + i);
var temp_offset = $("#section_" + i).offset().top - w_top;
// console.log(i, temp_offset);
if (temp_offset > 5) break;// 未到达的section
if (this_section.className.match("section_1") != null) { // 有可能会有其他class名,比如使用了mathjax
guide_1 = document.getElementById("guide_" + i);// 注意id寻找
guide_2 = null;
guide_3 = null;
guide_4 = null;
guide_5 = null;
} else if (this_section.className.match("section_2") != null) {
guide_2 = document.getElementById("guide_" + i);
guide_3 = null;
guide_4 = null;
guide_5 = null;
} else if (this_section.className.match("section_3") != null) {
guide_3 = document.getElementById("guide_" + i);
guide_4 = null;
guide_5 = null;
} else if (this_section.className.match("section_4") != null) {
guide_4 = document.getElementById("guide_" + i);
guide_5 = null;
} else if (this_section.className.match("section_5") != null) {
guide_5 = document.getElementById("guide_" + i);
}
}

if (guide_1) {
$(guide_1).toggleClass("guide_active");
}
if (guide_2) {
$(guide_2).toggleClass("guide_active");
}
if (guide_3) {
$(guide_3).toggleClass("guide_active");
}
if (guide_4) {
$(guide_4).toggleClass("guide_active");
}
if (guide_5) {
$(guide_5).toggleClass("guide_active");
}
}

注意遍历的顺序

如果要用guide_activecss属性覆盖原有属性,要将guide_active放到其后(在css文件里)

插入live2d

直接把所有文件合并然后和其他脚本扔上去就可以了

修改list样式

无序列表

方案一:使用border

.main_block ul li {
list-style: none;
margin-left: -5px;
margin-top: 5px;
padding-bottom: 5px;
// 解决latex公式过挤的问题
&::before {
content: "";
border: 5px solid var(--hover_blue);
border-radius: 100%;

margin-right: 10px;
margin-top: 7px;
float: left;
}
li {
margin-left: -20px;
&::before {
border: 5px solid #ddd;
}
li {
&::before {
border: 5px solid #eee;
}
}
}
}

缺点:可能会受字体,行距,latex渲染的影响,显示不正确

方案二:使用字符编码

.main_block ul li {
list-style: none;
margin-left: -5px;
margin-top: 5px;
padding-bottom: 5px;
// 解决latex公式过挤的问题
&::before {
content: "\2022";
font-size: 24px;
left: -5px;
bottom: 7px;
color: var(--hover_blue);
position: relative;
float: left;

text-shadow: 0px 0px 3px var(--link_blue);
}
li {
margin-left: -20px;
&::before {
color: #999
text-shadow: 0px 0px 3px #bbb;
}
li {
&::before {
color: #ccc
text-shadow: 0px 0px 3px #eee;
}
}
}
}

缺点:字体不能过大(当前24px是极限),否则会显示错误

有序列表

参考,codeitdown

方案一

ol {
list-style: none;
counter-reset: li-counter;
}
ol > li{
margin-top: 5px;
padding-bottom: 5px;
position: relative;
}
ol > li:before {
position: absolute;
top: 3px;
left: -20px;
width: 12px;
height: 12px;

text-align: center;
font-size: 10px;
color: white;
overflow: hidden;
// 防止超过10显示不正常

border: 3px solid #c5c5c5;
border-radius: 50%;
background-color: #464646;
content: counter(li-counter);
counter-increment: li-counter;
}

方案二

ol {
list-style: none;
counter-reset: li-counter;
}
ol > li{
margin-top: 5px;
padding-bottom: 5px;
position: relative;
}
ol > li:before {
position: absolute;
padding-right: 3px;
left: -24px;
height: 22px;

color: #464646;
font-weight: 1000;
line-height: 1.2;
border-right: 3px solid #c5c5c5;

content: counter(li-counter) ".";
counter-increment: li-counter;
}

根据不同设备进行放缩

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;
}
}

文件说明

ejs/-+-layout/-+-partial/-+-head.ejs
| | |
| | +-header.ejs
| | |
| | +-archive.ejs
| | |
| | +-post.ejs
| | |
| | +-paginator.ejs
| | |
| | +-search.ejs
| | |
| | `-latex.ejs
| |
| +-index.ejs
| |
| +-layout.ejs
| |
| +-archive.ejs
| |
| +-tag.ejs
| |
| +-category.ejs
| |
| `-post.ejs
|
+-source/-+-css/-+-style.styl
| | |
| | +-block.css
| | |
| | +-tool.css
| | |
| | +-font.css
| | |
| | +-table.css
| | |
| | +-search.styl
| | |
| | +-code_normal.css
| | |
| | `-code_molokai.css
| |
| `-js/-+-change.js
| |
| +-guide.js
| |
| +-highlight.js
| |
| +-load.js
| |
| `-search.js
|
`-_config.yml

swig

hexo自定义配置

链接和表格

<head>:blog/themes/next/layout/_third-party

前后加

<style type="text/css"></style>
  • 文章内链接
.post-body p a{
transition-duration: 0.4s;
font-family: DejaVu Sans Mono;
border: #ffffff 5px solid;
color: #fc6423;
font-weight: 700;
}

.post-body p a:hover{
transition-property: background;
transition-property: color;
transition-duration: 0.1s, border-color;
transition-duration: 1s;
border-color: #999999;
color: #ffffff;
background: #999999;
}
  • 表格
.post-body td a{
font-family: DejaVu Sans Mono;
border: none;
font-weight: 500;
color: #fc6423;
}

.post-body td a:hover{
transition-property: color;
transition-duration: 0.1s;
font-weight: 700;
color: #ffffff;
}

.post-body th{
font-size: 16px;
font-family: DejaVu Sans Mono;
font-weight: 800;
}

.post-body td:hover, .post-body th:hover{
transition-property: background, color;
transition-duration: 0.4s;
color: #ffffff;
background: #999999;
}

table{
border: 5px #999999 solid;
box-shadow: 8px 8px 5px #999999;
border-radius: 15px;
}
  • 注意不要用.post-block,否则会将post链接也修改.
  • 因为不同页面大小,.post-body p atransition-duration属性还有大小渐变效果.
  • 内嵌脚本好像不能用&:
  • visited不知道为什么用不了
  • 表格不会修边

参考
选择器排序问题
参考2

  • 主体自适应宽度(不要加在<head>)

原变量名(在blog/themes/next/source/css/_variables/中的几个文件里)$main-desktop,.container .main-inner,.footer-inner.header都用到该变量

window.onresize = layout_resize;
window.onload = layout_resize;
sheet = document.getElementById('layout_style').sheet;
function layout_resize(){
var x = window.innerWidth;
if (x < 1200){
sheet.addRule('.container .main-inner, .footer-inner, .header', 'width:95%');
}else if (x < 1400){
sheet.addRule('.container .main-inner, .footer-inner, .header', 'width:90%');
}else{
sheet.addRule('.container .main-inner, .footer-inner, .header', 'width:80%');
}
}
  • 修改list(<li>)样式

    • 增加list图标(font awesome)
    var my_body = document.getElementsByTagName('body')[0];
    window.onresize = dfs(my_body);
    window.onload = dfs(my_body);
    function myFunction(){
    var my = document.getElementsByTagName('li')[0];
    alert(my.tagName);
    alert(my.tagName == "LI");
    }
    function dfs(my_node){
    //alert(my_node.innerHTML);
    if (my_node.tagName == 'UL' && my_node.className == '')
    {
    my_node.className = "fa-ul";
    }
    if (my_node.tagName == 'LI' && my_node.className == '')
    {
    var my_tag = document.createElement('i');
    //my_tag.className = "fa-li fa fa-spinner fa-spin";
    my_tag.className = "fa-li fa fa-arrow-right";
    my_tag.style = "font-size:16px;";
    my_node.appendChild(my_tag);
    //my_node.insertBefore(my_tag, my_node.childNodes[0]);
    }
    var my_child = my_node.childNodes.length;
    for (var i = 0; i < my_child; i ++)
    {
    dfs(my_node.childNodes[i]);
    }
    }
    • 清除原有list

位置:blog/themes/next/source/css/_common/components/post/post-expand.swig,去掉

ul li { list-style: none; }
  • 模块阴影

blog/themes/next/source/css/_variables/Gemini.styl

$box-shadow-inner
$box-shadow

重要更新

之前写在md文件和layout.swig文件的<script>模块不知道为什么用不了了,使用layout.swig加载也没有用

现在直接在swig里面写javascript,位置:third_party/my_js,全部加载到my_body.swig里面,然后其中的main.swig全局上给元素增加监听属性(重点是增加监听属性,js位置不重要)

<script>
var main_body = document.getElementsByTagName('body')[0];
main_body.setAttribute('onresize', 'layout_resize(), table_resize()');
main_body.setAttribute('onload', 'layout_resize(), table_resize()');
</script>

针对不同文章,可以在md里面声明不同id的<style>,然后js中根据id来进行渲染,避免混乱,注意<style>要写在文章中间

现在使用的一些id

  • layout_style:在my_head.swig,控制所有文章

  • live2d_table:单个文章


重要更新

third_party/my_js/main.swig改成用my_all统一执行,注意函数执行的顺序

<script>
setTimeout("my_init()", 0);
setTimeout("my_init()", 1000);
setTimeout("my_init()", 3000);
function my_init()
{
var main_body = document.getElementsByTagName('body')[0];
main_body.setAttribute('onresize', 'my_all()');
main_body.setAttribute('onload', 'my_all()');
main_body.setAttribute('onclick', 'live2d_lazy_start(50)');
// window.onload = my_all();
// window.onresize = my_all();
}
function my_all()
{
live2d_lazy_start(0);
layout_resize();
dfs_li_entry();
table_resize();
}
</script>

自定义滚动条

chrome

demo及源码

  • 位置theme/next/source/css/_custom/scrollbar.styl
  • 样例:
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
background-color: #eeeeee;
}

::-webkit-scrollbar
{
width: 13px;
background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb
{
background-color: #F90;
background-image: -webkit-linear-gradient(90deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
  • 引入(css/_custom/custom.styl)
@import "./scrollbar";
  • 自动隐藏/显示(不太好的实现)
<script>
function bar_init()
{
document.styleSheets[2].addRule("::-webkit-scrollbar", "width: 3px;");
}
function bar_hide()
{
var x_offset = window.innerWidth - event.x;
var sheet = document.getElementById('layout_style');
if (x_offset >= 30)
{
document.styleSheets[2].addRule("::-webkit-scrollbar", "width: 3px;");
}
else
{
document.styleSheets[2].addRule("::-webkit-scrollbar", "width: 10px;");
}
}
</script>

缺点:会往css里面写一堆东西.文章主体宽度会突变

背景颜色

css/_variables/Gemini.styl

$body-bg-color = #eee

插入pdf

Adobe参数

<embed src="$file#toolbar=0&navpanes=0&scrollbar=0&zoom=120">
<object width="400" height="500" type="application/pdf" data="$file?#zoom=80&scrollbar=1&toolbar=1&navpanes=1">
  • 对于page:$pagename/$filename
  • 对于_posts:$filename
hexo修改代码块

此文作废,相关内容请查看hexo主题制作


记得hexo cl

修改高亮+自动换行

  1. 禁用hexo高亮

  2. <body>插入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/NiaBie/code_prettify@0.0.0/$pathtofile.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/NiaBie/code_prettify@0.0.0/loader/prettify.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto;');
prettyPrint();
});
</script>
  1. css(blog/themes/next/source/css/main.styl)插入(添加到_custom/custom.styl)
pre{
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; /* Internet Explorer 5.5+ */
}

code{
font-style: bold;
font-weight: 800;
}

table{
line-height: 1.3;
}

td{
...
}

a{
font-size: 15px;
font-family: "DejaVu Sans Mono";
font-style: italic;
...
}

p{
...
}

注意css样式的覆盖顺序

代码块显示语言类型

  1. 启用hexo代码高亮,关闭其他高亮

  2. 添加blog/themes/next/script/codeblock.js

var attributes = [
'autocomplete="off"',
'autocorrect="off"',
'autocapitalize="off"',
'spellcheck="false"',
'contenteditable="true"'
]

var attributesStr = attributes.join(' ')

hexo.extend.filter.register('after_post_render', function(data) {
while (/<figure class="highlight ([a-zA-Z]+)">.*?<\/figure>/.test(data.content)) {
data.content = data.content.replace(/<figure class="highlight ([a-zA-Z]+)">.*?<\/figure>/, function() {
var language = RegExp.$1 || 'plain'
var lastMatch = RegExp.lastMatch
lastMatch = lastMatch.replace(/<figure class="highlight /, '<figure class="iseeu highlight /')
return '<div class="highlight-wrap"' + attributesStr + 'data-rel="' + language.toUpperCase() + '">' + lastMatch + '</div>'
})
}
return data
})
  1. 修改blog/themes/next/source/css/_common/components/highlight/highlight.js

    • 调整滚动条,上下位置调整,右端显示问题
$code-block{
overflow: auto;
margin: 34px -10px 0px 0px;
padding: 0px 10px 0px 0px;
}
  • 添加代码
highlight-wrap[data-rel] {
position: relative;
overflow: hidden;
border-radius: 5px;
box-shadow: 0 10px 30px 0px rgba(0,0,0,0.4);
margin: 35px 0;
::-webkit-scrollbar {
height: 10px;
}

::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
&::before {
color: white;
content: attr(data-rel);
height: 38px;
line-height: 38px;
background: #21252b;
color: #fff;
font-size: 16px;
position: absolute;
top: 0;
left: 0;
width: 100%;
font-family: 'Source Sans Pro', sans-serif;
font-weight: bold;
padding: 0px 80px;
text-indent: 15px;
float: left;
}
&::after {
content: " ";
position: absolute;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #fc625d;
width: 12px;
height: 12px;
top: 0;
left: 20px;
margin-top: 13px;
-webkit-box-shadow: 20px 0px #fdbc40, 40px 0px #35cd4b;
box-shadow: 20px 0px #fdbc40, 40px 0px #35cd4b;
z-index: 3;
}
}

padding右边的数值调大一些可以避免换行的一些bug

  1. 隐藏底部的滚动条

codeblock.js中作如下修改:

...
lastMatch = lastMatch.replace(...)
+++ lastMatch = lastMatch.replace(/<\/span/, '<br><\/span')

使所有代码下面多出一行,然后修改blog/themes/next/source/css/_common/components/highlight/highlight.stylmarginpadding属性来屏蔽滚动条

  1. 修改高亮风格

blog/themes/next/_config.yml使用highlight_theme:my,在blog/themes/next/source/css/_common/components/highlight/theme.style最后加上:

if $highlight_theme == "my"
$highlight-background = #000510// 000000
$highlight-current-line = #ff0000// 2a2a2a
$highlight-selection = #ff0000// 424242
$highlight-foreground = #ffffff// eaeaea normal-code
$highlight-comment = #969896// 969896 comment grey
$highlight-red = #50e7ff// d54e53 lightblue
$highlight-orange = #ffff44// e78c45 printf
$highlight-yellow = #ff0000// e7c547
$highlight-green = #647fff// b9ca4a string
$highlight-aqua = #00d7ff// 70c0b1 function main
$highlight-blue = #ff87ff// 7aa6da parathese yellow
$highlight-purple = #00ff73// c397d8 darkblue macro
$highlight-gutter = {
color: lighten($highlight-background, 40%),
bg-color: lighten($highlight-background, 16%)
}

参考
空格符的处理

html笔记

<canvas>放缩及调整位置

<canvas id = "canvas" width = "300" height = "300" style = "width:200px; height:200px; left:60px"></canvas>

表格固定宽度

<style>
table
th:first-of-type {width: 200px;}
th:nth-of-type(2) {width: 200px;}
</style>

表格自适应宽度

<script>
window.onresize = my_resize;
window.onload = my_resize;
function my_resize(){
var x = window.innerWidth;
sheet = document.getElementById('my_table').sheet;
if (window.innerWidth < 950){
sheet.addRule('table th:first-of-type, table th:nth-of-type(2)',
'width: ' + x/7 + 'px;');
}else{
sheet.addRule('table th:first-of-type, table th:nth-of-type(2)',
'width: ' + x/15 + 'px;');
}
}
</script>

js修改css

document.styleSheets[0].addRule('.box', 'height: 100px');
document.styleSheets[0].insertRule('.box {height: 100px}', 0);

参考
w3plus

元素里面的文字也算子节点

js提取元素

div大小放缩示例

<head>
<script type="text/javascript">
function mouse() {
var direct = 0;
e = window.event;
if (e.wheelDelta) { //判断浏览器IE,谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
change(1);
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
change(-1);
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail > 0) { //当滑轮向上滚动时
change(1);
}
if (e.detail < 0) { //当滑轮向下滚动时
change(-1);
}
}
}

function change(num) {
var b1 = document.getElementById('b1');
var bit = b1.width/b1.height;
if (num == 1) {
b1.src = "/i/eg_mouse.jpg";
b1.width += 2*bit;
b1.height += 2;
if (b1.style.left == "") {
b1.style.left = "-" + bit + "px";
b1.style.top = "-1px";
} else {
var temp = (Number(b1.style.left.replace(/px/, "")) - 1*bit).toString() + "px";
// 注意toString加括号
b1.style.left = temp;
var temp = (Number(b1.style.top.replace(/px/, "")) - 1).toString() + "px";
b1.style.top = temp;
}
} else {
b1.src = "/i/eg_mouse2.jpg"
b1.width -= 2*bit;
b1.height -= 2;
if (b1.style.left == "") {
b1.style.left = bit + "px";
b1.style.top = "1px";
} else {
var temp = (Number(b1.style.left.replace(/px/, "")) + 1*bit).toString() + "px";
b1.style.left = temp;
var temp = (Number(b1.style.top.replace(/px/, "")) + 1).toString() + "px";
b1.style.top = temp;
}
}
}
</script>
</head>

<body>
<a href="http://www.w3school.com.cn" onmousewheel="mouse()">
<img alt="Visit W3School!" src="/i/eg_mouse2.jpg" id="b1" style="position: fixed; top: 100px; left: 100px;" width="200px" height="100px" />
<!-- 不要把width写进style -->
</a>
</body>

1 / 1