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目录列表

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小程序详细教程(四)代码发布》进行小程序的配置与发布
Last modification:October 23, 2022
分享是对我最大的赞赏