Typecho小程序个性定制
完成第二步基础配置后,如信息正确,小程序已经可以正常获取到您博客中的内容了,此时,如对icon或个性化内容、配色不满意的同学,可在本章修改为符合个人需求的内容。
一、目录分析
本程序根目录下包含7个子目录,其中:
canvasdrawer/colorui/toexml/utils四个目录不在本次自定义修改教程中使用,如果兴趣可自行查阅相关资料修改其中内容。
images是静态图片(icon)的存放目录。
template目录下存放页脚(foot.wxml)模板文件。
pages是各类页面的存放目录:
- pages中about目录包含“我的”界面相关内容(我的(index)、关于我们(about)、更新日志(update));
- pages中auth目录为授权登录界面;
- pages中cat目录为排行界面;
- pages中detail目录为文章页面;
- pages中index目录为小程序首页;
其他界面不在本次教程修改范围内(如share分享界面、start服务器运行状态界面等)。
二、images目录
images目录是图片资源文件夹,在此文件夹中,可修改icon图标和相关图片。
注意:此处可直接在解压出来的目录中进行图片的替换和修改,建议将整个images目录备份后再进行操作,修改后的图片名称需与原文件名称保持一致(如,修改home图标时,可将原图标删除,粘贴一张名为home.png的图标放置在images/tabar目录下)
images目录中包含以下文件:
名称 | 用途 |
---|---|
cvbg | 文章分享背景图 |
error1 | 错误提示图 |
resend | 分享按钮图 |
share | 转发朋友圈按钮图 |
zanoff | 文章点赞按钮图 |
zanon | 文章已点赞图 |
first | 排行页第一的文章 |
second | 排行页第二的文章 |
third | 排行页第三的文章 |
其中,目录中还包含一个子目录tabar,内容是底部切换按钮的icon(即选中或带选中的状态图标),具体释义如下:
名称 | 用途 |
---|---|
home | 首页按钮 |
home_cur | 处于首页时状态按钮 |
basics | 排行按钮 |
basics_cur | 处于排行页面时状态按钮 |
about | 我的按钮 |
about_cur | 处于“我的”界面时状态按钮 |
三、首页
首页位于pages中index目录下,包含index.js、index.json、index.wxml、index.wxss,四个文件中,主要控制界面的是index.wxml和index.wxss两个文件(本程序因去除了相关功能,因此该文件可全文注释)。
1、index.wxml文件
index.wxml文件是首页的整体布局,包含导入其他页面模板(如页脚模板)、定制页面内容(包括轮播图、运行时间及状态、显示分类等)、基础的样式引用(如顶部背景色、轮播样式指定等)
在文件中,可对以下数据做基础修改:
- 第二行:bgColor属性,可调整界面顶部背景颜色,引入的ColorUI库包含渐变色,也可尝试使用(将bg-white变更为所需属性值即可)
- 第二行:image标签内,src的图标是首页顶部的logo图标,更换src后的链接即可更换,如效果不好,可将整个image标签删除,修改为文字直接显示在顶部即可。
<import src="../../template/foot.wxml"></import>
<cu-custom bgColor="bg-white"><view slot="content"><image src="https://www.asfor.cn/download/img/logo/ASFOR_new.png" mode="scaleToFill" class="gif-wave"></image></view></cu-custom>
<scroll-view scroll-y class="scrollPage">
<!--轮播图-->
<view class="minheight view_section" style="display:{{topswiper}}" >
<swiper class="index_swiper" autoplay="True" duration= "200" interval="3000" indicator-active-color="rgb(0, 129, 255)" indicator-color="#fff" circular="True" previous-margin="20rpx" next-margin="30rpx" indicator-dots="True" lower-threshold="50">
<block wx:key="id" wx:for="{{swipelist}}">
<swiper-item class="m_full" style="background-color: transparent;" >
<navigator class="navigator_item" hover-class="navigator-hover" url="../detail/detail?item={{item.cid}}" style="background-image: url({{item.thumb}}); background-size: 100% 100%;">
</navigator>
</swiper-item>
</block>
</swiper>
</view>
<!--显示数据-->
<view class="padding flex text-center text-grey bg-white shadow-warp">
<view class="flex flex-sub flex-direction solid-right">
<view class="text-xxl text-orange">{{oneTime}}</view>
<view class="margin-top-sm" >
<text class="cuIcon-time" ></text> 运行时间</view>
</view>
<view class="flex flex-sub flex-direction">
<navigator class="content" url="/pages/stat/stat" hover-class="none">
<view class="text-xxl text-green">{{articleCount}}</view>
<view class="margin-top-sm">
<text class="cuIcon-edit"></text>运行状态</view>
</navigator>
</view>
</view>
<view style="width: 100%; height:100%;">
<view class="scroll_box" >
<scroll-view class="scroll-view_x" scroll-with-animation="True" scroll-into-view="{{current_position}}" scroll-x style="width: auto;overflow:hidden;">
<block wx:for="{{allcatslist}}" wx:key="item">
<view id="{{item.id_tag}}" class="item_list {{item.active? 'active':''}}" bindtap="changeCat" data-mid="{{item.mid}}">
{{item.name}}
</view>
</block>
</scroll-view>
</view>
<swiper style=" height:{{postheight}}" bindchange="change_finish" duration= "200" current="{{current_cat}}" circular="True" indicator-color = 'rgba(0, 0, 0, 0)' indicator-active-color = 'rgba(0, 0, 0, 0)' indicator-dots="false" lower-threshold="50">
<block wx:for="{{allcatpostlist}}" wx:key="id" wx:for-item="item_cat">
<swiper-item style="background-color: transparent;">
<view class="classify">
<scroll-view class="classify_detail" scroll-y scroll-with-animation="true">
<view class="children">
<block wx:key="id" wx:for="{{item_cat}}">
<navigator class="nav_postlist_item solid-bottom" hover-class="navigator-hover" url="../detail/detail?item={{item.cid}}">
<view class="view_postlist_item" style="height: 170rpx">
<view class="view_catpost" >
<image class="image_cat_thumb" mode="aspectFit" src="{{item.thumb[4].str_value}}"/>
<text class="image_cat_item_title" >{{item.title}}</text>
<view style="margin-top: 10rpx;" >
<text class="list_text_view cuIcon-time margin-lr-xs " >{{item.posttime}}</text>
<text class="list_text_view cuIcon-messagefill margin-lr-xs">{{item.commentsNum}}</text>
<text class="list_text_view cuIcon-attentionfill margin-lr-xs">{{item.views}}</text>
<text class="list_text_view cuIcon-appreciatefill margin-lr-xs">{{item.likes}}</text>
</view>
</view>
</view>
</navigator>
</block>
</view>
</scroll-view>
</view>
</swiper-item>
</block>
</swiper>
<template is="foot"></template>
</view>
</scroll-view>
2、index.wxss文件
index.wxss文件是首页的样式文件,但由于在删除每日一句、公告等内容后,本文件的代码均不影响首页目前的运行状态和布局,如需恢复相关功能,请自行根据模块解封,如保持本程序首页布局,则可将所有css样式注释。
四、排行
排行界面是文字浏览量、点赞量、评论数的统计后的分别排行,本界面不建议修改。
完整路径:pages/cat/cat.wxml
如需使程序统一度提高,修改顶部背景色,可修改cu-custom标签中的bgColor属性值。
<cu-custom bgColor="bg-blue">
<view slot="content">热门排行</view>
</cu-custom>
如上述代码所示,将背景色修改为蓝色(blue)的效果如下:
五、我的界面
我的界面位于pages/about目录下,目录中包含三个文件夹,其中,index文件夹是该界面的布局、update文件夹是版本更新的更新日志界面、about目录(完整路径为/pages/about/about)是关于我们界面的布局。
1、“我的”页面
完整路径:pages/about/index
1)、index.wxml文件
可修改内容如下:
- 第二行:背景色的修改
- 第九行:image标签中,图片为背景图底部波浪gif图,可保存图片到个人服务器上,更换为自己的链接,也可直接去除;
- 第15行:可修改view标签中的主体内容(梦想),及主题内容的颜色(将text-orange修改为text-颜色 即可),后续主题内容可同此方法修改。
其他内容则不建议修改,如需修改或删除,请认真核查标签位置,可先注释调试,如无问题再删除代码。
2)、index.wxss文件
可修改内容如下:
- 第2行:background-image后的url是背景图片链接,可修改为更美观适合的图片(图片不宜过大)。
- 第44行:该板块内容为头像样式,可根据背景图调整头像的宽(width)和高(height)的值,以此修改头像的大小等属性,使得整体更加美观舒适。
2、更新日志
update.wxml文件
update.wxml文件可修改内容如下:
- 第2行:修改顶部背景颜色
新增更新日志:复制以下内容,并将更新时间、内容、版本调整即可;
<view class="cu-item text-blue"> <view class="content"> <view class="cu-capsule radius"> <view class="cu-tag bg-blue">V 1.1.0</view> <view class="cu-tag line-blue">2020-05-01</view> </view> <view class="margin-top">更新内容:</view> <view>1、增加评论内容展示区(评论内容源于官网www.asfor.cn);</view> <view>2、icon图标优化;</view> <view>3、其他细节优化;</view> </view> </view>
可修改界面的text-blue、bg-blue、line-blue的颜色值,适配全局的色彩统一度。
3、关于我们
about.wxml文件
完整路径:pages/about/about/about.wxml
该文件的可修改内容如下:
- 第二行:顶部背景色(bgColor)
- 第9-10行:联系方式背景色
- 全局内容及联系方式覆盖或删除即可
六、文章页
detail.wxml文件
完整路径:pages/detail/detail.wxml
该文件可根据模块自行增加或删除部分布局。
注意:评论功能由于绕过typecho审核,若开启则无法通过微信小程序审查,因此,不建议开启此功能。
七、其他个性化修改
1、页脚
完整路径:pages/template/foot.wxml
可修改版权信息
2、授权登录界面
完整路径:pages/auth/auth.wxml
可修改授权文案
至此,大多数界面的基础修改已全部结束,调整至满意的效果后,可根据下一章《Typecho小程序详细教程(四)代码发布》进行小程序的配置与发布
4 条评论
第四章什么时候出来呀!
不好意思哈,最近有一些事儿,比较忙,有空的时候会写的哈
666
hhh