守望轩Wordpress小程序修改记录——文章页代码修改

守望轩Wordpress小程序文章页样式修改为头固定预览图,点赞居中
样式来源叶赫先生的WordPress版微信小程序 2.0 重构版
在文章页头部加入固定预览图片文章页美化
不带分享按钮,想加分享按钮参考上一篇文章传送门
例图
首先找到文章页面目录pages/detail/detail
打开detail.wxml整篇替换,打包下面附件
因为小程序打开文章代码高亮渲染慢,建议网页打开 原文链接
<import src="../../wxParse/wxParse.wxml" />
<import src="../../templates/copyright.wxml" />
<import src="../../templates/loading.wxml" />
<import src="../../templates/modal-view/modal-view.wxml" />
<import src="../../templates/login-popup.wxml" />
<view class="thum-mask">
<image src="{{detail.post_thumbnail_image}}" mode="aspectFill" class="cover cover-100 img-mask" style='position:fixed;z-index:-99;'></image>
</view>
<!-- 标题浮动层 -->
<view class="fd">
<view class="entry-title" style='padding:8rpx 8rpx 0;'>
{{detail.title.rendered}}
</view>
<view class="entry-date" style='margin-bottom:10rpx;'>
<block wx:if="{{detail.category_name !=null}}">
<text class="entry-icon-text">{{detail.category_name}}</text>
</block>
<image src="../../images/calendar.png" style="height:22rpx;width:22rpx;margin-left: 24rpx"></image>
<text class="entry-date-text">{{detailDate}}</text>
<image src="../../images/pageviews.png" style="height:22rpx;width:22rpx;margin-left: 20rpx;"></image>
<text class="entry-icon-text">{{detail.pageviews}}</text>
<image src="../../images/comments.png" style="height:22rpx;width:22rpx;margin-left: 20rpx;"></image>
<text class="entry-icon-text">{{total_comments}}</text>
<image src="../../images/home-like.png" style="height:22rpx;width:22rpx;margin-left: 20rpx;"></image>
<text class="entry-icon-text">{{likeCount}}</text>
</view>
</view>
<view class="container" style='padding: 0 28rpx'>
<view class="container" style='padding:0;'>
<view class="content-article-detail" style="display:{{display}}">
<view class="entry-summary">
<template is="wxParse" data="{{wxParseData:article.nodes}}" />
</view>
</view>
<!-- 上一篇,下一篇 -->
<view wx:if="{{display}}" class="pagination">
<view wx:if="{{detail.previous_post_id}}" class="nav-previous">
<navigator url="../detail/detail?id={{detail.previous_post_id}}" open-type="redirect" hover-class="relatedNavigator">←{{detail.previous_post_title}}</navigator>
</view>
<view wx:if="{{detail.next_post_id}}" class="nav-next">
<navigator url="../detail/detail?id={{detail.next_post_id}}" open-type="redirect" hover-class="relatedNavigator">{{detail.next_post_title}}→</navigator>
</view>
</view>
<view class="relatedPost" style="display:{{display}}">
<view class="relatedTitle">
猜你喜欢
</view>
<view class="entry-gap-like"></view>
<view class="relatedText">
<block wx:key="id" wx:for="{{postList}}">
<navigator url="../detail/detail?id={{item.id}}" open-type="redirect" hover-class="relatedNavigator">{{index+1}}.{{item.title.rendered}}</navigator>
</block>
</view>
</view>
<view class="likePost" style="display:{{displayLike}}">
<view catchtap="clickLike" id="likebottom" class="likebtt">
<text>❤点赞支持</text>
</view>
<view class="likeText">
<image src="../../images/{{likeImag}}" catchtap="clickLike" id="likebottom" class="img-menu" style='width:60rpx;height:60rpx; margin-right:20rpx;'></image>
<block wx:key="id" wx:for="{{likeList}}">
<image src="{{item}}" class="gravatarLikeImg"></image>
</block>
</view>
</view>
<view style="display:{{display}}">
<view class="relatedTitle" id="relatedTitle">
评论交流 {{enableComment?'(点击评论内容可以回复)':''}}
</view>
<view class="entry-gap-like"></view>
<view class="commentheader">
{{commentCount}}
</view>
<block wx:key="id" wx:for="{{commentsList}}">
<view class="comment" style='background-color: #f5f7f7;'>
<view class="comment-user">
<image src="{{item.author_url}}" class="gravatarImg"></image>
<view style='display:flex;flex-direction: row; justify-content: space-between;width: 100%'>
<view style='font-weight:bold;' bindtap="replay" data-id="{{item.id}}" data-name="{{item.author_name}}" data-userid="{{item.userid}}" data-formId="{{item.formId}}" data-commentdate="{{item.date}}">{{item.author_name}}</view>
<view bindtap="replay" data-id="{{item.id}}" data-name="{{item.author_name}}" data-userid="{{item.userid}}" data-formId="{{item.formId}}" data-commentdate="{{item.date}}">{{item.date}}</view>
</view>
</view>
<view class="comment-summary" bindtap="replay" data-id="{{item.id}}" data-name="{{item.author_name}}" data-userid="{{item.userid}}" data-formId="{{item.formId}}" data-commentdate="{{item.date}}"> {{item.content}}</view>
<!-- 一级回复-->
<view wx:for="{{item.child}}" wx:key="itemid1" wx:for-index="idx" wx:for-item="item1">
<view class="replay-user" bindtap="replay" data-id="{{item1.id}}" data-name="{{item1.author_name}}" data-userid="{{item1.userid}}" data-formId="{{item1.formId}}" data-commentdate="{{item1.date}}">
{{item1.author_name}} 回复{{item.author_name}}:{{item1.content}}
</view>
<!-- 二级回复-->
<view wx:for="{{item1.child}}" wx:key="itemid2" wx:for-index="idx" wx:for-item="item2">
<view class="replay-user" bindtap="replay" data-id="{{item2.id}}" data-name="{{item2.author_name}}" data-userid="{{item2.userid}}" data-formId="{{item2.formId}}" data-commentdate="{{item2.date}}">
{{item2.author_name}} 回复 {{item1.author_name}}:{{item2.content}}
</view>
<!-- 三级回复-->
<view wx:for="{{item2.child}}" wx:key="itemid3" wx:for-index="idx" wx:for-item="item3">
<view class="replay-user" bindtap="replay" data-id="{{item3.id}}" data-name="{{item3.author_name}}" data-userid="{{item3.userid}}" data-formId="{{item3.formId}}" data-commentdate="{{item3.date}}">
{{item3.author_name}} 回复 {{item2.author_name}}:{{item3.content}}
</view>
<!-- 四级回复-->
<view wx:for="{{item3.child}}" wx:key="itemid4" wx:for-index="idx" wx:for-item="item4">
<view class="replay-user">
{{item4.author_name}} 回复 {{item3.author_name}}:{{item4.content}}
</view>
</view>
<!-- 四级回复-->
</view>
<!-- 三级回复-->
</view>
<!-- 二级回复-->
</view>
<!-- 一级回复-->
</view>
</block>
<view style="display:{{display}}">
<view style='display:{{isLoading?"block":"none"}}'>
<template is="tempLoading" />
</view>
<view style="display:{{isLastPage?'block':'none'}}">
<view class="no-more" >- 无更多评论 -</view>
</view>
</view>
<modal title="{{dialog.title}}" hidden="{{dialog.hidden}}" no-cancel bindconfirm="confirm">{{dialog.content}}</modal>
</view>
<template is="modalView" data="{{...__modalView__}}" />
<view class="canvas-box">
<canvas style="width: 600px;height: 970px;" canvas-id="mycanvas" />
</view>
<view class="ditail-copyright" style="display:{{display}}">
<template is="tempCopyright" />
</view>
<template is="login-popup" data="{{show: isLoginPopup, userInfo: userInfo}}"></template>
<!--评论区-->
<view style="display:{{enableComment?'block':'none'}}">
<view class="menuBackground" catchtap="hiddenMenubox" style="display:{{menuBackgroup ? 'block' : 'none'}}"></view>
<view style="display:{{display}}">
<view class="comment-fixed">
<form catchsubmit="formSubmit" report-submit="true">
<view class="comment-respond">
<input class="comment-input" maxlength="200" name="inputPostID" value="{{detail.id}}" style="display:none" />
<view class="comment-box">
<image src="../../images/entry-home.png" class="img-plus" style="margin-left:20rpx;margin-right:20rpx;" catchtap="goHome"></image>
<input class="comment-input" type='text' confirm-type="send" cursor-spacing="10" maxlength="100" name="inputComment" value="{{content}}" placeholder="{{placeholder}}" focus="{{focus}}" bindblur="onReplyBlur" bindfocus="onRepleyFocus" />
<button class="comment-button touch-active" formType="submit">发送</button>
<image src="../../images/plus.png" class="img-plus" catchtap="ShowHideMenu" mode=""></image>
</view>
<!--功能图标-->
<view class="menu-box {{isShow ? 'emoji-move-in' : 'emoji-move-out'}} {{isLoad ? 'no-emoji-move' : ''}}">
<view class="iconList">
<view class="iconLine">
<view style="width:20%; position: relative; float:left; text-align:center">
<view>
<image src="../../images/forwarding.png" class="img-menu"></image>
</view>
<view>
<text>转发</text>
</view>
<button class="share-button share-button touch-active" open-type="share">
</button>
</view>
<view style="width:20%; float:left; text-align:center">
<view>
<image src="../../images/poster.png" catchtap="downimageTolocal" class="img-menu"></image>
</view>
<view>
<text>海报</text>
</view>
</view>
<view style="width:20%; float:left; text-align:center">
<view>
<image src="../../images/{{likeImag}}" catchtap="clickLike" id="likebottom" class="img-menu"></image>
</view>
<view>
<text>点赞</text>
</view>
</view>
<view style="width:20%; float:left; text-align:center">
<view>
<image src="../../images/copy.png" class="img-menu" catchtap="gotowebpage"></image>
</view>
<view>
<text>阅读原文</text>
</view>
</view>
<view style="width:20%; float:left; ">
<view>
<image src="../../images/appreciation.png" catchtap="praise" class="img-menu"></image>
</view>
<view>
<text>赞赏</text>
</view>
</view>
</view>
</view>
</view>
</view>
</form>
</view>
</view>
</view>
<!-- 评论区 -->
</view>
</view>
然后打开detail.wxss整篇替换,打包在下面附件
因为小程序打开文章代码高亮渲染慢,建议网页打开 原文链接
@import "../../wxParse/wxParse.wxss";
@import "../../templates/modal-view/modal-view.wxss";
.fd {
position: relative;
padding:24rpx;
background-color:#ffffff;
/*box-shadow:2rpx 4rpx 40rpx #c2c2c2;*/
z-index:999;
margin-top:-30rpx;
/*margin-bottom:24rpx;
margin-left:24rpx;
margin-right:24rpx;*/
border-radius: 30rpx 30rpx 0 0;
}
.thum-mask {
position: relative;
width: 100%;
height: 400rpx;
}
.thum-mask:after {
content: '';
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
background: #191919;
}
.img-mask {
width:100%;
height:400rpx;
}
.content-article-detail {
border-bottom: 1px solid #eee;
margin-top: 40rpx;
margin-bottom: 24px;
padding-bottom: 48rpx;
}
.entry-title {
font-size: 36rpx;
line-height: 1.6;
font-weight: 400;
text-transform: uppercase;
outline: none;
color: #3a4040;
margin-bottom: 28rpx;
}
.entry-gap-like {
width: 120rpx;
height: 2px;
background-color: #4c4c4c;
margin-bottom: 32rpx;
}
.entry-gap-zan {
width: 120rpx;
height: 2px;
background-color: #4c4c4c;
margin-bottom: 32rpx;
}
.entry-summary {
font-size: 30rpx;
line-height: 50rpx;
color:#636363;
letter-spacing: 0.5rpx;
}
.entry-summary image {
width: 100% !important;
}
.entry-date {
font-size: 26rpx;
line-height: 1.6;
color: #959595;
font-weight: normal;
outline: none;
margin-bottom: 30rpx;
}
.entry-date-text {
margin-left: 10rpx;
}
.entry-icon-text {
margin-left: 10rpx;
}
.entry-category-text {
margin-left: 20rpx;
}
/* comment */
.commentheader {
padding: 20rpx 0;
text-align: left;
font-weight: normal;
font-size: 28rpx;
line-height: 40rpx;
color: #959595;
}
.commentheader1 {
padding: 5rpx 0;
text-align: left;
font-weight: normal;
font-size: 24rpx;
line-height: 10rpx;
color: red;
}
.comment {
/* border-bottom: 8px solid #fff; */
/* background-color: #f5f7f7; */
padding: 0 24rpx;
border-radius: 8px;
margin: 8px 0;
}
.comment-children {
border-top: 1px solid #eee;
margin-left: 40rpx;
}
.comment-user {
display: flex;
align-items: center;
/* height: 80rpx; */
font-size: 28rpx;
/* line-height: 80rpx; */
font-weight: normal;
outline: none;
color: #959595;
margin: 10rpx 0;
}
.replay-user {
display: flex;
align-items: center;
/* height: 80rpx; */
font-size: 26rpx;
/* line-height: 80rpx; */
font-weight: normal;
outline: none;
color: #959595;
margin: 10rpx 0;
margin-left: 60rpx;
}
.comment-user image {
margin-right: 16rpx;
}
.comment-date {
font-size: 25rpx;
line-height: 1.2;
font-weight: normal;
outline: none;
margin-bottom: 30rpx;
color: #959595;
}
.comment-response {
color: #4c4c4c;
font-size: 30rpx;
line-height: 1.6rem;
margin-bottom: 50rpx;
}
.comment-summary {
color: #4c4c4c;
font-size: 28rpx;
line-height: 2rem;
margin-bottom: 10rpx;
margin-left: 60rpx;
}
.comment-repaly {
color: #757575;
font-size: 30rpx;
line-height: 1.6rem;
margin-bottom: 10rpx;
}
.comment-post {
color: #757575;
font-size: 30rpx;
line-height: 1.6rem;
margin-bottom: 50rpx;
text-align: center;
display: flex;
flex-direction: row;
}
.comment-respond {
margin-top: 10rpx;
}
.comment-reply-title {
font-size: 40rpx;
line-height: 1.5;
color: #79ccbf;
}
.comment-fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
box-shadow: 0 0 6px rgba(30, 20, 20, 0.1);
z-index: 100;
/*margin-bottom:2rpx; */
}
.comment-box {
padding: 16rpx 4rpx;
display: flex;
justify-content: center;
}
.comment-area {
border: 1px solid #ccc;
margin-top: 20rpx;
max-width: 800rpx;
}
.comment-button {
width: 160rpx;
display: flex !important;
flex-direction: column;
justify-content: center;
margin-right: 22rpx;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 6px !important;
border-bottom-right-radius: 6px !important;
text-align: center;
padding: 0 2px !important;
font-size: 12px;
background-color: #eee;
color: #959595;
/* border: none;
border-radius: 0; */
}
.comment-button::after {
border: none;
}
.replay-button {
width: 160rpx;
display: flex !important;
flex-direction: column;
justify-content: center;
margin-right: 0rpx;
/* border-bottom-left-radius: 6px !important;
border-top-left-radius: 6px !important;
border-top-right-radius: 6px !important;
border-bottom-right-radius: 6px !important; */
text-align: center;
padding: 0px !important;
font-size: 12px;
color: #959595;
background-color: #eee;
border-radius: 40rpx;
}
.replay-button::after {
border: none;
}
.comment-input {
background-color: #f5f7f7;
padding: 2px 3px 2px 10px;
font-size: 14px;
height: 25px;
max-height: 25px;
min-height: 30px;
width: 51%;
text-align: left;
/* border: 1px solid #296fd0; */
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.textNoEmpty {
color: red;
}
.gravatarImg {
/* margin-top: 4px; */
border-radius: 50%;
/*
opacity: 1;
transform: scale(1);
perspective-origin: top center;
transition: all ease-in-out 0.3s;
*/
height: 44rpx;
width: 48rpx;
}
.more-comment {
font-size: 30rpx;
line-height: 1.8rem;
margin-bottom: 50rpx;
text-align: center;
margin-top: 20rpx;
}
.img-plus {
width: 48rpx !important;
height: 48rpx !important;
margin-right: 10px;
margin-top: 10rpx;
}
/* comment end */
.relatedPost {
position: relative;
text-align: left;
margin: 32rpx 0 60rpx;
/* border-bottom: 1px solid #eee; */
}
.relatedTitle {
text-align: left;
font-weight: normal;
line-height: 40rpx;
margin-top: 20rpx;
margin-bottom: 20rpx;
font-size: 32rpx;
color: #4c4c4c !important;
}
.relatedText {
text-align: left;
font-weight: normal;
font-size: 28rpx;
line-height: 60rpx;
color: #4c4c4c !important;
text-overflow:ellipsis;
overflow:hidden;
}
.likePost {
position: relative;
text-align: left;
margin-top: 30rpx;
/* border-bottom: 1px solid #ededed; */
margin-bottom: 30rpx;
}
.likePost .likebtt {
width:auto;
min-width:200rpx;
height:60rpx;
line-height:56rpx;
border-radius:50rpx;
border:1px solid #79ccbf;
text-align:center;
margin:0 35% 40rpx;
}
.likePost .likebtt text {
font-size:26rpx;
color:#79ccbf;
}
.likeTitle {
text-align: left;
font-weight: normal;
/* line-height: 30rpx; */
margin-top: 20rpx;
margin-bottom: 20rpx;
/* margin-left: 280rpx; */
font-size: 28rpx;
color: #959595 !important;
vertical-align: middle;
/* width: 140rpx;
height: 70rpx; *//* border-radius: 35rpx; *//* border: 1rpx solid #c4c4c4; */
position: absolute;
top: 120rpx;
left: 0;
}
.likeTitle-img {
position: absolute;
top: 120rpx;
left: 160rpx;
}
.likeText {
text-align: center;
font-weight: normal;
font-size: 26rpx;
line-height: 30rpx;
color: #0000fe !important;
margin: 30rpx 0 20rpx;
}
.img-like {
width: 50rpx;
height: 50rpx;
display: inline-block;
text-align: center;
margin-right: 20rpx;
margin-top: 8rpx;
}
.gravatarLikeImg {
margin-top: 4px;
border-radius: 50%;
/*
opacity: 1;
transform: scale(1);
perspective-origin: top center;
transition: all ease-in-out 0.3s;
*/
height: 60rpx;
width: 60rpx;
margin-right: 20rpx;
}
.relatedNavigator {
color: #21759b !important;
}
.sharedetail {
position: relative;
text-align: center;
margin-top: 30rpx;
}
/*
.share-button {
width: 50rpx;
display: flex !important;
flex-direction: column;
justify-content: center;
margin-left: 5px;
margin-right: 20rpx;
border-radius: 2px;
text-align: center;
padding: 0 2px !important;
font-size: 12px;
background-color: #5599FF;
color: #fff;
}
.share-button, .share-button::after {
position: relative;
width: auto;
height: auto;
margin: 0;
padding: 0;
line-height: 1;
border-radius: none;
-webkit-tap-highlight-color: transparent;
background-color: transparent;
border: none !important;
color: #333;
}
*/
.share-button{
opacity: 0;
position:absolute;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
top:0;
left: 0;
}
.share-title {
color: #333;
font-size: 30rpx;
padding-top: 20rpx;
}
.copy-button {
color: #296fd0 !important;
}
.showMessage {
text-align: center;
font-weight: normal;
font-size: 26rpx;
line-height: 40rpx;
color: sandybrown;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.ditail-copyright {
font-size: 26rpx;
line-height: 1.2;
font-weight: normal;
text-align: center;
color: #999;
margin-top: 20rpx;
margin-bottom: 120rpx;
}
.wxParse-a {
color: #21759b;
}
.wxParse-code {
padding: 2px 4px !important;
font-size: 90% !important;
border-radius: 3px !important;
color: #eb2226 !important;
background-color: #f9f2f4 !important;
font-family: Microsoft YaHei, Helvetica, Source Code Pro, Consolas, Menlo, Monaco, Courier New, monospace !important;
}
/* menu-box */
.menu-box {
position: relative;
height: 80px;
padding: 5px 0;
box-sizing: border-box;
margin-bottom: -80px;
}
.menuBackground {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: transparent;
z-index: 99;
}
.iconList {
text-align: center;
border-top: 1px solid #eee;
}
.iconLine {
margin-top: 20rpx;
}
.iconLine text {
font-size: 24rpx;
text-align: center;
color: #959595;
}
.iconLine view {
text-align: center;
}
.text-center {
text-align: center;
}
.img-menu {
width: 50rpx;
height: 50rpx;
display: inline-block;
text-align: center;
}
.img-menu2 {
width: 60rpx;
height: 60rpx;
display: inline-block;
text-align: center;
}
.img-menu3 {
width: 100rpx;
height: 100rpx;
display: inline-block;
text-align: center;
}
.emoji-move-in {
-webkit-animation: emoji-move-in 0.3s forwards;
animation: emoji-move-in 0.3s forwards;
}
.emoji-move-out {
-webkit-animation: emoji-move-out 0.3s forwards;
animation: emoji-move-out 0.3s forwards;
}
.no-emoji-move {
-webkit-animation: none;
animation: none;
}
@-webkit-keyframes emoji-move-in {
0% {
margin-bottom: -80px;
}
100% {
margin-bottom: 0;
}
}
@keyframes emoji-move-in {
0% {
margin-bottom: -80px;
}
100% {
margin-bottom: 0;
}
}
@-webkit-keyframes emoji-move-out {
0% {
margin-bottom: 0;
}
100% {
margin-bottom: -80px;
}
}
@keyframes emoji-move-out {
0% {
margin-bottom: 0;
}
100% {
margin-bottom: -80px;
}
}
/* end menu-box */
.pagination
{
font-weight: normal;
font-size: 28rpx;
line-height: 60rpx;
color: #4c4c4c !important;
border-bottom: 1px solid #eee;
}
.nav-previous {
float: left;
width: 80%;
}
.nav-next {
float: right;
text-align: right;
width: 80%;
}
.canvas-box {
position: fixed;
top: 999999rpx;
left: 0;
}
最后保存,刷新查看样式就变了,我建议是按照我上面写的整篇替换,我在测试的时候没有发现问题
隐藏内容
此处内容需要权限查看
END拜拜ヾ(•ω•`)o
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。