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目录中包含以下文件：

其中，目录中还包含一个子目录tabar，内容是底部切换按钮的icon(即选中或带选中的状态图标)，具体释义如下：

三、首页

首页位于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:{{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、增加评论内容展示区（评论内容源于官网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小程序详细教程（四）代码发布》进行小程序的配置与发布