2018 国庆小长假记事

国庆七天小长假,都干了些什么呢?剁手买 VPS 了吗?感触最多:计划赶不上变化。放假虽累,不过不管怎么样,总比上班强。

Day 1 宅 带娃 WordPress

关键词:宅、带娃、WordPress

假期第一天,意料之中,宅,带娃,买菜做饭。唯一不同的是剁馅包饺子包云吞,这是个坑,没闲情千万别玩。

傍晚时分挖了个新坑,重新给 WordPress 博客文章增加目录导航。以前 Begin 主题是自带这个功能的,后来不知道为什么把它精简掉了。这次自动提取目录功能函数修改自「WordPress 文章内容索引,多级导航目录自动提取生成代码 - 阁主手札」,支持多级导航目录提取生成

原文 PHP 代码▼展开

/**
* @param $content
* @return mixed|string
* @author DingLipeng<https://www.gznotes.com>
* @last_modify 2015-08-22
*/
function article_index($content)
{
if (!is_singular()) {
return $content;
}
$index = '';
$ol = '';
$arr = array();
$pattern = '/<h([2-6]).*?\>(.*?)<\/h[2-6]>/is';
if (preg_match_all($pattern, $content, $arr)):
$count = count($arr[0]);
foreach ($arr[1] as $k => $v) {
//添加列表头
if ($k <= 0) {
$index = '<ol class="ljfl">'; //顶级
} else {
if ($v > $arr[1][$k - 1]) {
if ($v - $arr[1][$k - 1] == 1) {
$index .= '<ol>'; //上层小,层级高,当前为子层,先输出ol
} elseif ($v == $arr[1][$k - 1]) {
} else {
$index .= '文章目录层级不合法';
return false;
}
}
}
$title = strip_tags($arr[2][$k]);
$content = str_replace($arr[0][$k], '<h' . $v . ' id="index-' . $k . '">' . $title . '</h' . $v . '>', $content);
$index .= '<li class="h' . $v . '"><a rel="contents chapter" href="#index-' . $k . '">' . $title . '</a></li>'; //输出本层li
//列表封闭规则
if ($k < $count - 1) {
if ($v > $arr[1][$k + 1]) { //当前层大于下一层,本层结束,封底
$c = $v - $arr[1][$k + 1];
for ($i = 0; $i < $c; $i++) {
$ol .= '</ol>';
$index .= $ol;
$ol = '';
}
}
} else {
$index .= '</ol>';
}
}
$index = '<div class="mic-index ljpf ljhand ljbdrc ljtc"><i class="icon iconfont">&#xe61d;</i></div><nav class="entry-index ljcfix ljpf ljvh" role="navigation">' . $index . '</nav>';
$content = $content.$index;
endif;
return $content;
}
add_filter( "the_content", "article_index" );

下面是在用代码,仅供参考,需要根据实际修改:▼展开

代码复制到主题 functions.php 文件,自动提起生成目录导航(h2~h4)。

// 目录
function article_catalog($content) {
if (!is_singular()) {
return $content;
}
$index = '';
$ol = '';
$arr = array();
$pattern = '/<h([2-4]).*?\>(.*?)<\/h[2-4]>/is';
if (preg_match_all($pattern, $content, $arr)):
$count = count($arr[0]);
foreach ($arr[1] as $k => $v) {
//添加列表头
if ($k <= 0) {
$index = '<ol class="catalog">'; //顶级
} else {
if ($v > $arr[1][$k - 1]) {
if ($v - $arr[1][$k - 1] == 1) {
$index .= '<ol>'; //上层小,层级高,当前为子层,先输出ol
} elseif ($v == $arr[1][$k - 1]) {
} else {
$index .= '文章目录层级不合法';
return false;
}
}
}
$title = strip_tags($arr[2][$k]);
$content = str_replace($arr[0][$k], '<h' . $v . ' id="index-' . $k . '">' . $title . '</h' . $v . '>', $content);
$index .= '<li class="h' . $v . '"><a rel="contents chapter" href="#index-' . $k . '">' . $title . '</a></li>'; //输出本层li
//列表封闭规则
if ($k < $count - 1) {
if ($v > $arr[1][$k + 1]) { //当前层大于下一层,本层结束,封底
$c = $v - $arr[1][$k + 1];
for ($i = 0; $i < $c; $i++) {
$ol .= '</ol>';
$index .= $ol;
$ol = '';
}
}
} else {
$index .= '</ol>';
}
}
$index = "
\n<div id=\"log-box\">
<div id=\"catalog\">\n" . $index . "<span class=\"log-zd\"><span class=\"log-close\"><a title=\"隐藏目录\"><strong>文章目录X</strong></a></span></span></div>
</div>\n";
$content = $content.$index;
endif;
return $content;
}
add_filter( "the_content", "article_catalog" );

