守望轩Wordpress小程序修改记录——首页代码修改-2

守望轩Wordpress小程序首页代码修改2
图文样式更改为大图模式
我们需要找到小程序页面路径 templates/common-list.wxml
替换以下代码
源代码
<template name="tempCommonList">
<view class="common-list">
<block wx:key="id" wx:for="{{postsList}}">
<view class="list-item has-img" index="{{index}}" id="{{item.id}}" bindtap="redictDetail">
<view class="content-title">
<text>{{item.title.rendered}}</text>
</view>
<view class="content-date">
<image src="../../images/calendar.png"></image>
<text>{{item.date}}</text>
<image src="../../images/comments.png"></image>
<text class="">{{item.total_comments}}</text>
<image src="../../images/pageviews.png"></image>
<text class="">{{item.pageviews}}</text>
<image src="../../images/home-like.png"></image>
<text class="">{{item.like_count}}</text>
</view>
<image src="{{item.post_medium_image}}" mode="aspectFill" class="cover"></image>
</view>
</block>
</view>
</template>
替换后
<template name="tempCommonList">
<view class="common-list">
<block wx:key="id" wx:for="{{postsList}}">
<view bindtap="" style="position:relative">
<form bindsubmit="pushFormSubmit" report-submit='true'>
<button style='-webkit-transform: scale(0.5);transform:scale(1);content:"";height:100%; width: 100%;border:1px solid transparent;background-color:transparent; position: absolute; top: 0; left: 0' plain="true" formType="submit"></button>
<view class="list-item has-img w-100" index="{{index}}" id="{{item.id}}" bindtap="redictDetail">
<view style='margin-bottom:24rpx;'>
<image src="{{item.post_thumbnail_image}}" mode="aspectFill" class='cover-100'></image>
</view>
<view class="content-title content-title-100">
<text>{{item.title.rendered}}</text>
</view>
<view class="content-title content-title-100" style='margin-top:0;margin-bottom:0'>
<text style='font-size:26rpx;color:#959595;margin:32rpx auto;'>{{item.excerpt.rendered}}</text>
</view>
<view class="content-date" style='margin-right:0;'>
<view style='float:left;'>
<block wx:if="{{item.category_name !=null}}">
<text style='color:#333333'>{{item.category_name}}</text>
</block>
</view>
<view style='float:right;'>
<image src="../../images/calendar.png"></image>
<text>{{item.date}}</text>
<image src="../../images/pageviews.png"></image>
<text class="">{{item.pageviews}}</text>
<image src="../../images/comments.png"></image>
<text class="">{{item.total_comments}}</text>
<image src="../../images/home-like.png"></image>
<text style='margin-right:10rpx'>{{item.like_count}}</text>
</view>
</view>
</view>
</form>
</view>
</block>
</view>
</template>
接下来打开根目录路径找到app.wxss
修改替换以下代码
第13行的.container
源代码
.container {
padding: 0 24rpx;
background-color: #fff;
font-family: Microsoft YaHei, Helvetica, Arial, sans-serif;
}
替换后
.container {
padding: 0 24rpx;
background-color: #fff;
font-family: Microsoft YaHei, Helvetica, Arial, sans-serif;
}
.container2 {
padding: 0;
background-color: #fff;
font-family: Microsoft YaHei, Helvetica, Arial, sans-serif;
}
第73行到第130行代码替换
源代码
.common-list {
margin-bottom: 24rpx;
}
.common-list .list-item {
position: relative;
border-bottom: 1px solid #eee;
padding: 24rpx;
min-height: 150rpx;
overflow: hidden;
}
.common-list .list-item.has-img image.cover {
position: absolute;
left: 0rpx;
top: 24rpx;
width: 200rpx;
height: 150rpx;
border-radius: 8rpx;
}
.common-list .list-item.has-img .content-title {
margin-left: 200rpx;
height: 80rpx;
margin-bottom: 20rpx;
}
.common-list .list-item.has-img .content-title text {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 30rpx;
line-height: 1.4;
font-weight: 400;
color: #3a4040;
}
.common-list .list-item.has-img .content-date {
margin-left: 200rpx;
}
.common-list .list-item.has-img .content-date image {
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
vertical-align: middle;
}
.common-list .list-item .content-date text {
color: #959595;
margin-right: 32rpx;
font-size: 20rpx;
line-height: 1.2;
font-weight: normal;
}
替换后
.common-list {
margin-bottom: 24rpx;
}
.common-list .list-item {
position: relative;
padding: 40rpx 24rpx;
margin: 10rpx 24rpx 60rpx;
min-height: 200rpx;
overflow: hidden;
box-shadow: 2rpx 2rpx 30rpx rgba(0, 0, 0, .2);
border-radius: 8rpx;
}
.common-list .list-item.has-img.w-100 {
height:auto;
}
.common-list .list-item.has-img image.cover {
position: absolute;
right: 24rpx;
top: 0rpx;
width: 200rpx;
height: 200rpx;
border-radius:3px;
}
.common-list .list-item.has-img image.cover-100 {
width:100%;
height:215px;
border-radius: 6rpx;
}
.common-list .list-item.has-img .content-title {
height: 80rpx;
margin-bottom: 70rpx;
}
.common-list .list-item.has-img .content-title-100 {
width:100%;
margin-bottom:20rpx;
}
.common-list .list-item.has-img .content-title text {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-transform: uppercase;
font-size: 34rpx;
line-height: 1.4;
font-weight: 500;
color: #000000;
}
.common-list .list-item.has-img .content-date {
margin-right: 200rpx;
}
.common-list .list-item.has-img .content-date image {
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
vertical-align: middle;
}
.common-list .list-item .content-date text {
color: #959595;
margin-right: 32rpx;
font-size: 26rpx;
line-height: 1.2;
font-weight: normal;
}
※然后打开路径pages/index/index的index.wxml(如果不改这步有可能导致你的文章页样式和个人中心样式贴紧两边)
修改第21行和第22行代码
源代码
<view class="container">
替换后
<view class="container1">
※然后打开路径pages/hot/hot的hot.wxml(排行榜样式)
修改代码
源代码
<view class="list-item has-img" index="{{index}}" id="{{item.post_id}}" bindtap="redictDetail">
<view class="content-title">
<text>{{item.post_title}}</text>
</view>
<view class="content-date">
<image src="../../images/calendar.png"></image>
<text>{{item.post_date}}</text>
<image src="../../images/comments.png"></image>
<text class="">{{item.comment_total}}</text>
<image src="../../images/pageviews.png"></image>
<text class="">{{item.pageviews}}</text>
<image src="../../images/home-like.png"></image>
<text class="">{{item.like_count}}</text>
</view>
<image src="{{item.post_thumbnail_image}}" class="cover"></image>
</view>
替换后
<view class="list-item has-img" index="{{index}}" id="{{item.post_id}}" bindtap="redictDetail" style='margin:0;padding:30rpx;box-shadow:none;border-bottom:2rpx solid #eee;'>
<view class="content-title" style='margin-right:200rpx;'>
<text>{{item.post_title}}</text>
</view>
<view class="content-date">
<image src="../../images/calendar.png"></image>
<text>{{item.post_date}}</text>
<image src="../../images/pageviews.png"></image>
<text class="">{{item.pageviews}}</text>
<image src="../../images/home-like.png"></image>
<text class="">{{item.like_count}}</text>
</view>
<image src="{{item.post_thumbnail_image}}" mode="aspectFill" class="cover" style='top:24rpx;'></image>
</view>
首页图文样式就搞定啦!
下面是效果图
如果在小程序里面看代码费劲,可以直接访问本文连接“原文链接”在浏览器里面打开,进行复制更改
END拜拜ヾ(•ω•`)o
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。