Cacher is the code snippet organizer for pro developers

<!-- 页眉区块 -->
<div class="bar head">词频 : {{词频}}  ..  {{音标}} .. {{Tags}} </div>

<!-- 正面区块 -->



{{#词汇}}
<div class="section">
<div id="front" class="items"><a href="eudic://x-callback-url/searchword?word={{词汇}}&x-success=anki://" style="color:#636363;font-weight:bold;text-decoration:none;line-height: 0.05;text-align: right" > {{词汇}}</a> </div>
</div>
{{/词汇}}


{{#混淆正}}
<div class="bar head">混淆正</div>
<div class="section">
<div id="back-extra3" class="backlist items">{{混淆正}}</div>
</div>
{{/混淆正}}

<!-- 复制粘贴调整朗读次数 -->
{{发音}}
{{发音}}
{{发音}}




<!-- 结束 -->

{{FrontSide}}

{{#混淆反}}
<div class="bar head">混淆反</div>
<div class="section">
<div id="back-extra3" class="backlist items">{{混淆反}}</div>
</div>
{{/混淆反}}

{{#单词释义解释比例}}
<div class="bar head">单词释义解释比例</div>
<div class="section">
<div id="back-extra2" class="items">{{单词释义解释比例}}</div>
</div>
{{/单词释义解释比例}}

{{#简明英汉}}
<div class="bar head">简明英汉</div>
<div class="section">
<div id="back-extra2" class="items">{{简明英汉}}</div>
</div>
{{/简明英汉}}

{{#词根}}
<div class="bar head">词根</div>
<div class="section">
<div id="back-extra2" class="items">{{词根}}</div>
</div>
{{/词根}}

<div id="back-extra4" class="section" onclick="toggle">{{完整英文解释}}</div>
<div id="full" class="extension" onclick="toggle">{{完整英文解释}}</div>
<button onclick="myFunction()">详细解释</button>

{{#补充信息}}
<div class="bar head">补充信息</div>
<div class="section">
<div id="back-extra3" class="backlist items">{{补充信息}}</div>
</div>
{{/补充信息}}

<br>


<!-- 页脚区块 -->
<div class="bar foot">
<div id="url"><a href="http://dict.cn/{{词汇}}">词频图</a></div>

<div class="bar foot">
<div id="url3"><a href="https://www.91dict.com/words?w={{词汇}}">人人词典</a></div>
</div>


<!--
JS帮助函数
效果：词性彩色高亮。在指定的区块中，若有英语词性符号，则高亮成预定义的彩色背景
用法：将下列函数querySelectorAll('#back')中的back，换成含有英语词性的区块ID
举例：比如正面字段所在区块<div id="front">包含了形如Test - 'n.测试'这样的英语单词解释，需要高亮词性n. 那么只要把下列函数中相应地方改为querySelectorAll('#front')就可以了
-->

<script type="text/javascript">
var colorMap = {
'n.':'#e3412f',
'a.':'#f8b002',
'adj.':'#f8b002',
'ad.':'#684b9d',
'adv.':'#684b9d',
'v.':'#539007',
'vi.':'#539007',
'vt.':'#539007',
'prep.':'#04B7C9',
'conj.':'#04B7C9',
'pron.':'#04B7C9',
'art.':'#04B7C9',
'num.':'#04B7C9',
'int.':'#04B7C9',
'interj.':'#04B7C9',
'modal.':'#04B7C9',
'aux.':'#04B7C9',
'pl.':'#D111D3',
'abbr.':'#D111D3',
};
[].forEach.call(document.querySelectorAll('#back-extra2'), function(div) {
div.innerHTML = div.innerHTML
.replace(/\b[a-z]+\./g, function(symbol) {
if(colorMap[symbol]) {
return '<a class="hightlight" style="background-color:'
+ colorMap[symbol] + ';" >'+ symbol + '</a>';
}else{
return symbol;
}
});
});

</script>

<script type="text/javascript">
function myFunction() {
var x = document.getElementById("full");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<script>var initVoice = function () {
var player = document.getElementById('dictVoice');
document.addEventListener('click', function (e) {
var target = e.target;
if (target.hasAttribute('role') && target.getAttribute('role').indexOf('dict_audio_js') >= 0) {
var url = target.getAttribute('data-rel');
player.setAttribute('src', url);
player.volume = 1;
player.play();
e.preventDefault();
}
}, false);
};
initVoice();</script>

</style>

<style>

/*卡片全局样式*/
.card {
font-family : helvetica, arial, sans-serif; /*字体名称*/
font-size : 20px; /*字体大小-16px*/
text-align : left; /*对齐方式-左对齐*/
color : #1d2129; /*字体颜色-#1d2129*/
background-color : #e9ebee; /*背景颜色-#e9ebee*/
}

/*页眉页脚全局样式*/
.bar{
border-radius : 3px; /*圆角幅度-3px*/
border-bottom : 1px solid #29487d; /*底边线颜色-#29487d*/
color : #fff; /*字体颜色-白色*/
padding : 5px; /*四周留白-5px*/
text-decoration : none; /*文本修饰-无*/
font-size : 14px; /*字体大小-12px*/
font-weight : bold; /*字体磅数-加粗*/
}

.bar #url{
text-decoration : none;
font-size : 16px;
color : #fff;
font-weight : bold;
}

.bar #url3{
text-decoration : none;
font-size : 16px;
color : #fff;
font-weight : bold;
}


/*页眉样式*/
.head{
padding-left : 25px; /*左侧留白-25px 为图标预留空间*/
background : #365899 url(_clipboard.png) no-repeat /*记事本图标*/
}

/*页脚样式*/
.foot{
padding-right : 50px; /*右侧留白-25px 为图标预留空间*/
text-align : left; /*文本右对齐*/
background : #365899 no-repeat right /*云端图标*/
}

/*区块全局样式*/
.section {
border : 1px solid; /*边缘样式-实线1px*/
border-color : #e5e6e9 #dfe0e4 #d0d1d5; /*边缘颜色*/
border-radius : 3px; /*圆角幅度-3px*/
background-color : #fff; /*背景颜色-白色*/
position : relative; /*定位-相对定位*/
margin : 5px 0; /*间隔-上下5px，左右0px*/
}

.extension {
font-size : 20px;
line-height: 1.8;
}


/*区块项全局样式*/
.items{
margin : 0 12px; /*区块间隔*/
padding : 10px 0 8px 0; /*区块留白*/
line-height: 1.8;
}

hr{
border : 0; /*分割线宽*/
margin : 0 12px; /*区块间隔*/
border-top : 1px solid #e5e5e5; /*边缘样式-实线1px*/
}

/*正面背面全局样式*/
#front,
#back{
line-height : 1em; /*段落行高-1.2em*/
}

/*正面字段样式*/
#front{
font-size : 35px; /*字体大小-35px*/
color : #000; /*字体颜色-黑色*/
text-align : left; /*文本对齐-居左*/
line-height: 1;
}

/*背面字段样式*/
#back{
font-size : 18px; /*字体大小-16px*/
color : #222; /*字体颜色-蓝色*/
text-align : left; /*文本对齐-居左*/
line-height : 2em;
}

/*词性高亮基本样式*/
.hightlight{
font-size : 16px; /*字体大小-12px*/
border-radius : 4px; /*圆角幅度-4px*/
color : #fff; /*字体颜色-白色*/
padding : 0 3px; /*左右留白-3px*/
margin-right : 5px; /*右侧间隔-5px*/
}

/*额外字段预留样式*/
#front-extra1{
}
#front-extra2{
}
#back-extra1{
}
#back-extra1{
}



#back-extra4{
display:none;
}

.extension {
display:none;
}


</style>

<!--
JS帮助函数
效果：折叠展开效果。点击特定的区块/图片后，使指定的某区块折叠或展开
用法：将函数toggle赋予区块或者图片的onclick事件，并将e命名为要折叠的区块ID
举例：点击页眉，将正面区块折叠，可以按如下方式操作
在页眉的区块中加onclick=toggle(e），其中将e命名为要折叠的区块ID'front'
修改后的页眉区块如下
<div class="bar head" onclick="toggle('front')">牌组名称 : {{Deck}}</div>
-->
<script>
function toggle(e){
var box=document.getElementById(e);
if(box.style.display=='none'){
box.style.display='block';
}
else{
box.style.display='none';
}
}
</script>

<style>