自动提取生成目录内容-水煮鱼版:

改自 WPJAM Basic 插件。

// 目录 - 水煮鱼 wpjam-toc

//内容中自动加入文章目录
add_filter('the_content',function($content){
if( is_singular() ){

global $toc_count;
global $toc;
$toc = array();
$toc_count = 0;

$regex = '#<h([2-4])(.*?)>(.*?)</h\1>#';

$content = preg_replace_callback( $regex, function($content) {
global $toc_count;
global $toc;
$toc_count ++;

$toc[] = array('text' => trim(strip_tags($content[3])), 'depth' => $content[1], 'count' => $toc_count);

return "<h{$content[1]} {$content[2]}><a name=\"toc-{$toc_count}\"></a>{$content[3]}</h{$content[1]}>";
}, $content);

if( $toc_count ){
$content = theme_get_toc().$content;
}
}

return $content;
});


// 根据 $TOC 数组输出文章目录 HTML 代码
function theme_get_toc(){
global $toc;

$index = wp_cache_get(get_the_ID(),'theme-toc');

if($index === false && $toc){

$index = '<ol class="catalog">'."\n";
$prev_depth='';
$to_depth = 0;

foreach($toc as $toc_item){
$toc_depth = $toc_item['depth'];
if($prev_depth){
if($toc_depth == $prev_depth){
$index .= '</li>'."\n";
}elseif($toc_depth > $prev_depth){
$to_depth++;
$index .= '<ol>'."\n";
}else{
$to_depth2 = ( $to_depth > ($prev_depth - $toc_depth) )? ($prev_depth - $toc_depth) : $to_depth;

if($to_depth2){

for ($i=0; $i<$to_depth2; $i++){
$index .= '</li>'."\n".'</ol>'."\n";
$to_depth--;
}
}

$index .= '</li>';
}
}
$index .= '<li><a href="#toc-'.$toc_item['count'].'">'.$toc_item['text'].'</a>';
$prev_depth = $toc_item['depth'];
}

for($i=0; $i<=$to_depth; $i++){
$index .= '</li>'."\n".'</ol>'."\n";
}

wp_cache_set(get_the_ID(), $index, 'theme-toc', 3600);
}

$index = '<div id="log-box">'."\n".'<div id="catalog">'."\n\n".$index.'<span class="log-zd"><span class="log-close"><a title="隐藏目录"><strong>文章目录X</strong></a></span></span></div></div>'."\n";

return $index;
}
// 目录 - 水煮鱼 wpjam-toc end

目录按钮 html 代码,根据需要修改(我是放在 footer.php)

<ul id="scroll">
<li class="log log-no"><a class="log-button" title="文章目录">目录</a><div class="log-prompt"><div class="log-arrow">文章目录</div></div></li>
</ul>

js 代码

// 目录
$(".log-button, .log-close").click(function() {
$("#log-box").fadeToggle(300);
});
if ($("#log-box").length > 0) {
$(".log").removeClass("log-no");
}
$('.log-prompt').show().delay(5000).fadeOut();

css 代码

