typecho更新（我为什么选用typecho而不是wordpress作为博客）

本文目录

• 我为什么选用typecho而不是wordpress作为博客
• 移动端怎样做出上拉下滑刷新加载
• 关于typecho怎么怎么在文章调用更新时间

我为什么选用typecho而不是wordpress作为博客

经过几天的选型，我最终是在wordpress和typecho中选型，选择了typecho，有以下收获与感悟。

关于博客选型（wordpress VS typecho）

感觉typecho是一个简化版的wordpress。wordpress经过多年的发展，目前代码还是非常臃肿，提供加载了很多本来并不需要的东西。后来再加上一些服务被墙，导致其需要做很多额外的优化和配置。

Wordpress的插件和生态相比typecho而言更加丰富更新也更快，这是typecho的劣势。但对于初级用户而言，其实很多特性化的插件本身并不需要。

Typecho可以傻瓜式地在apache下安装，但是linux + nginx下需要自己修改一些代码和配置，否则文章详情页面会404.即对于服务器环境typecho还是缺乏适配，这个对新手而言不够友好。

其他感悟

对于vps的选型，淘宝上有一些便宜的香港主机，比较推荐。对于搭建博客用的服务器，建议使用windows + 建站助手。因为这样简单，不必修改很多配置折腾。当然也可以选择linode或oceanDigital，选择低配和倒数第二配置的对于博客搭建而言，其实都够用。

国内域名备案是个坑，但是也是迈不过的坎。为了长远打算还是需要及时备案。

现在的域名中.com比较通用，top域名则比较便宜（现在搞活动，4元一个年，续费16元每年），godaddy + dnspod解析的好处是免备案。

Linux看起来适合于爬虫，扫描器，java建站等。

不懂的发邮箱

移动端怎样做出上拉下滑刷新加载

