Website webpage theme style switching method and device, computer equipment and storage medium
Detect user intentions through voice input and obtain theme style data from the backend, modify SCSS variables to apply to the web front end, solve the inconvenience of topic switching caused by browser cache clearing, and realize a user-friendly topic switching experience.
Patent Information
- Application Number
- CN202411989061.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-27
- Publication Date
- 2025-05-16
Smart Images

Figure CN120011665A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of computer technology, and in particular to a method, device, computer equipment and storage medium for switching the theme style of a website webpage. Background Art
[0002] With the development of Internet technology, User Experience (UX) has become increasingly important in website design. In order to meet the ever-changing needs of users, many websites provide the function of switching theme colors, allowing users to choose a suitable visual style according to their personal preferences. The theme color of a website not only affects its aesthetics, but is also directly related to the readability of the content and the browsing comfort of users.
[0003] In the prior art, many existing websites implement theme switching by dynamically changing the style attributes of elements using JavaScript scripts. A common method is to directly modify the CSS (Cascading Style Sheets) attributes of the website's webpage when the user clicks the theme switching button. Although this method is simple, its disadvantage is that the theme selected by the user often depends on the state storage of the browser, but when the user visits again, if the historical content of the browser cache is cleared, it may be necessary to reselect the webpage style theme, and since users often forget the location of the website's theme switching button on the page, once the historical content of the browser is cleared, the user is likely to choose to close the website (or even stop visiting the website in serious cases) because the webpage style theme of the website does not meet their aesthetic needs, which will not only lead to a poor experience, but also cause considerable losses to the website's developer. Summary of the invention
[0004] In order to solve the above technical problems, the present invention provides a website web page theme switching method, computer equipment, device and storage medium, aiming to solve the technical problem mentioned in the background technology that the historical content of the browser cache is cleared, which makes it inconvenient for users to switch the website web page theme style to a web page theme style that suits their preferences.
[0005] To achieve the above-mentioned purpose, the present invention provides a method for switching the theme style of a website webpage in a first aspect, the method comprising:
[0006] When the target webpage is in a display state and it is detected that the voice content input by the user at the front end of the target webpage meets the webpage theme switching intention operation, extracting the theme intention character string from the voice content;
[0007] Acquiring target theme style data corresponding to the theme intention character string from the backend storage area of the target webpage;
[0008] The value of the SCSS variable in the SCSS dependency file of the front end of the target webpage is modified according to the theme intention character string to apply the target theme style data to the target webpage.
[0009] In one example, the backend storage area of the target webpage stores historical options of the user's webpage theme style;
[0010] The step of acquiring target theme style data corresponding to the theme intention character string from the backend storage area of the target webpage includes:
[0011] Acquire the identity information of the user, and determine the historical options of the user stored in the backend storage area according to the identity information;
[0012] Target theme style data corresponding to the theme intention character string is acquired from the history options.
[0013] In one example, the method further includes:
[0014] The target theme style data selected by the user is saved as a history option in the backend storage area of the target webpage.
[0015] Preferably, the method further comprises:
[0016] The SCSS dependency file is used to configure a plurality of different website theme style tags, and the SCSS variables are configured to manage the color schemes and styles of different website theme styles; wherein the website theme style tags correspond to the theme style data of the target web page in the backend storage area.
[0017] In one example, the website webpage has a voice input mark, and the method further includes:
[0018] In response to a triggering operation of the voice input identifier by the user, the voice content input by the user at the front end of the target webpage is detected.
[0019] Preferably, the method further comprises:
[0020] When the subject intention string is extracted from the voice content, a JavaScript function is triggered, the SCSS variable is accessed through the JavaScript function, and the value of the SCSS variable is modified according to the subject intention string to apply the target subject style data to the target web page.
[0021] In one example, the method further includes:
[0022] Acquire the identity information of the user, and determine the portrait data of the user according to the identity information;
[0023] Acquire user preference information of the user in the backend storage area according to the portrait data;
[0024] According to the user preference information, selecting web page theme style recommendation options that meet the user preference information from the backend storage area of the target web page;
[0025] The step of acquiring target theme style data corresponding to the theme intention character string from the backend storage area of the target webpage includes:
[0026] The target theme data corresponding to the theme intention character string is selected from each of the web page theme recommendation options.
[0027] In a second aspect, the present application further proposes a device for switching the theme style of a website webpage, comprising:
[0028] A voice extraction module is used to extract a topic intention character string from the voice content when the target webpage is in a display state and it is detected that the voice content input by the user at the front end of the target webpage meets the webpage topic switching intention operation;
[0029] A web page theme style acquisition module, used to acquire target theme style data corresponding to the theme intention character string from the backend storage area of the target web page;
[0030] The switching module is used to modify the value of the SCSS variable in the SCSS dependency file of the front end of the target webpage according to the theme intention character string, so as to apply the target theme style data to the target webpage.
[0031] In a third aspect, the present application further proposes a computer device, comprising: a memory, a processor, and a website web page theme style switching program stored in the memory and executable on the processor, wherein the website web page theme style switching program is configured to implement the steps of the website web page theme style switching method as described in the first aspect above.
[0032] In a fourth aspect, the present application further proposes a computer-readable storage medium, on which a website web page theme style switching program is stored. When the website web page theme style switching program is executed by a processor, the steps of the website web page theme style switching method described in the first aspect above are implemented.
[0033] The technical effect of the present invention is that: the present application can achieve the switching of the web page theme style of the target web page without modifying the CSS on the front end of the website web page when the user switches the web page theme style of the target web page, thereby solving the technical problem in the conventional technology that the historical content of the browser cache is cleared, which makes it inconvenient for the user to switch the website web page theme style to the web page theme style that suits his or her preference. BRIEF DESCRIPTION OF THE DRAWINGS
[0034] Figure 1 It is a schematic diagram of the structure of a computer device in a hardware operating environment involved in an embodiment of the present invention;
[0035] Figure 2 A schematic diagram of a flow chart of a first embodiment of a method for switching a website webpage theme style according to the present invention;
[0036] Figure 3 A schematic diagram of a flow chart of a second embodiment of a method for switching a website webpage theme style according to the present invention;
[0037] Figure 4 This is a flow chart of a fourth embodiment of a method for switching a website webpage theme style according to the present invention;
[0038] Figure 5 It is a structural block diagram of the device for switching the theme style of a website web page of the present invention.
[0039] The realization of the purpose, functional features and advantages of the present invention will be further explained in conjunction with embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION
[0040] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by technicians in the technical field to which this application belongs; the terms used herein are only for the purpose of describing specific embodiments and are not intended to limit this application; the terms "including" and "having" in the specification and claims of this application and the above-mentioned figure descriptions and any variations thereof are intended to cover non-exclusive inclusions.
[0041] It should be understood that when used in the present specification and the appended claims, the term "comprising" indicates the presence of described features, wholes, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, wholes, steps, operations, elements, components and / or combinations thereof.
[0042] It should also be understood that the term “and / or” used in the specification and appended claims refers to any and all possible combinations of one or more of the associated listed items, and includes these combinations.
[0043] In the description of the embodiments of the present application, the term "plurality" refers to more than two (including two), unless otherwise clearly and specifically defined.
[0044] In addition, in the description of the present application specification and the appended claims, the terms "first", "second", "third", etc. are only used to distinguish the descriptions and cannot be understood as indicating or implying relative importance.
[0045] References to "one embodiment" or "some embodiments" etc. described in the specification of this application mean that one or more embodiments of the present application include specific features, structures or characteristics described in conjunction with the embodiment. Therefore, the statements "in one embodiment", "in some embodiments", "in some other embodiments", "in some other embodiments", etc. that appear in different places in this specification do not necessarily refer to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized in other ways. The terms "including", "comprising", "having" and their variations all mean "including but not limited to", unless otherwise specifically emphasized in other ways.
[0046] It should be understood that the specific embodiments described herein are only used to explain the present invention, and are not used to limit the present invention.
[0047] like Figure 1 As shown, the computer device may include: a processor 1001, such as a CPU, a communication bus 1002, a user interface 1003, a network interface 1004, and a memory 1005. Among them, the communication bus 1002 is used to realize the connection and communication between these components. The user interface 1003 may include a display screen (the display screen has a touch function), an input unit, and a voice input module. Optionally, the user interface 1003 may also include a standard wired interface and a wireless interface. The network interface 1004 may optionally include a standard wired interface and a wireless interface (such as a WI-FI interface). The memory 1005 may be a high-speed RAM memory, or a stable memory (non-volatile memory), such as a disk memory.
[0048] Those skilled in the art will understand that Figure 1 The computer device structure shown in the figure does not constitute a limitation on the computer device, and may include more or less components than shown in the figure, or combine certain components, or arrange the components differently.
[0049] like Figure 1 As shown, the memory 1005 as a computer storage medium may include an operating system, a network communication module, a user interface module, and a website web page theme style switching program.
[0050] exist Figure 1In the computer device shown in the figure, the computer device can be a smart phone, a laptop or a desktop computer, and the computer device has a voice input function; the computer device of the present invention calls the website webpage theme style switching program stored in the memory 1005 through the processor 1001, and executes Figure 2 The following operations of the embodiment method.
[0051] Embodiment 1
[0052] Based on the above hardware structure, an embodiment of a method for switching the theme style of a website web page of the present invention is proposed.
[0053] Reference Figure 2 , Figure 2 The figure is a flow chart of a first embodiment of a method for switching website web page theme styles according to the present invention.
[0054] In this embodiment, the website webpage theme style switching method includes the following steps S10 to S30:
[0055] Step S10: when the target webpage is in a display state and it is detected that the voice content input by the user at the front end of the target webpage meets the webpage theme switching intention operation, extracting the theme intention character string from the voice content;
[0056] It can be understood that the execution subject of each step of the present implementation can be understood as the computer device. There is a browser application on the computer device. When the user uses the browser to open the target web page, the user can input voice instructions to the target web page. In a specific implementation, the website web page has a voice input identification button. For example, if the computer device is a mobile terminal with a touch display screen, the user can touch the voice input identification button, and then the user speaks to input voice content; and the target browser has a voice detection function, which can detect the voice content input by the user at the front end of the target web page.
[0057] The target web page can identify whether the "voice content" input by the user represents the web page theme switching intention operation. If so, the theme intention string is extracted from the voice content; and the extracted theme intention string is mapped to the target class.
[0058] In a specific implementation, the relevant R&D personnel of the target website pre-set a plurality of different types of web page theme styles and an initial state of a default style for the website; and assign a unique string identifier to each type of web page theme style.
[0059] Step S20: acquiring target theme style data corresponding to the theme intention character string from the backend storage area of the target webpage;
[0060] Specifically, the backend storage area may be a database of a backend server; a correspondence between "theme intention string", "theme style data" and "website theme style tag" is pre-established, and the correspondence is maintained in the database of the backend server for permanent storage.
[0061] Step S30: modifying the value of the SCSS variable in the SCSS dependency file of the front end of the target webpage according to the theme intention character string, so as to apply the target theme style data to the target webpage.
[0062] Specifically, the SCSS dependency file is used to configure a plurality of different website theme style tags, and the SCSS variables are configured to manage the color schemes and styles of different website theme styles; wherein the website theme style tags correspond to the theme style data of the target web page in the backend storage area.
[0063] Use SCSS (Sassy CSS, CSS preprocessor language) to set the styles of different themes. You can use SCSS variables to easily manage the colors and styles of different themes. Define variables for the root element, such as background color and text color. By changing the values of these variables, you can easily switch themes.
[0064] Specifically, the style files related to the SCSS dependent file configuration include:
[0065] A global basic style file index.scss, which is introduced into main.js for global use;
[0066] A file theme.scss for subsequent theme color configuration;
[0067] A handle.scss file for operating theme variables;
[0068] And, a configuration file themes.scss containing different theme color schemes.
[0069] In the specific implementation, the theme color style switching of the target web page must first introduce the scss dependency file in the website web project. The public style files in the project are placed in the src / style directory, where index.scss is some basic styles for global use, which can be introduced in the main.js file for global use. The theme.scss and handle.scss files are files for theme color configuration later. Furthermore, the themes.scss in the src / style directory can configure different theme color schemes, and the handle.scss in src / style / is used to operate the $theme variable mentioned above.
[0070] Furthermore, after the theme style files are configured, these two files are globally imported and used in the Vue page.
[0071] As for the theme switching logic implemented in the above step S30, this embodiment can use JavaScript to implement the theme switching function. When the target webpage extracts the theme intention string from the voice content, a corresponding JavaScript function will be triggered. In this function, the change of the theme style is achieved by accessing and adjusting the value of the SCSS variable. At the same time, in order to save the user's choice, the target theme style data selected by the user can be saved as a history option to the back-end storage area of the target webpage through Ajax technology.
[0072] In addition, in some other embodiments, in order to ensure an optimized user experience, the following functions may be added:
[0073] Smooth transition: Use the CSS transition property to ensure a smooth transition effect when switching themes, making users feel more natural.
[0074] Default theme setting: Check the request to obtain the user's previous selection when the page loads, and automatically apply the theme previously selected by the user.
[0075] Visual feedback: Add icons to the theme switch button to provide more intuitive visual instructions to help users quickly identify the function of theme switching.
[0076] Embodiment 2
[0077] like Figure 3 As shown, based on the above-mentioned embodiment 1, a website webpage theme style switching method of embodiment 2 is proposed. In this embodiment, the backend storage area of the target webpage stores the historical options of the webpage theme style of the user;
[0078] Accordingly, the step S20 includes:
[0079] Step S21, obtaining the identity information of the user, and determining the historical options of the user stored in the backend storage area according to the identity information;
[0080] It is understandable that after the user logs his account information into the browser application, or logs his account information into the target web page, the target web page will determine the identity information of the user from the account information logged in by the user; and the user's identity information identification ID will establish a correspondence with the user's previous historical options for selecting the website theme style in the background server database. The front end can determine the user's corresponding historical options by obtaining the user's identity information.
[0081] Step S22, obtaining target theme style data corresponding to the theme intention character string from the history options.
[0082] It is understandable that each time the user opens the target web page and selects the corresponding target theme style, the front end of the target web page saves the target theme style data selected by the user as a history option in the back-end storage area of the target web page through Ajax technology; in this way, after the user closes the browser or closes the target web page, if the user reopens the target web page, the target theme style data corresponding to the user's switching intention this time can be found in the back-end storage area; in this way, the situation in the prior art that the web page that relies on the state storage of the browser is forced to reselect the web page style theme when the user visits again when the historical content of the browser cache is cleared.
[0083] Embodiment 3
[0084] like Figure 4 As shown, based on the above-mentioned embodiment 1, a method for switching the theme style of a website webpage in embodiment 2 is proposed. In this embodiment, it also includes:
[0085] S11, obtaining the identity information of the user, determining the portrait data of the user according to the identity information; obtaining the user preference information of the user in the backend storage area according to the portrait data; and filtering out web page theme style recommendation options that meet the user preference information from the backend storage area of the target web page according to the user preference information;
[0086] Accordingly, the step S20 includes:
[0087] S201, selecting target theme data corresponding to the theme intention character string from each of the web page theme recommendation options.
[0088] In addition, an embodiment of the present invention further provides a computer-readable storage medium, on which a website web page theme style switching program is stored.
[0089] In this embodiment, the front end can select a web page theme style that is closest to the user's switching intention from the style themes that the user may prefer according to the user's switching intention instruction, which is more intelligent and further improves the user experience.
[0090] Embodiment 4
[0091] On the other hand, the present application also proposes a device for switching the theme style of a website webpage, comprising:
[0092] The speech extraction module 01 is used to extract the theme intention character string from the speech content when the target webpage is in the display state and it is detected that the speech content input by the user at the front end of the target webpage meets the webpage theme switching intention operation;
[0093] A web page theme style acquisition module 02 is used to acquire target theme style data corresponding to the theme intention character string from the backend storage area of the target web page;
[0094] The switching module 03 is used to modify the value of the SCSS variable in the SCSS dependency file of the front end of the target webpage according to the theme intention character string, so as to apply the target theme style data to the target webpage.
[0095] Understandably, Figure 5 The corresponding task execution device may be an integrated circuit or a virtual device, which is installed in the computer device involved in the above embodiment to cooperate with the implementation of the solution of the embodiment of the website web page theme switching method.
[0096] Those skilled in the art can clearly understand that, for the convenience and simplicity of description, only the division of the above-mentioned functional units and modules is used as an example for illustration. In practical applications, the above-mentioned function allocation can be completed by different functional units and modules as needed, that is, the internal structure can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiment can be integrated in a processing unit, or each unit can exist physically separately, or two or more units can be integrated in one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of software functional units. In addition, the specific names of the functional units and modules are only for the convenience of distinguishing each other, and are not used to limit the scope of protection of this application. The specific working process of the units and modules in the above-mentioned system can refer to the corresponding process in the aforementioned method embodiment, which will not be repeated here.
[0097] In addition, an embodiment of the present invention further provides a computer program product, wherein a website web page theme style switching program is stored on the computer program product.
[0098] In some embodiments, the following scheme can be designed to implement the website webpage theme style switching program:
[0099] a. Pre-set multiple color themes and default styles for the website, and add a unique string identifier for each theme;
[0100] b. Configure SCSS files to define styles and variables of different themes to facilitate the management of color schemes and styles of different themes;
[0101] c. When the user selects a theme, identify and obtain the color string that meets the user's theme switching intention, and map the color string to the target class;
[0102] d. Modify the theme tag of the website color according to the target class, and switch the theme color of the website to the color corresponding to the color string;
[0103] e. Use Ajax request to save the theme style selected by the user to the backend server;
[0104] f. When the user visits the website again, the theme record previously selected by the user is obtained from the back-end server and the theme style is automatically applied.
[0105] It should be noted that if the above-mentioned integrated unit / module / system is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the present application implements all or part of the processes in the above-mentioned embodiment method, which can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a computer-readable storage medium, and the computer program can implement the steps of the above-mentioned various method embodiments when executed by the processor. Among them, the computer program includes computer program code, and the computer program code can be in source code form, object code form, executable file or some intermediate form. The computer-readable medium may at least include: any entity or device that can carry the computer program code to an electronic device, a recording medium, a computer memory, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), an electric carrier signal, a telecommunication signal, and a software distribution medium. For example, a USB flash drive, a mobile hard disk, a magnetic disk or an optical disk. In some jurisdictions, according to legislation and patent practice, computer-readable media cannot be electric carrier signals and telecommunication signals.
[0106] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described or recorded in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.
[0107] The embodiments described above are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, a person skilled in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some of the technical features may be replaced by equivalents. Such modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application, and should all be included in the protection scope of the present application.
[0108] It should be noted that, in this article, the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or system including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or system. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the existence of other identical elements in the process, method, article or system including the element.
[0109] The serial numbers of the above embodiments of the present invention are only for description and do not represent the advantages or disadvantages of the embodiments.
[0110] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present invention, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, a magnetic disk, or an optical disk), and includes a number of instructions for enabling a terminal device (which can be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to execute the methods described in each embodiment of the present invention.
[0111] The above are only preferred embodiments of the present invention, and are not intended to limit the patent scope of the present invention. Any equivalent structure or equivalent process transformation made using the contents of the present invention specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present invention.
Claims
1. A method for switching the theme style of a website webpage, characterized in that: The method comprises: When the target webpage is in a display state and it is detected that the voice content input by the user at the front end of the target webpage meets the webpage theme switching intention operation, extracting the theme intention character string from the voice content; Acquiring target theme style data corresponding to the theme intention character string from the backend storage area of the target webpage; The value of the SCSS variable in the SCSS dependency file of the front end of the target webpage is modified according to the theme intention character string to apply the target theme style data to the target webpage.
2. The method according to claim 1, characterized in that The backend storage area of the target webpage stores the historical options of the webpage theme style of the user; The step of acquiring target theme style data corresponding to the theme intention character string from the backend storage area of the target webpage includes: Acquire the identity information of the user, and determine the historical options of the user stored in the backend storage area according to the identity information; Target theme style data corresponding to the theme intention character string is acquired from the history options.
3. The method according to claim 1, characterized in that The method further comprises: The target theme style data selected by the user is saved as a history option in the backend storage area of the target webpage.
4. The method according to any one of claims 1 to 3, characterized in that The method further comprises: The SCSS dependency file is used to configure a plurality of different website theme style tags, and the SCSS variables are configured to manage the color schemes and styles of different website theme styles; wherein the website theme style tags correspond to the theme style data of the target web page in the backend storage area.
5. The method according to any one of claims 1 to 3, characterized in that: The website webpage has a voice input mark, and the method further includes: In response to a triggering operation of the voice input identifier by the user, the voice content input by the user at the front end of the target webpage is detected.
6. The method according to any one of claims 1 to 3, characterized in that: The method further comprises: When the subject intention string is extracted from the voice content, a JavaScript function is triggered, the SCSS variable is accessed through the JavaScript function, and the value of the SCSS variable is modified according to the subject intention string to apply the target subject style data to the target web page.
7. The method according to any one of claims 1 to 3, characterized in that: The method further comprises: Acquire the identity information of the user, and determine the portrait data of the user according to the identity information; Acquire user preference information of the user in the backend storage area according to the portrait data; According to the user preference information, selecting web page theme style recommendation options that meet the user preference information from the backend storage area of the target web page; The step of acquiring target theme style data corresponding to the theme intention character string from the backend storage area of the target webpage includes: The target theme data corresponding to the theme intention character string is selected from each of the web page theme recommendation options.
8. A device for switching the theme style of a website webpage, characterized in that: include: A voice extraction module is used to extract a topic intention character string from the voice content when the target webpage is in a display state and it is detected that the voice content input by the user at the front end of the target webpage meets the webpage topic switching intention operation; A web page theme style acquisition module, used to acquire target theme style data corresponding to the theme intention character string from the backend storage area of the target web page; The switching module is used to modify the value of the SCSS variable in the SCSS dependency file of the front end of the target webpage according to the theme intention character string, so as to apply the target theme style data to the target webpage.
9. A computer device, characterized in that: The device includes: a memory, a processor, and a website webpage theme style switching program stored in the memory and executable on the processor, wherein the website webpage theme style switching program is configured to implement the steps of the website webpage theme style switching method according to any one of claims 1 to 7.
10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a website webpage theme style switching program, and when the website webpage theme style switching program is executed by the processor, the steps of the website webpage theme style switching method according to any one of claims 1 to 8 are implemented.