守望轩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/indexindex.wxml(如果不改这步有可能导致你的文章页样式和个人中心样式贴紧两边)

修改第21行和第22行代码

源代码

<view class="container">

替换后

<view class="container1">

※然后打开路径pages/hot/hothot.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


郑重提醒:下载前请必读《免责声明》

本站声明:本站所有资源均来源于互联网,不保证100%完整、不提供任何技术支持,分享目的仅限于学习和测试,一切商业行为与本站无关,下载后请在24小时内删除。请勿用于商业用途,如需商业使用请向官方购买授权,由于使用该资源引起的侵权行为与本站无关!如有侵权,请联系admin@madapang.xin及时删除!

Madapang

一个喜欢撸猫,听歌,玩小霸王,睡觉的人。

10 条评论

  1. 你好,怎样去掉摘要呢?就是标题下面那些小字

    • 注释common-list.wxml代码,第17行到19行

      • 都搞定了,十分感谢

        • AQL

          用默认编辑器也还是多个

  2. 首页文章不显示文章内容,只显示标题怎么改

    • 看下面的回复

  3. AQL

    摘要前面怎么多出一个,在wordpress是没有的。

    • 文章编辑问题

  4. AQL

    多一个P标签。

  5. fengzhikuang

    多一个P标签。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

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

显示

推荐使用快捷登录:

忘记密码?

显示

显示

获取验证码

Close