CN116301503A - Method for positioning and following highlighting of right navigation bar of page article - Google Patents
Method for positioning and following highlighting of right navigation bar of page article Download PDFInfo
- Publication number
- CN116301503A CN116301503A CN202310286146.6A CN202310286146A CN116301503A CN 116301503 A CN116301503 A CN 116301503A CN 202310286146 A CN202310286146 A CN 202310286146A CN 116301503 A CN116301503 A CN 116301503A
- Authority
- CN
- China
- Prior art keywords
- title
- highlighting
- scrolling
- page
- positioning
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 30
- 230000000694 effects Effects 0.000 claims abstract description 24
- 238000005096 rolling process Methods 0.000 claims description 9
- 230000003213 activating effect Effects 0.000 claims description 6
- 238000012544 monitoring process Methods 0.000 claims description 3
- 238000009877 rendering Methods 0.000 claims description 3
- 230000001960 triggered effect Effects 0.000 claims description 3
- 230000006870 function Effects 0.000 description 10
- 238000011161 development Methods 0.000 description 5
- 238000012423 maintenance Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0483—Interaction with page-structured environments, e.g. book metaphor
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0485—Scrolling or panning
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Abstract
The invention discloses a method for locating and following highlighting on a right navigation bar of a page article, which comprises the steps of firstly, reading a MarkDown file and converting the MarkDown file into an HTML file; then, extracting the title in the file, and encrypting the title by using an MD5 encryption technology; then, the titles below the tertiary title are filtered; after generating a title list headingList, encrypting the title list again by using an MD5 encryption technology; generating a catalog on a right navigation bar, adding anchor points and effects, and positioning to corresponding titles; when a page scrolls, the directory also follows the scroll; finally, when the user activates the title, a highlighting effect is achieved. The invention realizes the scrolling and highlighting effect by using JavaScript and CSS, and can realize the anchor point positioning highlighting of the position where the directory follows the scrolling and the current scrolling when the user scrolls the page content. Compared with the traditional text following directory positioning mode, the method saves more computing resources, achieves positioning highlighting more efficiently, and can refresh the correct position of the directory highlighting in real time according to user scrolling.
Description
Technical Field
The invention relates to the field of front ends of computer software, in particular to a method for positioning and highlighting a navigation bar on the right side of a page article.
Background
Many WEB applications can manually read a directory from a markdown file, such as a static website generator, such as Gatsby. In addition, there are also some React plug-ins, such as React-markdown, which can parse text from a markdown file. For example, the React developer may parse the markdown file into React Components using the parteMarkdown plugin method, and then may read the directory by executing the mdx-node in the command line, or generate the directory using the remark-gfm plugin method. All the above is that the text after parsing is operated on the plug-in of the previous catalog, but if the exact item cannot be introduced into the catalog plug-in, how does it generate the catalog? What are these catalog plug-ins incompatible front-end development languages?
Accordingly, the prior art has drawbacks and needs improvement.
Disclosure of Invention
The invention aims to solve the technical problems that: the method for locating and following the highlighting on the right navigation bar of the page article is provided, so that the computing resources are saved, the locating highlighting is realized more efficiently, and the correct position of the directory highlighting can be refreshed in real time according to the scrolling of the user.
The technical scheme of the invention is as follows: a method for locating and following highlighting on a right navigation bar of a page article is provided, and comprises the following steps.
S1: reading the Markdown file and converting it into an HTML file; and analyzing the markdown file by using a compact-markdown plug-in to obtain a rolling effect. The method comprises the steps of analyzing a markdown file by using a compact-markdown plug-in, and obtaining a rolling effect: introducing reactingmarkdown into an App.js of a mark down file to be rendered, initializing a head list as an array for storing positioning elements, initializing a head tag as an anchor element, designating a custom renderer in the reactingmarkdown renderer, storing the positioning elements into the head list before the head tag is rendered, traversing the head list when a page title follows scrolling, taking out the element to be scrolled, and rendering the element to the page by the anchor element to realize the scrolling effect.
S2: and extracting the title in the page article, encrypting the title by using an MD5 encryption technology to obtain a title ID, and realizing an anchor point positioning function. Titles below the tertiary title are filtered out and encrypted again using MD5 encryption techniques.
S3: and generating a catalog on the right navigation bar, adding an anchor point positioning function and a highlighting effect, scrolling a page, applying to a corresponding title, and activating the title. While scrolling the content, the current scroll position is monitored, then the currently scrolled title is compared with all titles in the previous headingList, the index position is found to be consistent, at this point it is understood that it is currently at this title, and then the title in the right navigation bar is activated.
S4: when the user activates the title, a highlighting effect is achieved. The specific steps for realizing the highlighting are as follows: registering a monitoring event on the scrolling event, traversing all title level labels in the current document when the event is triggered, judging whether the current scrolling Y coordinate is greater than or equal to the Y coordinate of a label node, activating the label if the current scrolling Y coordinate is greater than or equal to the Y coordinate of the label node, and setting highlighting of the label. The code logic is as follows: a function is defined into the height of the directory array and coordinates, the located title is monitored by an algorithm that finds the most recent value, and the directory is then highlighted and scrolled.
By using JavaScript and CSS to achieve the scrolling and highlighting effect, it is possible to achieve anchor-positioning highlighting of the directory following the location to which scrolling and current scrolling is to take place when the user scrolls through the page content. Compared with the traditional text following directory positioning mode, the method saves more computing resources, achieves positioning highlighting more efficiently, and can refresh the correct position of the directory highlighting in real time according to user scrolling.
By adopting the scheme, the invention provides a method for locating and highlighting the right navigation bar of a page article, solves the problem that md files written by using makedown markup language in the prior art of old version software or non-installable catalog plug-in items and requires the files to have catalogues, and achieves all effects with the prior common document catalogue technology. The technical document written by makedown can be effectively positioned without navigation through the directory plug-in. The traditional text following directory positioning mode is limited by the selection of an html page architecture and js function library, is limited by the development of plug-in functions, is limited by the rolling structure of the current page, and has great maintenance and development difficulty. Meanwhile, the adopted md to html mode can well acquire the position of the title in the html, and the md5 encryption technology can be used for converting the article title into a unique character string, so that the title can be accurately positioned, the effect that the catalog follows the catalog to roll when the page rolls is further realized, obviously, the method has good expandability and practicability, the rolling positioning requirement of the page can be better met, and the method is not limited by the page architecture.
Drawings
FIG. 1 is a flow chart of the method of the present invention.
Detailed Description
The invention will be described in detail below with reference to the drawings and the specific embodiments.
Referring to fig. 1, the present embodiment provides a method for positioning and following highlighting on a right navigation bar of a page article, which includes the following steps.
S1: reading the Markdown file and converting it into an HTML file; and analyzing the markdown file by using a compact-markdown plug-in to obtain a rolling effect. The method comprises the steps of analyzing a markdown file by using a compact-markdown plug-in, and obtaining a rolling effect: introducing reactingmarkdown into an App.js of a mark down file to be rendered, initializing a head list as an array for storing positioning elements, initializing a head tag as an anchor element, designating a custom renderer in the reactingmarkdown renderer, storing the positioning elements into the head list before the head tag is rendered, traversing the head list when a page title follows scrolling, taking out the element to be scrolled, and rendering the element to the page by the anchor element to realize the scrolling effect.
S2: and extracting the title in the page article, encrypting the title by using an MD5 encryption technology to obtain a title ID, and realizing an anchor point positioning function. Titles below the tertiary title are filtered out and encrypted again using MD5 encryption techniques.
S3: and generating a catalog on the right navigation bar, adding an anchor point positioning function and a highlighting effect, scrolling a page, applying to a corresponding title, and activating the title. While scrolling the content, the current scroll position is monitored, then the currently scrolled title is compared with all titles in the previous headingList, the index position is found to be consistent, at this point it is understood that it is currently at this title, and then the title in the right navigation bar is activated.
S4: when the user activates the title, a highlighting effect is achieved. The specific steps for realizing the highlighting are as follows: registering a monitoring event on the scrolling event, traversing all title level labels in the current document when the event is triggered, judging whether the current scrolling Y coordinate is greater than or equal to the Y coordinate of a label node, activating the label if the current scrolling Y coordinate is greater than or equal to the Y coordinate of the label node, and setting highlighting of the label. The code logic is as follows: a function is defined into the height of the directory array and coordinates, the located title is monitored by an algorithm that finds the most recent value, and the directory is then highlighted and scrolled.
By using JavaScript and CSS to achieve the scrolling and highlighting effect, it is possible to achieve anchor-positioning highlighting of the directory following the location to which scrolling and current scrolling is to take place when the user scrolls through the page content. Compared with the traditional text following directory positioning mode, the method saves more computing resources, achieves positioning highlighting more efficiently, and can refresh the correct position of the directory highlighting in real time according to user scrolling.
In summary, the invention provides a method for locating and highlighting the right navigation bar of a page article, which solves the problem that md files written by makedown markup language are required to be provided with catalogues in the projects of old version software or non-installable catalogue plug-ins at present, and achieves all effects of the conventional common document catalogue technology. The technical document written by makedown can be effectively positioned without navigation through the directory plug-in. The traditional text following directory positioning mode is limited by the selection of an html page architecture and js function library, is limited by the development of plug-in functions, is limited by the rolling structure of the current page, and has great maintenance and development difficulty. Meanwhile, the adopted md to html mode can well acquire the position of the title in the html, and the md5 encryption technology can be used for converting the article title into a unique character string, so that the title can be accurately positioned, the effect that the catalog follows the catalog to roll when the page rolls is further realized, obviously, the method has good expandability and practicability, the rolling positioning requirement of the page can be better met, and the method is not limited by the page architecture.
The foregoing description of the preferred embodiment of the invention is not intended to be limiting, but rather is intended to cover all modifications, equivalents, and alternatives falling within the spirit and principles of the invention.
Claims (6)
1. The method for locating and following highlighting on the right navigation bar of a page article is characterized by comprising the following steps:
s1: reading the Markdown file and converting it into an HTML file; resolving the markdown file by using a compact-markdown plug-in to obtain a rolling effect;
s2: extracting a title in a page article, encrypting the title by using an MD5 encryption technology to obtain a title ID, and realizing an anchor point positioning function;
s3: generating a catalog on a right navigation bar, adding an anchor point positioning function and a highlighting effect, scrolling a page, applying to a corresponding title, and activating the title;
s4: when the user activates the title, a highlighting effect is achieved.
2. The method for locating and following highlighting on the right navigation bar of a page article according to claim 1, wherein the step of analyzing the markdown file by using a react-markdown plug-in, and obtaining the scrolling effect comprises the steps of: introducing reactingmarkdown into an App.js of a mark down file to be rendered, initializing a head list as an array for storing positioning elements, initializing a head tag as an anchor element, designating a custom renderer in the reactingmarkdown renderer, storing the positioning elements into the head list before the head tag is rendered, traversing the head list when a page title follows scrolling, taking out the element to be scrolled, and rendering the element to the page by the anchor element to realize the scrolling effect.
3. The method of claim 2, wherein in step S3, the current scrolling position is monitored while scrolling the content, then the currently scrolled title is compared with all titles in the previous headingList, and the index position is found to be consistent, which is understood to be currently at the title, and then the title in the right navigation bar is activated.
4. The method for positioning and following highlighting on the right navigation bar of a page article according to claim 1, wherein in step S4, the specific steps for implementing highlighting are as follows: registering a monitoring event on the scrolling event, traversing all title level labels in the current document when the event is triggered, judging whether the current scrolling Y coordinate is greater than or equal to the Y coordinate of a label node, activating the label if the current scrolling Y coordinate is greater than or equal to the Y coordinate of the label node, and setting highlighting of the label.
5. The method of claim 4, wherein the code logic is configured to: a function is defined into the height of the directory array and coordinates, the located title is monitored by an algorithm that finds the most recent value, and the directory is then highlighted and scrolled.
6. The method of claim 1, further comprising, in step S2: titles below the tertiary title are filtered out and encrypted again using MD5 encryption techniques.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310286146.6A CN116301503A (en) | 2023-03-15 | 2023-03-15 | Method for positioning and following highlighting of right navigation bar of page article |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310286146.6A CN116301503A (en) | 2023-03-15 | 2023-03-15 | Method for positioning and following highlighting of right navigation bar of page article |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116301503A true CN116301503A (en) | 2023-06-23 |
Family
ID=86786813
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310286146.6A Pending CN116301503A (en) | 2023-03-15 | 2023-03-15 | Method for positioning and following highlighting of right navigation bar of page article |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116301503A (en) |
-
2023
- 2023-03-15 CN CN202310286146.6A patent/CN116301503A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10929449B2 (en) | Generating a structured document guiding view | |
| CN101271463B (en) | Structure processing method and system of layout file | |
| CN101952821B (en) | Editing a document using a transitory editing surface | |
| EP2291010A1 (en) | Structure processing method and apparatus for layout file | |
| CN102439588A (en) | Serving font glyphs | |
| CN102368245A (en) | Determination and display of relevant websites | |
| US10417184B1 (en) | Widely accessible composite computer file operative in a plurality of forms by renaming the filename extension | |
| CN105005472B (en) | The method and device of Uyghur Character is shown on a kind of WEB | |
| CN104281677A (en) | Page displaying method and device | |
| EP1830275A1 (en) | Information distribution system | |
| CN108132954B (en) | Localized loading method and device for HTML (Hypertext markup language) page | |
| CN109933751B (en) | Image-text drawing method and device, computer-readable storage medium and computer equipment | |
| CN111291533B (en) | Sentence segment to be displayed display method and device, computer equipment and storage medium | |
| US20080282150A1 (en) | Finding important elements in pages that have changed | |
| US8930808B2 (en) | Processing rich text data for storing as legacy data records in a data storage system | |
| CN114021042A (en) | Webpage content extraction method and device, computer equipment and storage medium | |
| US7802181B2 (en) | Document processing device and document processing method | |
| CN110020279B (en) | Page data processing method and device and storage medium | |
| CN112433995A (en) | File format conversion method, system, computer equipment and storage medium | |
| CN112016267A (en) | Icon font processing method and device and storage medium | |
| CN116301503A (en) | Method for positioning and following highlighting of right navigation bar of page article | |
| KR100846204B1 (en) | Web memo management system | |
| CN110515530B (en) | Method, device and equipment for processing character operation and storage medium | |
| US10089306B1 (en) | Dynamically populating electronic item | |
| CN112749528A (en) | Text processing method and device, electronic equipment and computer readable storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |