halo-theme-hao/templates/modules/widgets/about-widgets/authorCareers.html

<!-- 技能&职业生涯 -->
<div class="author-content">

    <div class="author-content-item skills">
        <div class="card-content">
            <div class="author-content-item-tips">技能</div>
            <span class="author-content-item-title">开启创造力</span>
            <div class="skills-style-group">
                <div class="tags-group-all">
                    <!--  banners 使用默认值-->
                    <div class="tags-group-wrapper"
                         th:if="${#strings.equals(theme.config.top.BannerLeft.bannersBackground, 'default')}">
                        <div class="tags-group-icon-pair">
                            <div class="tags-group-icon" style="background:#989bf8">
                                <img th:src="${assets_link + '/images/icons/AfterEffect.png'}"
                                     title="AfterEffect">
                            </div>
                            <div class="tags-group-icon" style="background:#fff">
                                <img th:src="${assets_link + '/images/icons/Sketch.png'}"
                                     title="Sketch">
                            </div>
                        </div>
                        <div class="tags-group-icon-pair">
                            <div class="tags-group-icon" style="background:#57b6e6">
                                <img th:src="${assets_link + '/images/icons/Docker.png'}"
                                     title="Docker">
                            </div>
                            <div class="tags-group-icon" style="background:#4082c3">
                                <img th:src="${assets_link + '/images/icons/Photoshop.png'}"
                                     title="Photoshop">
                            </div>
                        </div>
                        <div class="tags-group-icon-pair">
                            <div class="tags-group-icon" style="background:#fff">
                                <img th:src="${assets_link + '/images/icons/FinalCutPro.png'}"
                                     title="FinalCutPro">
                            </div>
                            <div class="tags-group-icon" style="background:#fff">
                                <img th:src="${assets_link + '/images/icons/Python.png'}"
                                     title="Python">
                            </div>
                        </div>
                        <div class="tags-group-icon-pair">
                            <div class="tags-group-icon" style="background:#eb6840">
                                <img th:src="${assets_link + '/images/icons/Swift.png'}"
                                     title="Swift">
                            </div>
                            <div class="tags-group-icon" style="background:#8f55ba">
                                <img th:src="${assets_link + '/images/icons/Principle.png'}"
                                     title="Principle">
                            </div>
                        </div>
                        <div class="tags-group-icon-pair">
                            <div class="tags-group-icon" style="background:#f29e39">
                                <img th:src="${assets_link + '/images/icons/illustrator.png'}"
                                     title="illustrator">
                            </div>
                            <div class="tags-group-icon" style="background:#2c51db">
                                <img th:src="${assets_link + '/images/icons/CSS3.png'}" title="CSS3">
                            </div>
                        </div>
                        <div class="tags-group-icon-pair">
                            <div class="tags-group-icon" style="background:#f7cb4f">
                                <img th:src="${assets_link + '/images/icons/JS.png'}" title="JS">
                            </div>
                            <div class="tags-group-icon" style="background:#e9572b">
                                <img th:src="${assets_link + '/images/icons/HTML.png'}" title="HTML">
                            </div>
                        </div>
                        <div class="tags-group-icon-pair">
                            <div class="tags-group-icon" style="background:#df5b40">
                                <img th:src="${assets_link + '/images/icons/Git.webp'}" title="Git">
                            </div>
                            <div class="tags-group-icon" style="background:#e65164">
                                <img th:src="${assets_link + '/images/icons/Apifox.webp'}"
                                     title="Apifox">
                            </div>
                        </div>
                        <div class="tags-group-icon-pair">
                            <div class="tags-group-icon" style="background:#989bf8">
                                <img th:src="${assets_link + '/images/icons/AfterEffect.png'}"
                                     title="AfterEffect">
                            </div>
                            <div class="tags-group-icon" style="background:#fff">
                                <img th:src="${assets_link + '/images/icons/Sketch.png'}"
                                     title="Sketch">
                            </div>
                        </div>
                        <div class="tags-group-icon-pair">
                            <div class="tags-group-icon" style="background:#57b6e6">
                                <img th:src="${assets_link + '/images/icons/Docker.png'}"
                                     title="Docker">
                            </div>
                            <div class="tags-group-icon" style="background:#4082c3">
                                <img th:src="${assets_link + '/images/icons/Photoshop.png'}"
                                     title="Photoshop">
                            </div>
                        </div>
                        <div class="tags-group-icon-pair">
                            <div class="tags-group-icon" style="background:#fff">
                                <img th:src="${assets_link + '/images/icons/FinalCutPro.png'}"
                                     title="FinalCutPro">
                            </div>
                            <div class="tags-group-icon" style="background:#fff">
                                <img th:src="${assets_link + '/images/icons/Python.png'}"
                                     title="Python">
                            </div>
                        </div>
                        <div class="tags-group-icon-pair">
                            <div class="tags-group-icon" style="background:#eb6840">
                                <img th:src="${assets_link + '/images/icons/Swift.png'}"
                                     title="Swift">
                            </div>
                            <div class="tags-group-icon" style="background:#8f55ba">
                                <img th:src="${assets_link + '/images/icons/Principle.png'}"
                                     title="Principle">
                            </div>
                        </div>
                        <div class="tags-group-icon-pair">
                            <div class="tags-group-icon" style="background:#f29e39">
                                <img th:src="${assets_link + '/images/icons/illustrator.png'}"
                                     title="illustrator">
                            </div>
                            <div class="tags-group-icon" style="background:#2c51db">
                                <img th:src="${assets_link + '/images/icons/CSS3.png'}" title="CSS3">
                            </div>
                        </div>
                        <div class="tags-group-icon-pair">
                            <div class="tags-group-icon" style="background:#f7cb4f">
                                <img th:src="${assets_link + '/images/icons/JS.png'}" title="JS">
                            </div>
                            <div class="tags-group-icon" style="background:#e9572b">
                                <img th:src="${assets_link + '/images/icons/HTML.png'}" title="HTML">
                            </div>
                        </div>
                        <div class="tags-group-icon-pair">
                            <div class="tags-group-icon" style="background:#df5b40">
                                <img th:src="${assets_link + '/images/icons/Git.webp'}" title="Git">
                            </div>
                            <div class="tags-group-icon" style="background:#e65164">
                                <img th:src="${assets_link + '/images/icons/Apifox.webp'}"
                                     title="Apifox">
                            </div>
                        </div>
                    </div>

                    <!--  banners 使用默认值-->
                    <div class="tags-group-wrapper"
                         th:if="${#strings.equals(theme.config.top.BannerLeft.bannersBackground, 'techStack')}"
                         th:with="techs = ${theme.config.top.BannerLeft.techStack}">
                        <th:block th:each="tech,iterStat : ${techs}">
                            <div class="tags-group-icon-pair" th:if="${iterStat.odd}">
                                <div class="tags-group-icon"
                                     th:style="'background:' + ${techOdd.background}"
                                     th:with="techOdd = ${techs.get(iterStat.index - 1)}">
                                    <img th:src="@{${techOdd.url}}"
                                         th:title="${techOdd.name}">
                                </div>

                                <div class="tags-group-icon"
                                     th:style="'background:' + ${techEven.background}"
                                     th:with="techEven = ${tech}">
                                    <img th:src="@{${techEven.url}}"
                                         th:title="${techEven.name}">
                                </div>
                            </div>
                        </th:block>
                    </div>
                </div>

                <!--  banners 使用默认值-->
                <div class="skills-list"
                     th:if="${#strings.equals(theme.config.top.BannerLeft.bannersBackground, 'default')}"
                     th:with="techs = ${theme.config.top.BannerLeft.techStack}">

                    <div class="skill-info">
                        <div class="skill-icon" style="background:#989bf8">
                            <img th:src="${assets_link + '/images/icons/AfterEffect.png'}"
                                 title="AfterEffect">
                        </div>
                        <div class="skill-name"><span>AfterEffect</span></div>
                    </div>

                    <div class="skill-info">
                        <div class="skill-icon" style="background:#ffffff">
                            <img th:src="${assets_link + '/images/icons/Sketch.png'}" title="Sketch">
                        </div>
                        <div class="skill-name"><span>Sketch</span></div>
                    </div>

                    <div class="skill-info">
                        <div class="skill-icon" style="background:#57b6e6">
                            <img th:src="${assets_link + '/images/icons/Docker.png'}" title="Docker">
                        </div>
                        <div class="skill-name"><span>Docker</span></div>
                    </div>

                    <div class="skill-info">
                        <div class="skill-icon" style="background:#4082c3">
                            <img th:src="${assets_link + '/images/icons/Photoshop.png'}" title="Photoshop">
                        </div>
                        <div class="skill-name"><span>Photoshop</span></div>
                    </div>

                    <div class="skill-info">
                        <div class="skill-icon" style="background:#ffffff">
                            <img th:src="${assets_link + '/images/icons/FinalCutPro.png'}"
                                 title="FinalCutPro">
                        </div>
                        <div class="skill-name"><span>FinalCutPro</span></div>
                    </div>

                    <div class="skill-info">
                        <div class="skill-icon" style="background:#ffffff">
                            <img th:src="${assets_link + '/images/icons/Python.png'}" title="Python">
                        </div>
                        <div class="skill-name"><span>Python</span></div>
                    </div>

                    <div class="skill-info">
                        <div class="skill-icon" style="background:#eb6840">
                            <img th:src="${assets_link + '/images/icons/Swift.png'}" title="Swift">
                        </div>
                        <div class="skill-name"><span>Swift</span></div>
                    </div>

                    <div class="skill-info">
                        <div class="skill-icon" style="background:#8f55ba">
                            <img th:src="${assets_link + '/images/icons/Principle.png'}" title="Principle">
                        </div>
                        <div class="skill-name"><span>Principle</span></div>
                    </div>

                    <div class="skill-info">
                        <div class="skill-icon" style="background:#f29e39">
                            <img th:src="${assets_link + '/images/icons/illustrator.png'}"
                                 title="illustrator">
                        </div>
                        <div class="skill-name"><span>illustrator</span></div>
                    </div>

                    <div class="skill-info">
                        <div class="skill-icon" style="background:#2c51db">
                            <img th:src="${assets_link + '/images/icons/CSS3.png'}" title="CSS3">
                        </div>
                        <div class="skill-name"><span>CSS3</span></div>
                    </div>

                    <div class="skill-info">
                        <div class="skill-icon" style="background:#f7cb4f">
                            <img th:src="${assets_link + '/images/icons/JS.png'}" title="JS">
                        </div>
                        <div class="skill-name"><span>JS</span></div>
                    </div>

                    <div class="skill-info">
                        <div class="skill-icon" style="background:#e9572b">
                            <img th:src="${assets_link + '/images/icons/HTML.png'}" title="HTML">
                        </div>
                        <div class="skill-name"><span>HTML</span></div>
                    </div>

                    <div class="skill-info">
                        <div class="skill-icon" style="background:#df5b40">
                            <img th:src="${assets_link + '/images/icons/Git.webp'}" title="Git">
                        </div>
                        <div class="skill-name"><span>Git</span></div>
                    </div>

                    <div class="skill-info">
                        <div class="skill-icon" style="background:#1f1f1f">
                            <img th:src="${assets_link + '/images/icons/Apifox.webp'}" title="Apifox">
                        </div>
                        <div class="skill-name"><span>Apifox</span></div>
                    </div>

                    <div class="etc">...</div>
                </div>
                <div class="skills-list"
                     th:if="${#strings.equals(theme.config.top.BannerLeft.bannersBackground, 'techStack')}"
                     th:with="techs = ${theme.config.top.BannerLeft.techStack}">
                    <th:block th:each="tech : ${techs}">
                        <div class="skill-info">
                            <div class="skill-icon" th:style="'background:' + ${tech.background}">
                                <img th:src="@{${tech.url}}" th:title="${tech.name}">
                            </div>
                            <div class="skill-name">
                                <span>[[${tech.name}]]</span>
                            </div>
                        </div>
                    </th:block>
                </div>
            </div>
        </div>
    </div>

    <div class="author-content-item careers">
        <div class="card-content">
            <div class="author-content-item-tips">生涯</div>
            <span class="author-content-item-title"
                  th:text="${theme.config.about.authorCareers.authorCareersTitle}">无限进步</span>
            <div class="careers-group"
                 th:if="${not #lists.isEmpty(theme.config.about.authorCareers.authorCareersTags)}"
                 th:with="careersTags = ${theme.config.about.authorCareers.authorCareersTags}">
                <div class="careers-item" th:each="tag : ${careersTags}">
                    <div class="circle" th:style="'background:' + ${tag.background}"></div>
                    <div class="name" th:text="${tag.desc}"></div>
                </div>
            </div>
            <img alt="生涯" class="author-content-img"
                 th:src="@{${#strings.isEmpty(theme.config.about.authorCareers.authorCareersBackground) ?  assets_link + '/images/hao-logo.jpg' : theme.config.about.authorCareers.authorCareersBackground}}">
        </div>
    </div>
</div>