Página inicial Explorar Ajuda
Registrar Entrar
qor5
/
docs
1
0
Fork 0
Arquivos Issues 0 Pull Requests 0 Wiki
Tree: 56f1baa76d
Branches Tags
docs
/
docs
/
activity-log.html

activity-log.html 18 KB
Histórico Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267 
  1. <!DOCTYPE html>
    2. 

  2. 

  3. <html>
    4. 

  4. <head>
    5. 

  5. <title>Building Admin - Activity Log - QOR5 Document</title>
    6. 

  6. 

  7. <meta name='description'>
    8. 

  8. <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
    9. 

  9. <base href='/docs/'>
    10. 

  10. 

  11. <link href='index.css' rel='stylesheet' type='text/css'>
    12. 

  12. 

  13. <script type='text/javascript' defer src='index.js'></script>
    14. 

  14. </head>
    15. 

  15. 

  16. <body>
    17. 

  17. <div id='app' v-cloak>
    18. 

  18. <div v-init-context:vars='{hideAside: false}' class='flex h-screen'>
    19. 

  19. <div class='flex-1 flex flex-col overflow-hidden'>
    20. 

  20. <div class='flex h-full'>
    21. 

  21. <aside v-show='!vars.hideAside' id='menuScroller' class='flex flex-col w-80 h-full bg-gray-50 border-r border-gray-200 overflow-y-auto'>
    22. 

  22. <div class='h-12'><search></search></div>
    23. 

  23. 

  24. <ul class='px-0 py-3 mx-0 text-base font-normal list-none text-gray-700'>
    25. 

  25. <li class='m-0'>
    26. 

  26. <a href='index.html' id='index.html' onclick='window.storeMenuState("index.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Introduction</a>
    27. 

  27. </li>
    28. 

  28. 

  29. <li class='cursor-default px-4 py-1 truncate break-words w-64 m-0'>Getting Started</li>
    30. 

  30. 

  31. <li class='m-0'>
    32. 

  32. <a href='getting-started/one-minute-quick-start.html' id='getting-started/one-minute-quick-start.html' onclick='window.storeMenuState("getting-started/one-minute-quick-start.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>1 Minute Quick Start</a>
    33. 

  33. </li>
    34. 

  34. 

  35. <li class='cursor-default px-4 py-1 truncate break-words w-64 m-0'>Building Admin</li>
    36. 

  36. 

  37. <li class='m-0'>
    38. 

  38. <a href='basics/listing.html' id='basics/listing.html' onclick='window.storeMenuState("basics/listing.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Listing</a>
    39. 

  39. </li>
    40. 

  40. 

  41. <li class='m-0'>
    42. 

  42. <a href='basics/filter.html' id='basics/filter.html' onclick='window.storeMenuState("basics/filter.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Filters</a>
    43. 

  43. </li>
    44. 

  44. 

  45. <li class='m-0'>
    46. 

  46. <a href='presets-guide/editing-customizations.html' id='presets-guide/editing-customizations.html' onclick='window.storeMenuState("presets-guide/editing-customizations.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Editing</a>
    47. 

  47. </li>
    48. 

  48. 

  49. <li class='m-0'>
    50. 

  50. <a href='basics/brand.html' id='basics/brand.html' onclick='window.storeMenuState("basics/brand.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Brand</a>
    51. 

  51. </li>
    52. 

  52. 

  53. <li class='m-0'>
    54. 

  54. <a href='basics/menu.html' id='basics/menu.html' onclick='window.storeMenuState("basics/menu.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Menu</a>
    55. 

  55. </li>
    56. 

  56. 

  57. <li class='m-0'>
    58. 

  58. <a href='presets-guide/detail-page-for-complex-object.html' id='presets-guide/detail-page-for-complex-object.html' onclick='window.storeMenuState("presets-guide/detail-page-for-complex-object.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Detailing</a>
    59. 

  59. </li>
    60. 

  60. 

  61. <li class='m-0'>
    62. 

  62. <a href='basics/layout.html' id='basics/layout.html' onclick='window.storeMenuState("basics/layout.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Layout</a>
    63. 

  63. </li>
    64. 

  64. 

  65. <li class='m-0'>
    66. 

  66. <a href='basics/login.html' id='basics/login.html' onclick='window.storeMenuState("basics/login.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Login</a>
    67. 

  67. </li>
    68. 

  68. 

  69. <li class='m-0'>
    70. 

  70. <a href='presets-guide/permissions.html' id='presets-guide/permissions.html' onclick='window.storeMenuState("presets-guide/permissions.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Permissions</a>
    71. 

  71. </li>
    72. 

  72. 

  73. <li class='m-0'>
    74. 

  74. <a href='presets-guide/role.html' id='presets-guide/role.html' onclick='window.storeMenuState("presets-guide/role.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Role</a>
    75. 

  75. </li>
    76. 

  76. 

  77. <li class='m-0'>
    78. 

  78. <a href='basics/notification-center.html' id='basics/notification-center.html' onclick='window.storeMenuState("basics/notification-center.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Notification Center</a>
    79. 

  79. </li>
    80. 

  80. 

  81. <li class='m-0'>
    82. 

  82. <a href='basics/shortcut.html' id='basics/shortcut.html' onclick='window.storeMenuState("basics/shortcut.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Keyboard Shortcut</a>
    83. 

  83. </li>
    84. 

  84. 

  85. <li class='m-0'>
    86. 

  86. <a href='basics/confirm-dialog.html' id='basics/confirm-dialog.html' onclick='window.storeMenuState("basics/confirm-dialog.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Confirm Dialog</a>
    87. 

  87. </li>
    88. 

  88. 

  89. <li class='m-0'>
    90. 

  90. <a href='slug.html' id='slug.html' onclick='window.storeMenuState("slug.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Slug</a>
    91. 

  91. </li>
    92. 

  92. 

  93. <li class='m-0'>
    94. 

  94. <a href='seo.html' id='seo.html' onclick='window.storeMenuState("seo.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>SEO</a>
    95. 

  95. </li>
    96. 

  96. 

  97. <li class='m-0'>
    98. 

  98. <a href='activity-log.html' id='activity-log.html' onclick='window.storeMenuState("activity-log.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-blue-500'>Activity Log</a>
    99. 

  99. </li>
    100. 

  100. 

  101. <li class='m-0'>
    102. 

  102. <a href='basics/worker.html' id='basics/worker.html' onclick='window.storeMenuState("basics/worker.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Worker</a>
    103. 

  103. </li>
    104. 

  104. 

  105. <li class='cursor-default px-4 py-1 truncate break-words w-64 m-0'>Web Application</li>
    106. 

  106. 

  107. <li class='m-0'>
    108. 

  108. <a href='basics/page-func-and-event-func.html' id='basics/page-func-and-event-func.html' onclick='window.storeMenuState("basics/page-func-and-event-func.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Page Func and Event Func</a>
    109. 

  109. </li>
    110. 

  110. 

  111. <li class='m-0'>
    112. 

  112. <a href='advanced-functions/the-go-html-builder.html' id='advanced-functions/the-go-html-builder.html' onclick='window.storeMenuState("advanced-functions/the-go-html-builder.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>The Go HTML builder</a>
    113. 

  113. </li>
    114. 

  114. 

  115. <li class='m-0'>
    116. 

  116. <a href='presets-guide/its-the-whole-house.html' id='presets-guide/its-the-whole-house.html' onclick='window.storeMenuState("presets-guide/its-the-whole-house.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Not just scaffolding, it&#39;s the whole house</a>
    117. 

  117. </li>
    118. 

  118. 

  119. <li class='m-0'>
    120. 

  120. <a href='vuetify-components/lazy-portals.html' id='vuetify-components/lazy-portals.html' onclick='window.storeMenuState("vuetify-components/lazy-portals.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Lazy Portals</a>
    121. 

  121. </li>
    122. 

  122. 

  123. <li class='m-0'>
    124. 

  124. <a href='basics/layout-function-and-page-injector.html' id='basics/layout-function-and-page-injector.html' onclick='window.storeMenuState("basics/layout-function-and-page-injector.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Layout Function and Page Injector</a>
    125. 

  125. </li>
    126. 

  126. 

  127. <li class='m-0'>
    128. 

  128. <a href='basics/switch-pages-with-push-state.html' id='basics/switch-pages-with-push-state.html' onclick='window.storeMenuState("basics/switch-pages-with-push-state.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Switch Pages with Push State</a>
    129. 

  129. </li>
    130. 

  130. 

  131. <li class='m-0'>
    132. 

  132. <a href='basics/reload-page-with-a-flash.html' id='basics/reload-page-with-a-flash.html' onclick='window.storeMenuState("basics/reload-page-with-a-flash.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Reload Page with a Flash</a>
    133. 

  133. </li>
    134. 

  134. 

  135. <li class='m-0'>
    136. 

  136. <a href='basics/partial-refresh-with-portal.html' id='basics/partial-refresh-with-portal.html' onclick='window.storeMenuState("basics/partial-refresh-with-portal.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Partial Refresh with Portal</a>
    137. 

  137. </li>
    138. 

  138. 

  139. <li class='m-0'>
    140. 

  140. <a href='basics/manipulate-page-url-in-event-func.html' id='basics/manipulate-page-url-in-event-func.html' onclick='window.storeMenuState("basics/manipulate-page-url-in-event-func.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Manipulate Page URL in Event Func</a>
    141. 

  141. </li>
    142. 

  142. 

  143. <li class='m-0'>
    144. 

  144. <a href='basics/summary-of-event-response.html' id='basics/summary-of-event-response.html' onclick='window.storeMenuState("basics/summary-of-event-response.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Summary of Event Response</a>
    145. 

  145. </li>
    146. 

  146. 

  147. <li class='m-0'>
    148. 

  148. <a href='basics/scope-component.html' id='basics/scope-component.html' onclick='window.storeMenuState("basics/scope-component.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Scope Component</a>
    149. 

  149. </li>
    150. 

  150. 

  151. <li class='m-0'>
    152. 

  152. <a href='basics/event-handling.html' id='basics/event-handling.html' onclick='window.storeMenuState("basics/event-handling.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Event Handling</a>
    153. 

  153. </li>
    154. 

  154. 

  155. <li class='m-0'>
    156. 

  156. <a href='basics/form-handling.html' id='basics/form-handling.html' onclick='window.storeMenuState("basics/form-handling.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Form Handling</a>
    157. 

  157. </li>
    158. 

  158. 

  159. <li class='cursor-default px-4 py-1 truncate break-words w-64 m-0'>UI Components</li>
    160. 

  160. 

  161. <li class='m-0'>
    162. 

  162. <a href='vuetify-components/basic-inputs.html' id='vuetify-components/basic-inputs.html' onclick='window.storeMenuState("vuetify-components/basic-inputs.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Basic Inputs</a>
    163. 

  163. </li>
    164. 

  164. 

  165. <li class='m-0'>
    166. 

  166. <a href='vuetify-components/a-taste-of-using-vuetify-in-go.html' id='vuetify-components/a-taste-of-using-vuetify-in-go.html' onclick='window.storeMenuState("vuetify-components/a-taste-of-using-vuetify-in-go.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>A Taste of using Vuetify in Go</a>
    167. 

  167. </li>
    168. 

  168. 

  169. <li class='m-0'>
    170. 

  170. <a href='vuetify-components/linkage-select.html' id='vuetify-components/linkage-select.html' onclick='window.storeMenuState("vuetify-components/linkage-select.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Linkage Select</a>
    171. 

  171. </li>
    172. 

  172. 

  173. <li class='m-0'>
    174. 

  174. <a href='vuetify-components/auto-complete.html' id='vuetify-components/auto-complete.html' onclick='window.storeMenuState("vuetify-components/auto-complete.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Auto Complete</a>
    175. 

  175. </li>
    176. 

  176. 

  177. <li class='m-0'>
    178. 

  178. <a href='components-guide/composite-new-component-with-go.html' id='components-guide/composite-new-component-with-go.html' onclick='window.storeMenuState("components-guide/composite-new-component-with-go.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Composite new Component With Go</a>
    179. 

  179. </li>
    180. 

  180. 

  181. <li class='m-0'>
    182. 

  182. <a href='components-guide/integrate-a-heavy-vue-component.html' id='components-guide/integrate-a-heavy-vue-component.html' onclick='window.storeMenuState("components-guide/integrate-a-heavy-vue-component.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Integrate a heavy Vue Component</a>
    183. 

  183. </li>
    184. 

  184. 

  185. <li class='cursor-default px-4 py-1 truncate break-words w-64 m-0'>Appendix</li>
    186. 

  186. 

  187. <li class='m-0'>
    188. 

  188. <a href='appendix/all-demo-examples.html' id='appendix/all-demo-examples.html' onclick='window.storeMenuState("appendix/all-demo-examples.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>All Demo Examples</a>
    189. 

  189. </li>
    190. 

  190. </ul>
    191. 

  191. </aside>
    192. 

  192. 

  193. <main class='flex flex-col w-full bg-white overflow-x-hidden overflow-y-auto'>
    194. 

  194. <div id='docContentBox' class='flex flex-row w-full'>
    195. 

  195. <div class='flex flex-grow flex-col w-2/3'>
    196. 

  196. <div class='flex flex-row'>
    197. 

  197. <button @click='vars.hideAside = !vars.hideAside' class='w-12 h-12 p-4'>
    198. 

  198. <div class='w-4 h-4 fill-current text-gray-300'>
    199. 

  199. <?xml version="1.0" encoding="UTF-8"?>
    200. 

  200. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
    201. 

  201. <g id="surface1">
    202. 

  202. <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 2 12 L 2 11 L 14 11 L 14 12 Z M 2 8.5 L 2 7.5 L 14 7.5 L 14 8.5 Z M 2 5 L 2 4 L 14 4 L 14 5 Z M 2 5 "/>
    203. 

  203. </g>
    204. 

  204. </svg>
    205. 

  205. </div>
    206. 

  206. </button>
    207. 

  207. </div>
    208. 

  208. 

  209. <div id='docMainBox' class='px-16 pb-12 pt-4 overflow-auto'>
    210. 

  210. <h1 class='mb-8'>Activity Log</h1>
    211. 

  211. 

  212. <div class='border-t'><p>QOR5 provides a built-in activity module for recording model operations that may be important for admin users of CMS. These records are designed to be easily queried and audited, and the activity module supports the following features:</p>
    213. 

  213. 

  214. <ul>
    215. 

  215. <li>Detailed change logging functionality for model data modifications.</li>
    216. 

  216. <li>Allow certain fields to be ignored when comparing modified data, such as the update time.</li>
    217. 

  217. <li>Customization of the diffing process for complex field types, like time.Time.</li>
    218. 

  218. <li>Customization of the keys used to identify model data.</li>
    219. 

  219. <li>Support both automatic and manual CRUD operation recording.</li>
    220. 

  220. <li>Provide flexibility to customize the actions other than default CRUD.</li>
    221. 

  221. <li>An page for querying the activity log via QOR5 admin</li>
    222. 

  222. </ul>
    223. 

  223. <h2><a name="initialize-the-activity-package" class="anchor" href="#initialize-the-activity-package" rel="nofollow" aria-hidden="true"><span class="octicon octicon-link"></span></a>
    224. 

  224. Initialize the activity package</h2>
    225. 

  225. 

  226. <p>To initialize activity package with the default configuration, you need to pass a <code>presets.Builder</code> instance and a database instance.</p>
    227. 

  227. 

  228. <highlightjs :language='"go"' :code='"presetsBuilder := presets.New()\ndb, err := gorm.Open(sqlite.Open(\"/tmp/activity.db\"), \u0026gorm.Config{})\nif err != nil {\n\tpanic(err)\n}\nactivityBuilder := activity.New(presetsBuilder, db)"'></highlightjs>
    229. 

  229. <p>By default, the activity package uses QOR5 login package&#39;s <code>login.UserKey</code> as the default key to fetch the current user from the context. If you want to use your own key, you can use the <code>SetCreatorContextKey</code> function.</p>
    230. 

  230. 

  231. <p>Same with above, the activity package uses the db instance that passed in during initialization to perform db operations. If you need another db to do the work, you can use <code>SetDBContextKey</code> method.</p>
    232. 

  232. <h2><a name="register-the-models-that-require-activity-tracking" class="anchor" href="#register-the-models-that-require-activity-tracking" rel="nofollow" aria-hidden="true"><span class="octicon octicon-link"></span></a>
    233. 

  233. Register the models that require activity tracking</h2>
    234. 

  234. 

  235. <p>This example demonstrates how to register <code>Product</code> into the activity. The activities on the product model will be automatically recorded when it is created, updated, or deleted.</p>
    236. 

  236. 

  237. <highlightjs :language='"go"' :code='"type Product struct {\n\tTitle string\n\tCode  string\n\tPrice float64\n}\nproductModel := presetsBuilder.Model(\u0026Product{})\n\nactivityBuilder.RegisterModel(productModel).UseDefaultTab().AddKeys(\"Title\").AddIgnoredFields(\"Code\").SkipDelete()"'></highlightjs>
    238. 

  238. <p>By default, the activity package will use the primary key as the key to indentify the current model data. You can use <code>SetKeys</code> and <code>AddKeys</code> methods to customize it.</p>
    239. 

  239. 

  240. <p>When diffing the modified data, the activity package will ignore the <code>ID</code>, <code>CreatedAt</code>, <code>UpdatedAt</code>, <code>DeletedAt</code> fields. You can either use <code>AddIgnoredFields</code> to append your own fields to the default ignored fields. Or <code>SetIgnoredFields</code> method to replace the default ignored fields.</p>
    241. 

  241. 

  242. <p>For special fields like <code>time.Time</code> or media files handled by QOR5 media_library, activity package already handled them. You can use <code>AddTypeHanders</code> method to handle your own field types.</p>
    243. 

  243. 

  244. <p>If you want to skip the automatic recording, you can use <code>SkipCreate</code>, <code>SkipUpdate</code> and <code>SkipDelete</code> methods.</p>
    245. 

  245. 

  246. <p>The Activity package allows for displaying the activities of a record on its editing page. Simply use the <code>EnableActivityInfoTab</code> method to enable this feature. Once enabled, you can customize the format of each activity&#39;s display text using the <code>SetTabHeading</code> method. Additionally, you can make each activity a link to the corresponding record using the <code>SetLink</code> method.</p>
    247. 

  247. <h2><a name="record-the-activity-log-manually" class="anchor" href="#record-the-activity-log-manually" rel="nofollow" aria-hidden="true"><span class="octicon octicon-link"></span></a>
    248. 

  248. Record the activity log manually</h2>
    249. 

  249. 

  250. <p>If you register a preset model into the activity, the activity package will automatically record the activity log for CRUD operations. However, if you need to manually record the activity log for other operations or if you want to register a non-preset model, you can use the following sample code.</p>
    251. 

  251. 

  252. <highlightjs :language='"go"' :code='"currentCtx := context.WithValue(context.Background(), activity.CreatorContextKey, \"user1\")\n\nactivityBuilder.AddRecords(\"Publish\", currentCtx, \u0026Product{Title: \"Product 1\", Code: \"P1\", Price: 100})\n\nactivityBuilder.AddRecords(\"Update Price\", currentCtx, \u0026Product{Title: \"Product 1\", Code: \"P1\", Price: 200})"'></highlightjs>
    253. 

  253. </div>
    254. 

  254. </div>
    255. 

  255. </div>
    256. 

  256. 

  257. <div class='font-medium text-base hidden xl:block text-gray-600 pt-4'>
    258. 

  258. <div class='sticky top-4 w-52'>On This Page<toc></toc></div>
    259. 

  259. </div>
    260. 

  260. </div>
    261. 

  261. <search-result></search-result></main>
    262. 

  262. </div>
    263. 

  263. </div>
    264. 

  264. </div>
    265. 

  265. </div>
    266. 

  266. </body>
    267. 

  267. </html>
    268.