Skip to content
This repository has been archived by the owner on Nov 23, 2021. It is now read-only.

Commit

Permalink
Vue.js 重构V1
Browse files Browse the repository at this point in the history
  • Loading branch information
@ttttonyhe
ttttonyhe committed Feb 10, 2019
1 parent cf6290a commit 7d09653
Show file tree
Hide file tree
Showing 9 changed files with 934 additions and 296 deletions.
249 changes: 183 additions & 66 deletions archive.php
View file
Original file line number Diff line number Diff line change
@@ -1,72 +1,189 @@
<?php get_header(); ?>
<?php
$full_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
$category = get_the_category();
if($category[0]) $id = $category[0]->term_id; $name = $category[0]->cat_name; $des = $category[0]->description;
?>
<nav class="header-nav reveal">
<a style="text-decoration:none;" class="header-logo"><?php if($category[0]){echo $category[0]->cat_name;} ?></a>
<div style="color: #666;"><?php echo category_description();?></div>
<div class="btn-group" style="float: right;margin-top: -80px;">
<button type="button" class="btn btn-danger"><a href="https://www.ouorz.com/" style="text-decoration:none;color:white"><i class="czs-user-l" style="margin-right:5px" ></i>回到首页</a></button>

<div id="header_info">
<nav class="header-nav reveal">

<a class="top1 header-logo" style="text-decoration:none;" href="https://www.ouorz.com">XXXXX</a>
<p class="top2 lead" style="margin-top: 0px;display:block">XXXXXXXXXXXXXXXXXXXXXXXXXXX</p>

<div class="btn-group" style="float: right;margin-top: -80px;">
<button type="button" class="btn btn-primary"><a href="https://www.ouorz.com/" style="text-decoration:none;color:white"><i class="czs-hand-slide" style="margin-right:5px" ></i>回到首页</a></button>
</div>
</nav>
<div class="index-cates">
<li class="cat-item cat-item-4 cat-real" style="display:none" v-for="de in des" v-if="de.count !== 0"> <a :href="de.link" :title="de.description">{{ de.name }}</a>
</li>
<li class="cat-item cat-item-4" style="display: inline-block;width: 98%;height: 35px;box-shadow: none;border-radius: 0px;background: rgb(236, 237, 239);" v-if="loading_des"></li>
</div>
</div>
</nav>
<div>
<?php $args = array(
'orderby' => 'count',
'style' => 'list'
);
wp_list_categories( $args );
?>
</div>
<ul class="article-list">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php if(in_category(3)){ ?>
<li class="article-list-item reveal post-type-book-card" uk-scrollspy="cls:uk-animation-slide-left-small" style="padding: 60px 10px !important;">
<em class="article-list-type2">读书与笔记</em>
<a href="<?php the_permalink(); ?>" style="text-decoration: none;">
<h5 style="color: #333;text-shadow: 0 2px 3px rgba(0,0,0,0.1);font-size: 1.6rem !important;overflow: hidden;text-overflow: ellipsis;width: 45%;"><?php the_title(); ?><span class="icon icon-ios-arrow-thin-right"></span></h5>
</a>
<p>
</p><p style="color: #615b5b;"><?php echo wp_trim_words(get_the_excerpt(), 30); ?></p>
<p></p>
<div class="article-list-footer" style="">
<span class="article-list-date" style="color: #ada8a8;"><?php the_time('y-m-d') ?></span>
<span class="article-list-divider" style="color: #ada8a8;">-</span>
<span class="article-list-minutes" style="color: #ada8a8;"><?php echo getPostViews(get_the_ID()); ?></span>
</div>
</li>
<?php }elseif(in_category(2) || in_category(5)){ ?>
<li class="article-list-item reveal post-type-book-card" uk-scrollspy="cls:uk-animation-slide-left-small">
<div class="article-list-avatar" style="background-image: url(<?php echo get_the_post_thumbnail_url($post->ID, 'full'); ?>);"></div>
<a href="<?php echo get_post_meta($post->ID,'link',true); ?>" style="text-decoration: none;">
<h5 style="color: #333;text-shadow: 0 2px 3px rgba(0,0,0,0.1);font-size: 2rem !important;overflow: hidden;text-overflow: ellipsis;width: 45%;margin-bottom: 0px;margin-top: 5px;"><?php the_title(); ?><span class="icon icon-ios-arrow-thin-right"></span></h5>
</a>
<p style="color: #615b5b;margin-top: 5px;font-size: 1rem;"><?php echo wp_trim_words(get_the_excerpt(), 30); ?></p>
<div class="article-list-footer" style="">
<span class="article-list-date" style="color: #ada8a8;">添加于 <?php the_time('y-m-d') ?></span>
</div>
</li>
<?php }else{ ?>
<li class="article-list-item reveal" uk-scrollspy="cls:uk-animation-slide-left-small" style="padding: 60px 10px !important;">
<?php if(in_category(7)){ echo '<em class="article-list-type1">研究与学习</em>';} ?>
<a href="<?php the_permalink(); ?>" style="text-decoration: none;">
<h5><?php the_title(); ?><span class="icon icon-ios-arrow-thin-right"></span></h5>
</a>
<p>
<p><?php echo wp_trim_words(get_the_excerpt(), 90); ?></p>
</p>
<div class="article-list-footer">
<span class="article-list-date"><?php the_time('y-m-d') ?></span>
<span class="article-list-divider">-</span>
<span class="article-list-minutes"><?php echo getPostViews(get_the_ID()); ?></span>
</li>
<?php } ?>