/** 目录 **/
.log-close a {
color: #444;
display: block;
cursor: pointer;
text-decoration: none;
}

#log-box strong {
font-size: 14px;
color: #fff;
}

.log-zd {
position: absolute;
padding: 8px 6px;
width: 26px;
background: #069;
border-radius: 4px 0 0 4px;
top: -1px;
left: -27px;
text-indent: 0;
text-align: center;
}

#log-box {
position: fixed;
background: #fff;
bottom: 68px;
right: 56px;
max-width: 360px;
min-width: 240px;
padding: 0 0 0 8px;
border-width: 1px;
border-style: solid;
border-color: #ccc;
border-radius: 0 4px 4px 4px;
background: rgba(255, 255, 255, 0.95);
z-index: 9999;
display: none;
animation: fade-in;
animation-duration: 0.5s;
-webkit-animation: fade-in 0.5s;
}

#catalog {
min-height: 140px;
max-height: 320px;
overflow: scroll;
overflow-x: hidden;
}

#catalog ol {
text-indent: 1.4rem;
margin: 5px 10px 0 0;
padding: 0 0 6px 0;
counter-reset: lia;
}
#catalog li {
list-style: none;
margin: 0;
width: 99%;
white-space: nowrap;
word-wrap: normal;
text-overflow: ellipsis;
overflow: hidden;
}

#catalog li:hover {
background: #f1f1f1;
}
#catalog ol li:before {
margin-left: -1.4rem;
padding-right: 6px;
counter-increment: lia;
content: counter(lia) ".";
}
#catalog ol ol {
counter-reset: lib;
padding: 0 0 0 12px;
margin: 0;
}
#catalog ol ol li:before {
padding-right: 6px;
counter-increment: lib;
content: counter(lia) "." counter(lib);
}

#catalog ol ol ol {
counter-reset: lic;
}
#catalog ol ol ol li:before {
padding-right: 6px;
counter-increment: lic;
content: counter(lia) "." counter(lib)"."counter(lic);
}

#catalog, #catalog a {
font-size: 14px;
color: #666;
}

.log-no {
display: none;
}

.log {
position: relative;
}

.log-prompt {
position: absolute;
bottom: 2px;
right: 45px;
color: #fff;
line-height: 27px;
animation: blink 1.5s linear infinite;
}

.log-arrow {
position: relative;
width: 80px;
padding: 0 10px;
background: #f40;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.log-arrow:after {
content: '';
position: absolute;
width: 0;
height: 0;
top: 50%;
left: 100%;
margin-top: -5px;
border: 5px solid;
border-left-color: #f40;
border-right-color: #f1f1f1;
border-top-color: #f1f1f1;
border-bottom-color: #f1f1f1;
}
.log a {
font-size: 12px!important;
line-height: 32px;
border: 2px solid #ea4335!important;
color: #ea4335!important;
}
.log a:hover {
color: #fff!important;
}
#scroll {
width: 34px;
float: right;
position: fixed;
right: 10px;
bottom: 68px;
z-index: 9999;
}
#scroll li a {
background: #fff;
font-size: 16px;
color: #666;
font-weight: bold;
width: 32px;
height: 32px;
text-align: center;
margin-top: 6px;
display: block;
cursor: pointer;
border: 1px solid #666;
border-radius: 32px;
}
#scroll li a:hover {
background: #ea4335;
color: #fff;
border: 1px solid #ea4335;
text-decoration: none;
}

温馨提示:代码很烂!

