Catalogues
This assignment belongs to which course | EE308FZ Software Engineering https://bbs.csdn.net/forums/ssynkqtd-04 |
---|---|
Where this assignment is required | https://bbs.csdn.net/topics/617606376 |
Team name | FZU Flying Club |
The goal of this assignment | Help students understand Alpha Sprint and promote course project progress |
Other references | None |
1 Project burn chart
2 Video demonstration of Building Page Themes
Sprint Plan 2 demonstration video
3 Task code embedding area
theme:
name: material
theme: name: material
- scheme: default # day mode
primary: deep purple # upper
accent: blue # highlight colour for interactive elements such as links
toggle.
icon: material/weather-night # icons
name: switch to night mode # mouse hover alerts
- scheme: slate # night mode
primary: indigo
accent: amber
toggle: icon: material/weather-sunny
icon: material/weather-sunny
name: switch to day mode
features.
- navigation.tabs # Use tabs to sort by categories
- navigation.top # Button to go back to top appears on swipe up
- navigation.indexes # Tabs will have an index.md instead of opening the first post when opening a tab.
- navigation.path #
- navigation.top #
- search.suggest # Suggests completing the word when searching for some letters.
- search.highlight # Highlight the keywords of the searched article.
language: zh # Some suggestive text will be in Chinese.
icon: # An alternative to the 'clound' icon in the top-right corner.
repo: fontawesome/brands/github
custom_dir: overrides
edit_uri: edit/main/docs # link to jump to with edit button
## [bottom-left corner]
copyright: © 2023 FZU-MIECer Copyleft ## Copyright statement in the lower left corner
## [lower right corner]
extra:
social: # Icon
- Icons: fontawesome/brands/github
link: https://github.com/MIECer/FZU-flying-book
Name: GitHub | FZU-flying-book
- Icon: fontawesome/brands/docker
Link: https://caihanlin.com/
Name: Website | HanlinCAI
# - icon: fontawesome/brands/twitter
# - link: https://twitter.com/lancecai2002
# - Name: Twitter | lancecai2002
# - icon: fontawesome/brands/bilibili
# link: https://space.bilibili.com/594030035
# name: Bilibili | lance cai # mouse hover alerts
# - icon: fontawesome/brands/linkedin
# link: https://www.linkedin.com/in/hanlin-cai-07b53b23b/
# name: Linkedin | hanlin-cai # mouse hover tip
# ======================================================
# [Extensions]
plugins.
- search: # Chinese search is not supported yet. You can set the language when it is supported.
# insider already supports Chinese word search https://squidfunk.github.io/mkdocs-material/blog/2022/chinese-search-support/
lang.
- ja
- ja
- tags # Add tags to a single post https://squidfunk.github.io/mkdocs-material/setup/setting-up-tags/?h=tags
markdown_extensions.
- pymdownx.arithmatex: # latex support
generic: true
- attr_list # Add {width="300"} to the back of an image to set the size.
Comment:
The code completes the content of sprint task 2, completes the task of building the page theme, implements the site’s day and night mode switching, simply builds the first level of the title, the menu bar and other content, and sets up the hover and the clicked item icons and buttons when the button colour change. The purpose is to enhance the user experience and improve the comfort of browsing the website.
4 Task code github repository
Link:
https://github.com/MIECer/FZU-flying-book
*Need VPN
5 Test Report
1. Introduction
We performed comprehensive functionality and performance testing of the website page theme build project. The project included testing of plugins such as day and night mode, title bar, etc.
2. Test Items
2.1 Day and night mode
2.1.1 Functionality Tests
-
Switching Mode: Test whether the user can successfully switch the day and night mode.
Expected Result: Smooth transition of page elements during switching, without obvious flickering or misalignment. -
Save Settings: After refreshing the page, test whether the user’s mode settings are correctly saved.
Expected Result: After refreshing, the page should remain in the mode last selected by the user.
2.1.2 Compatibility Testing
- Different browsers: Test the compatibility of the day and night mode on common browsers (Firefox, Safari, Edge).
Expected results: Mode switching should be consistent across browsers and there should be no display anomalies.
2.2 Title Bar Plugin
2.2.1 Functional Tests
-
Display title: Test whether the title bar plugin displays the page title correctly.
Expected Result: The title should be displayed at the top of the page in a legible font. -
Header Links: Tests whether users can quickly jump to other pages via the title bar.
Expected Results: After clicking on the title, the page should smoothly jump to the page with the relevant link.
3. Test Results
According to the above tests, the Day & Night Mode and Title Bar plugins of the Website Page Theme Builder project perform well in terms of functionality and compatibility. No obvious errors or anomalies were found.
4. Pending Issues
No obvious problems were found.
5. Recommendations and improvements
Based on the test results, the following improvements are recommended for consideration:
- Add animation effect: Add gradient effect when switching between day and night modes to improve user experience.
- Responsive design: further optimise the display effect on different devices to ensure that it can be displayed well in various resolutions.
6. Conclusion
After thorough testing, the website page theme building project performs well in terms of day and night mode and title bar plugin. It is recommended to continue to be sensitive to user feedback and fix any problems found in a timely manner.