<?php endwhile; ?>
<?php else : ?>
<h3 class="title"><a href="#" rel="bookmark">未找到</a></h3>
<p>没有找到任何文章！</p>
<?php endif; ?>
</ul>














<ul class="article-list" style="opacity:0">

<!-- 占位DIV -->
<!-- <li v-if="loading" uk-scrollspy="cls:uk-animation-slide-left-small" class="article-list-item reveal index-post-list uk-scrollspy-inview" style="padding: 50px 30px !important;"><div style="float: left;margin-right: 40px;margin-top: -10px;background: #eee;height: 100px;width: 100px;border-radius: 8px;"></div> <a href="https://www.zeo.im" style="text-decoration: none;"><h5 style="margin-top: 10px;background: #eee;height: 30px;width: 72%;float: right;"></h5></a> <p style="height: 20px;background: #eee;width: 72%;margin: 0px;float: right;"></p> <div class="article-list-footer"> <span class="article-list-minutes">&nbsp;</span><span class="article-list-minutes">&nbsp;</span><span class="article-list-minutes">&nbsp;</span><span class="article-list-minutes">&nbsp;</span><span class="article-list-minutes">&nbsp;</span></div></li> -->
<li v-if="loading" uk-scrollspy="cls:uk-animation-slide-left-small" class="article-list-item reveal index-post-list uk-scrollspy-inview"><em class="article-list-type1" style="padding: 5.5px 45px;">&nbsp;</em> <a style="text-decoration: none;"><h5 style="background: rgb(236, 237, 238);">&nbsp;</h5></a><p style="background: rgb(246, 247, 248);width: 90%;">&nbsp;</p><p style="background: rgb(246, 247, 248);width: 60%;">&nbsp;</p>
</li>
<!-- 占位DIV -->

<li class="article-list-item reveal index-post-list" uk-scrollspy="cls:uk-animation-slide-left-small" v-for="post in posts">

<em v-if="post.post_categories[0].term_id === 7" class="article-list-type1">{{ post.post_categories[0].name }}</em>
<div v-if="post.post_categories[0].term_id === 2 || post.post_categories[0].term_id === 5" style="float: left;margin-right: 40px;"><img :src="post.post_metas.img[0]" style="width: 110px;height: 110px;border-radius: 8px;margin: 8px 0;"></div>

<a v-if="post.post_categories[0].term_id === 2 || post.post_categories[0].term_id === 5" :href="post.post_metas.link" style="text-decoration: none;"><h5 style="margin-top: 10px;" v-html="post.title.rendered"></h5></a>
<a v-else :href="post.link" style="text-decoration: none;"><h5 v-html="post.title.rendered"></h5></a>


<p v-html="post.post_excerpt"></p>
<div class="article-list-footer">
<span class="article-list-date" style="color: #ada8a8;">{{ post.post_date }}</span>
<span class="article-list-divider">-</span>
<span class="article-list-minutes">{{ post.post_metas.views }}&nbsp;Views</span>
</div>
</li>


<!-- 加载占位DIV -->
<!-- <li uk-scrollspy="cls:uk-animation-slide-left-small" class="article-list-item reveal index-post-list uk-scrollspy-inview bottom" style="padding: 50px 30px !important;"><div style="float: left;margin-right: 40px;margin-top: -10px;background: #eee;height: 100px;width: 100px;border-radius: 8px;"></div> <a href="https://www.zeo.im" style="text-decoration: none;"><h5 style="margin-top: 10px;background: #eee;height: 30px;width: 72%;float: right;"></h5></a> <p style="height: 20px;background: #eee;width: 72%;margin: 0px;float: right;"></p> <div class="article-list-footer"> <span class="article-list-minutes">&nbsp;</span><span class="article-list-minutes">&nbsp;</span><span class="article-list-minutes">&nbsp;</span><span class="article-list-minutes">&nbsp;</span><span class="article-list-minutes">&nbsp;</span></div></li> -->
<li uk-scrollspy="cls:uk-animation-slide-left-small" class="article-list-item reveal index-post-list uk-scrollspy-inview bottom"><em class="article-list-type1" style="padding: 5.5px 45px;">&nbsp;</em> <a style="text-decoration: none;"><h5 style="background: rgb(236, 237, 238);">&nbsp;</h5></a><p style="background: rgb(246, 247, 248);width: 90%;">&nbsp;</p><p style="background: rgb(246, 247, 248);width: 60%;">&nbsp;</p>
</li>
<!-- 加载占位DIV -->

<!-- 加载按钮 -->
<button @click="new_page" id="scoll_new_list" style="opacity:0"></button>
<!-- 加载按钮 -->
</ul>