这次给大家带来移动端怎样做出上拉下滑刷新加载，移动端做出上拉下滑刷新加载的注意事项有哪些，下面就是实战案例，一起来看一下。
直接上代码，不懂的多看几遍，下面我换会告诉大家如何使用。
《template lang="html"》
《p class="yo-scroll"
:class="{’down’:(state===0),’up’:(state==1),refresh:(state===2),touch:touching}"
@touchstart="touchStart($event)"
@touchmove="touchMove($event)"
@touchend="touchEnd($event)"
@scroll="(onInfinite || infiniteLoading) ? onScroll($event) : undefined"》
《section class="inner" :style="{ transform: ’translate3d(0, ’ + top + ’px, 0)’ }"》
《header class="pull-refresh"》
《slot name="pull-refresh"》
《span class="down-tip"》下拉更新《/span》
《span class="up-tip"》松开更新《/span》
《span class="refresh-tip"》更新中《/span》
《/slot》
《/header》
《slot》《/slot》
《footer class="load-more"》
《slot name="load-more"》
《span》加载中??《/span》
《/slot》
《/footer》
《/section》
《/p》
《/template》
《script》
export default {
props: {
offset: {
type: Number,
default: 40
},
enableInfinite: {
type: Boolean,
default: true
},
enableRefresh: {
type: Boolean,
default: true
},
onRefresh: {
type: Function,
default: undefined,
required: false
},
onInfinite: {
type: Function,
default: undefined,
require: false
}
},
data() {
return {
top: 0,
state: 0,
startY: 0,
touching: false,
infiniteLoading: false
}
},
methods: {
touchStart(e) {
this.startY = e.targetTouches.pageY
this.startScroll = this.$el.scrollTop || 0
this.touching = true
},
touchMove(e) {
if (!this.enableRefresh || this.$el.scrollTop 》 0 || !this.touching) {
return
}
let diff = e.targetTouches.pageY - this.startY - this.startScroll
if (diff 》 0) e.preventDefault()
this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0)
if (this.state === 2) { // in refreshing
return
}
if (this.top 》= this.offset) {
this.state = 1
} else {
this.state = 0
}
},
touchEnd(e) {
if (!this.enableRefresh) return
this.touching = false
if (this.state === 2) { // in refreshing
this.state = 2
this.top = this.offset
return
}
if (this.top 》= this.offset) { // do refresh
this.refresh()
} else { // cancel refresh
this.state = 0
this.top = 0
}
},
refresh() {
this.state = 2
this.top = this.offset
this.onRefresh(this.refreshDone)
},
refreshDone() {
this.state = 0
this.top = 0
},
infinite() {
this.infiniteLoading = true
this.onInfinite(this.infiniteDone)
},
infiniteDone() {
this.infiniteLoading = false
},
onScroll(e) {
if (!this.enableInfinite || this.infiniteLoading) {
return
}
let outerHeight = this.$el.clientHeight
let innerHeight = this.$el.querySelector(’.inner’).clientHeight
let scrollTop = this.$el.scrollTop
let ptrHeight = this.onRefresh ? this.$el.querySelector(’.pull-refresh’).clientHeight : 0
let infiniteHeight = this.$el.querySelector(’.load-more’).clientHeight
let bottom = innerHeight - outerHeight - scrollTop - ptrHeight
if (bottom 《 infiniteHeight) this.infinite()
}
}
}
《/script》
《style》
.yo-scroll {
position: absolute;
top: 2.5rem;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
background-color: #ddd
}
.yo-scroll .inner {
position: absolute;
top: -2rem;
width: 100%;
transition-duration: 300ms;
}
.yo-scroll .pull-refresh {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.yo-scroll.touch .inner {
transition-duration: 0ms;
}
.yo-scroll.down .down-tip {
display: block;
}
.yo-scroll.up .up-tip {
display: block;
}
.yo-scroll.refresh .refresh-tip {
display: block;
}
.yo-scroll .down-tip,
.yo-scroll .refresh-tip,
.yo-scroll .up-tip {
display: none;
}
.yo-scroll .load-more {
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
《/style》把上面组件拷贝一下，存成后缀是.vue的组件放到你的component下， 然后引入到页面 , 下面是我引用的demo
上代码： 里面有注释哦，有问题给我留言！
《template》
《p》
《v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite"》
《ul》
《li v-for="(item,index) in listdata" 》{{item.name}}《/li》
《li v-for="(item,index) in downdata" 》{{item.name}}《/li》
《/ul》
《/v-scroll》
《/p》
《/template》
《script》
import Scroll from ’./y-scroll/scroll’;
export default{
data () {
return {
counter : 1, //默认已经显示出15条数据 count等于一是让从16条开始加载
num : 15, // 一次显示多少条
pageStart : 0, // 开始页数
pageEnd : 0, // 结束页数
listdata: , // 下拉更新数据存放数组
downdata: // 上拉更多的数据存放数组
}
},
mounted : function(){
this.getList();
},
methods: {
getList(){
let vm = this;
***隐藏网址***
vm.listdata = response.data.slice(0,15);
}, (response) =》 {
console.log(’error’);
});
},
onRefresh(done) {
this.getList();

done() // call done

},
onInfinite(done) {
let vm = this;
***隐藏网址***
vm.counter++;
vm.pageEnd = vm.num * vm.counter;
vm.pageStart = vm.pageEnd - vm.num;
let arr = response.data;
let i = vm.pageStart;
let end = vm.pageEnd;
for(; i《end; i++){
let obj ={};
obj.name;
vm.downdata.push(obj);
if((i + 1) 》= response.data.length){
this.$el.querySelector(’.load-more’).style.display = ’none’;
return;
}
}
done() // call done
}, (response) =》 {
console.log(’error’);
});
}
},
components : {
’v-scroll’: Scroll
}
}
《/script》相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
使用beforeEnter钩子函数（附代码）
怎样使用js操作图片转为base64

关于typecho怎么怎么在文章调用更新时间

在文章模板处修改，在你需要显示更新时间的地方插入代码
《?php _e(’发布时间：’); ?》《?php $this-》date(’F j, Y’); ?》
其中date(’F j, Y’)就是显示时间的格式，输出类似于March 10, 2001 ，其他的显示方法可以参考“Php时间格式”