• 查看 117 次, 回复 0
  • 如何修改组件内的属性
    4天前 (2025/09/10 13:58)
  • lll
  • 注册:1个月前
  • 加载中…
  • 注意:本操作和编辑代码有关,若操作不当,会影响该部分所有元素的显示,所以务必在操作前进行备份

    注意:本操作和编辑代码有关,若操作不当,会影响该部分所有元素的显示,所以务必在操作前进行备份

    注意:本操作和编辑代码有关,若操作不当,会影响该部分所有元素的显示,所以务必在操作前进行备份

     

    点击备份按钮

     


    进行创建备份


    输入备份名后,右下角橙色按钮创建

     

    以下为教程:

    此方法可以修改组件内的大部分内容,这里我们以修改颜色为例

     

    首先需要说明,修改组件字体的颜色等属性,只推荐在添加的新布局后修改,目的是同步该布局的字体或颜色等和当前主题保持一致,而修改模版内的默认组件会导致整体的如标题或文本同时的格式改变,以下为默认的组件的判断标准:

     

    一般我们需要进行新添加布局的修改,新添加的布局会有随机生成的命名,如下:

     

     

    以上图为例开始进行搜索,右键刚刚右边部分元素的名称处选择复制selector(详见如何使用F12教程),再打开编辑组件样式进行该元素代码的搜索,如下步骤:

     

    此时我们可以发现刚刚新添加的布局有一个大的前缀,而空格后则为这个布局的不同的小内容,如标题、文本、以及链接或H标签的样式,名称如下:

     

    我们可以根据这个名称找到这段代码的开头,一般新添加的布局默认是最下方位置,所以结尾一般就是所有代码的底部,如图:

     

     

    我们现在发现代码后就可以进行对代码中需要修改的部分进行修改,因为我们对代码的不懂,所以我们需要复制从刚刚该模块代码开头的部分,到该模块代码结束的部分,然后让AI分析,在让AI修改某个部分的内容,把需求告知给AI就可以达到轻松修改的目的,示例如下:

     

    现在发给AI,话术可以参考(这是一个模块的CSS样式代码,现在我需要对其中的某个部分进行修改,你需要先记住我的代码,我再发给你需要修改的位置和需求需求),如图:

     

     

    我们现在再次选择需要修改的位置,复制他的selector发送给AI,并告诉我们的需求即可,如下:

     

     

    现在我们发送给AI相关信息,发送内容可以参考(这个是我需要修改的位置,我需要把这个元素的背景修改为橙色,并且鼠标悬停后会变成绿色,把修改后的代码融入该模块代码内并完整的发送给我):

     

     

    最后回到刚刚的页面,从对应的组件进入后,通过上面的名称进行搜索,最后整体替换即可,如图:

     最后进行应用,还需要在装修后台的设置内点击“应用当前”(即需要两次点击应用

    完成后的效果,如下:

     

     

    自此就修改完毕,此时还需要检查一下该模块的其他位置是否正常显示(有没有一些地方的样式缺失等),如果没有问题则可以进行保存,其他的一些内容也可以根据此方法进行修改