<script>
window.onload = function(){ //避免爆代码

var click = 0; //初始化加载次数
var paged = 1; //获取当前页数
var incate = <?php echo $id; ?>;

/* 展现内容(避免爆代码) */
$('.article-list').css('opacity','1');
$('.top1').html('<?php echo $name; ?>');
$('.top2').html('<?php echo $des; ?>');
$('.cat-real').attr('style','display:inline-block');
/* 展现内容(避免爆代码) */

new Vue({ //axios获取顶部信息
el : '#grid-cell',
data() {
return {
posts: null,
cates: null,
des: null,
loading: true, //v-if判断显示占位符
loading_des: true,
errored: true
}
},
mounted () {
//获取分类
axios.get('https://www.ouorz.com/wp-json/wp/v2/categories?exclude=1')
.then(response => {
this.des = response.data;
}).finally(() => {
this.loading_des = false;
});

//获取文章列表
axios.get('https://www.ouorz.com/wp-json/wp/v2/posts?per_page=10&page='+paged+'&categories='+incate)
.then(response => {
this.posts = response.data
})
.catch(e => {
this.errored = false
})
.finally(() => {
this.loading = false;
paged++; //加载完1页后累加页数
//加载完文章列表后监听滑动事件
$(window).scroll(function(){
　　 var scrollTop = $(window).scrollTop();
　　 var scrollHeight = $('.bottom').offset().top - 500;
　　 if(scrollTop >= scrollHeight){
　　 if(click == 0){ //接近底部加载一次新文章
　　　　 $('#scoll_new_list').click();
　　　　 click++; //加载次数计次
　　 }
　　 }
});

})
},
methods: { //定义方法
new_page : function(){ //加载下一页文章列表
axios.get('https://www.ouorz.com/wp-json/wp/v2/posts?per_page=10&page='+paged+'&categories='+incate)
.then(response => {
if(response.data.length !== 0){ //判断是否最后一页
this.posts.push.apply(this.posts,response.data); //拼接在上一页之后
click = 0;
paged++;
}else{
$('.bottom h5').html('暂无更多文章了 O__O "…').css({'background':'#fff','color':'#999'});
}
})
}
},
});


}
</script>

























<?php get_footer(); ?>
4 changes: 2 additions & 2 deletions footer.php
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<footer class="footer reveal">
<p>Copyright © 2018 TonyHe · Redesigned By TonyHe · <?php echo stripslashes(get_option('king_zztj'));?></p>
<footer class="footer reveal" style="<?php if(wp_is_mobile()) echo 'display:none;' ?>">
<p>Copyright © 2018 TonyHe · Theme King | Redesigned By TonyHe · <?php echo stripslashes(get_option('king_zztj'));?></p>
</footer>
<script src="https://static.ouorz.com/jquery-3.3.1.min.js"></script>
<script src="https://static.ouorz.com/bootstrap.min.js"></script>
Expand Down
76 changes: 76 additions & 0 deletions functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,4 +170,80 @@ function change_graphic_lib($array) {

include (TEMPLATEPATH . '/code/code.php' );





add_action( 'rest_api_init', 'wp_rest_insert_tag_links' );

function wp_rest_insert_tag_links(){

register_rest_field( 'post',
'post_categories',
array(
'get_callback' => 'wp_rest_get_categories_links',
'update_callback' => null,
'schema' => null,
)
);
register_rest_field( 'post',
'post_excerpt',
array(
'get_callback' => 'wp_rest_get_plain_excerpt',
'update_callback' => null,
'schema' => null,
)
);
register_rest_field( 'post',
'post_date',
array(
'get_callback' => 'wp_rest_get_normal_date',
'update_callback' => null,
'schema' => null,
)
);
register_rest_field( 'post',
'post_metas',
array(
'get_callback' => 'get_post_meta_for_api',
'update_callback' => null,
'schema' => null,
)
);
}

function wp_rest_get_categories_links($post){
$post_categories = array();
$categories = wp_get_post_terms( $post['id'], 'category', array('fields'=>'all') );

foreach ($categories as $term) {
$term_link = get_term_link($term);
if ( is_wp_error( $term_link ) ) {
continue;
}
$post_categories[] = array('term_id'=>$term->term_id, 'name'=>$term->name, 'link'=>$term_link);
}
return $post_categories;

}
function wp_rest_get_plain_excerpt($post){
$excerpts = wp_trim_words(get_the_excerpt($post['id']), 90);
return $excerpts;
}

function wp_rest_get_normal_date($post){
$date = get_the_date( 'y-m-d',$post['id']);
return $date;
}

function get_post_meta_for_api($post){
$post_meta = array();
$post_meta['views'] = get_post_meta($post['id'],'post_views_count',true);
$post_meta['link'] = get_post_meta($post['id'],'link',true);
$post_meta['img'] = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
$post_meta['title'] = get_the_title($post['id']);
return $post_meta;
}


?>
Loading

0 comments on commit 7d09653

Please sign in to comment.