Loading... ## Typecho小程序个性定制 > 完成第二步基础配置后,如信息正确,小程序已经可以正常获取到您博客中的内容了,此时,如对icon或个性化内容、配色不满意的同学,可在本章修改为符合个人需求的内容。 ### 一、目录分析 本程序根目录下包含7个子目录,其中: > canvasdrawer/colorui/toexml/utils四个目录不在本次自定义修改教程中使用,如果兴趣可自行查阅相关资料修改其中内容。 ![基础界面目录](https://xug.cc/usr/uploads/2022/11/3731256678.png "基础界面目录") **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目录列表](https://xug.cc/usr/uploads/2022/11/865738420.png "images目录列表") 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://xug.cc/img/logo/naye.png" mode="scaleToFill" class="gif-wave"></image></view></cu-custom> <scroll-view scroll-y class="scrollPage"> <!--轮播图--> <view class="minheight view_section" style="display:<ruby>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<rp> (</rp><rt>key="id" wx:for="{{swipelist</rt><rp>) </rp></ruby>"> <swiper-item class="m_full" style="background-color: transparent;" > <navigator class="navigator_item" hover-class="navigator-hover" url="../detail/detail?item=<ruby>item.cid}}" style="background-image<rp> (</rp><rt>url({{item.thumb</rt><rp>) </rp></ruby>); 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"><ruby>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<rp> (</rp><rt>100%; height:100%;"> <view class="scroll_box" > <scroll-view class="scroll-view_x" scroll-with-animation="True" scroll-into-view="{{current_position</rt><rp>) </rp></ruby>" scroll-x style="width: auto;overflow:hidden;"> <block wx:for="<ruby>allcatslist}}" wx<rp> (</rp><rt>key="item"> <view id="{{item.id_tag</rt><rp>) </rp></ruby>" class="item_list <ruby>item.active? 'active'<rp> (</rp><rt>''</rt><rp>) </rp></ruby>" bindtap="changeCat" data-mid="<ruby>item.mid}}"> {{item.name}} </view> </block> </scroll-view> </view> <swiper style=" height<rp> (</rp><rt>{{postheight</rt><rp>) </rp></ruby>" bindchange="change_finish" duration= "200" current="<ruby>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<rp> (</rp><rt>for="{{allcatpostlist</rt><rp>) </rp></ruby>" 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="<ruby>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<rp> (</rp><rt>170rpx"> <view class="view_catpost" > <image class="image_cat_thumb" mode="aspectFit" src="{{item.thumb[4].str_value</rt><rp>) </rp></ruby>"/> <text class="image_cat_item_title" ><ruby>item.title}}</text> <view style="margin-top<rp> (</rp><rt>10rpx;" > <text class="list_text_view cuIcon-time margin-lr-xs " >{{item.posttime</rt><rp>) </rp></ruby></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)的效果如下: ![顶部颜色修改](https://xug.cc/usr/uploads/2022/11/2507343460.png "顶部颜色修改") ### 五、我的界面 > 我的界面位于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是背景图片链接,可修改为更美观适合的图片(图片不宜过大)。 ![背景图片](https://image.xug.cc/i/2022/11/21/637b99ecb4d64.webp "背景图片") * 第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、增加评论内容展示区(评论内容源于官网xug.cc);</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小程序详细教程(四)代码发布》](https://xug.cc/index.php/archives/103/)进行小程序的配置与发布 Last modification:March 8, 2024 © Allow specification reprint Support Appreciate the author AliPayWeChat Like 如果觉得我的文章对你有用,请随意赞赏