效果图:(实例

 884-catlog-demo

Day 2 宅 带娃

关键词:宅、带娃

早上把昨天傍晚挖的坑(重新给 WordPress 博客文章增加目录导航,多级)填完。

原本计划下午去看风车,家人不想去,没车,作罢。旁晚,去山里走了走,呼吸一下新鲜空气挺好的。小屁孩不愿意走,提前回家。

大老板最近经常打人,头疼。

Day 3 宅 带娃 看风车

关键词:宅、带娃、风车

意料之中,早上依然是宅。下午三点半出发去看前一天没看成的风车。——这是个坑。

原本以为五点左右就能到达目的地;原本以为上山的路都差不多硬底化了,只有一段颠簸路(一同学 10.1 去看过,问她路好不好开车时这样回答我的)……

然而到达目的地的时候已经整整六点整,颠簸路开得怀疑人生,一度想掉头下山。小老板可能有点感冒,一路上哭闹。

真正后怕的是走完颠簸路,开上水泥路。水泥路勉强能避让对面车辆,拐弯的地方就悲剧了。我开的是手动,刚上水泥路没多久,一个拐弯陡坡处要避让对面车辆,陡坡起步三次,才通过,有一次死火,手刹脚刹都刹不住,差点溜到追头(追后面车辆车头)。点着火才把车刹住,一把冷汗,MLGB。

后面又是陡坡起步,几经周折,有惊无险到达目的地,下车看了几分钟风车,顺带把日落看完,上车,下山回家。

回到家已是八点多,万幸,有惊无险,坑途安全结束。

以后应该再也不会去了,风景虽好,但是路途遥远,山路危险。

 884-fengche

Day 4 感冒是传染病

两个老板同时沦陷,感冒,流鼻涕,一夜没睡好。前两天伯母来过,感冒,还特意避开小孩,最终还是……

下午去外家,吃完晚饭才回来。带小孩比上班还累,特别是带小孩在外。

Day 5 宅 带娃

关键词:宅、带娃

想去另外一个镇沙滩玩,可是各忙各,凑不到一起,加上小孩不大舒服,最终没去成。

中午一个多年未见老同学来家里吃个便饭,匆匆又走了,成家了,有小孩了,相聚不易。

Day 6 失望的一天

一亲戚结婚,原本很期待,计划早上先回老家,中午去亲戚那吃个午饭,再回乡下睡个午觉,然后晚上喝喜酒正餐。

然而领导加班,两老出游未回,一人带俩娃……午饭没吃好,午睡免提,傍晚去凑了凑热闹,吃完饭就回来了。

计划赶不上变化……

Day 7 回乡下

关键词:乡下

假期最后一天,最大的成就是:七天假期完好无损。

早上领导回去加了个小班,顺便回乡下转转。

两点多午睡,微凉。外面很安静,偶尔传来小孩打闹声,没有城镇那么喧闹嘈杂,很久没体会过这种安静了。

假期已结束,努力搬砖吧。

声明:除非注明,常阳时光文章均为原创
本文地址:https://cyhour.com/884/
转载时必须以链接形式注明原始出处。
Views: 179 Tags:  ,  , 

Comments:16

  1. 略惨。

    2018.10.08 19:24 # 回复
    1楼
  2. 我们这儿坡起是必考项,也是实习期间重点考察项目。
    代码真的有点坑。如果是我会写个字函数,传一段文本和想查找的层级,做成递归。

    2018.10.09 12:12 # 回复
    2楼
    • @大致 我们这半坡起步也是必考,但是陡坡起步没有……实习期间还有考察?
      目录代码好像水煮鱼那个跟你说的有点像,有空折腾一下。现在这个是人家弃用的版本。

      2018.10.09 17:48 # 回复
  3. 欣慰的是有7天完整假期~~

    2018.10.09 22:21 # 回复
    3楼
  4. 同样哪里也没去

    2018.10.11 00:23 # 回复
    4楼
  5. 多多挖坑,哈哈~

    2018.10.12 09:13 # 回复
    5楼
  6. 哈哈,假期国家经济又增长了。

    2018.10.13 02:23 # 回复
    6楼
  7. 我的7天除了上班还是上班。

    2018.10.13 02:27 # 回复
    7楼

发表留言

炒蛋:Vultr 送$25 | 搬瓦工年付$19补货,优惠码 BWH26FXH3HIQ | 推荐VPS信息